Member Avatar for sanjeewa.abeywardana

I have downloaded code library from http://jqueryui.com/download related to datetimepicker control to add to a text box in asp .NET web page (Without master page) , and it is working fine (ie. themes are also displayed fine ,as EXPECTED colors)

But need to know the correct sequence of calling the .css files and .js files , as I didn't find the proper sequnce.Plus need to know what essential files need to be copied to the development folder from the download folder too, as I have copied almost all the files (Not good practice )

Code is below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Recipe4.aspx.cs" Inherits="JQueryPractice.JQueryCookbook.Chapter02.Recipe4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <link href="../../Styles/sunny/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Styles/sunny/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link href="../../Styles/sunny/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" />
    <link href="../../Styles/Site.css" rel="stylesheet" type="text/css" />
    <link href="../../Styles/sunny/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">   
        $(document).ready(function () {
            $("#txtStartDate").datepicker();
            $("#txtEndDate").datepicker();
            $("#btnSubmit").click(function (e) {
                e.preventDefault();
                var startdate = new Date();
                startdate = Date.parse($("#txtStartDate").val());
                var enddate = new Date();
                enddate = Date.parse($("#txtEndDate").val());
                if (startdate > enddate) {
                    alert("StartDate is later than EndDate");
                }
                else {
                    alert('success');
                }
            });
            $("#btnReset").click(function (e) {
                e.preventDefault();
                $("#txtStartDate").val("");
                $("#txtEndDate").val("");
            });
        });
</script>
    <title>Validation of date range in ASP.NET Form</title>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
        <fieldset style="width: 400px; height: 150px;">
            <table border="0" cellpadding="3" cellspacing="3">
                <tr>
                    <td colspan="2">
                        Please select the date range:
                    </td>
                </tr>
                <tr>
                    <td>
                        Start Date:
                    </td>
                    <td>
                        <asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        End Date:
                    </td>
                    <td>
                        <asp:TextBox ID="txtEndDate" runat="server" ></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
                        <asp:Button ID="btnReset" runat="server" Text="Reset" />
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
    </form>
</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 415 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

Ok, so with jQuery UI, the best thing to do is to go back to the website and click on the Custom Download button. Only select the items that you require. This will ensure that your CSS and JavaScript files only have the necessary code.

http://jqueryui.com/download/

With regard to the sequence.. if you are going to load all of this in the head section, the CSS should go before your JavaScript references.

You can also move all of your JavaScript to the end of your page, just before the closing </body> tag.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.