0

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
3
Views
5 Years
Discussion Span
Last Post by JorgeM
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.