SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Location
    Manchester
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery UI Date Picker Validation

    I am trying to validate the date fields so when you if you select a date in the future and in the second input box you select today's date it should not let you submit the form.

    I have it working so you cant select yesterday's date - its the date comparison that i cant seem to get working.

    Code:
    /js/jquery-ui-1.8.6.custom.min.js"/>
    /js/jquery.validate.js" />
    /js/jquery.ui.datepicker.validation.js" />
    
    <asp:TextBox ID="txtStartDate" runat="server" CssClass="DatepickerInput validBeforeDatepicker" />
    <asp:TextBox ID="txtEndDate" runat="server" CssClass="DatepickerInput validAfterDatepicker" />
    
    <script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
    });
    
     $('.validBeforeDatepicker,.validAfterDatepicker').datepicker();
    
    
    $(function () {
        $(".DatepickerInput").datepicker({
            showOn: "button",
            buttonImage: "/assets/img/calendar.gif",
            buttonImageOnly: true,
            minDate: 0,
            required: true,
            message: "This is a required field",
            dateFormat: 'dd-mm-yy'
        });
    });
    
    $(function () {
        $("#validAfterDatepicker").datepicker({
            showOn: "button",
            buttonImage: "/assets/img/calendar.gif",
            buttonImageOnly: true,
            minDate: +1,
            required: true,
            message: "This is a required field",
            dateFormat: 'dd-mm-yy'            
        });
    });
    I'm following this example but I'm going wrong somewhere and cant seem to quite put my finger on what it could be. http://keith-wood.name/uiDatepickerValidation.html

    Website: http://bit.ly/WdZf10

    Please dont submit form as it will just be spam if testing the form on the website. You can see its not validating even before submitting the form

  2. #2
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use the jQuery UI datepicker date range picker example from this page. It will let the user choose a date range from a single calendar such that end date >= start date. In that example, add one extra check for min date (minDate: 0) to make sure past starting date cannot be chosen.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •