Jquery datepicker restrict dates in second date field based on selected date in first field

Question

How to restrict the user to select "Client_Deadline1" field dates which is less than the selected date in "Internal_Deadline1" field.

Code:

        <script type='text/javascript'>
        //<![CDATA[
        $(function () {
        $('.one').datepicker();
        $('#data').on('change', '.one', function (date) {                
        var date2 = $(this).datepicker('getDate');
        date2.setDate(date2.getDate() + 3);
        var day2=date2.getDay(); //0=Sun, 1=Mon, .., 6=Sat
        if(day2==3){//Sunday
    date2.setDate(date2.getDate()+0);
    }
    if(day2==2){//Saturday
    date2.setDate(date2.getDate()+1);
    }
    if(day2==1){//friday
    date2.setDate(date2.getDate()+2);
    }
        else if(day2==0){//Thursday
        date2.setDate(date2.getDate()+2);
        }
        else if(day2==6){
        date2.setDate(date2.getDate()+2);
        }
        $(this).parent('td').next('td').find('.two').datepicker('setDate', date2);
        });
        $('.two').datepicker();
        });
        $(document).ready(function() {
        var currentItem = 1;
        $(".datepicker").datepicker();
        $('#addnew').click(function(){
        currentItem++;
        $('#items').val(currentItem);
        var strToAdd = '<tr><td style=""><input type="text" name="task'+currentItem+'" id="task'+currentItem+'" value="" /></td><td style=""><input type="text" name="Description'+currentItem+'" id="Description'+currentItem+'" value="" /></td><td style="width: 160px;"><input type="text" class="one datepicker" name="Internal_Deadline'+currentItem+'" id="Internal_Deadline'+currentItem+'" /></td><td style=""><input type="text" class="two datepicker" name="Client_Deadline'+currentItem+'" id="Client_Deadline'+currentItem+'" /></td><td style=""><input type="text" class="datepicker" name="Actual_Deadline'+currentItem+'" id="Actual_Deadline'+currentItem+'" /></td><td style="width:83px;"></td></tr>';
        $('#data').append(strToAdd);
        $(".datepicker").datepicker(); 

        });
        });
        //]]>
        </script>

HTML:

        <input type="button" id="addnew" name="addnew" value="Add a Row" />
        <TABLE id="data" class="dd" style="">
        <TR>
        <td style=""><input type="text" name="task1" id="task1" value="" /></td><td style=""><input type="text" name="Description1" id="Description1" value="" /></td><td style="width: 160px;"><input type="text" class="one datepicker" name="Internal_Deadline1" id="Internal_Deadline1" value="" /></td><td><input type="text" class="two datepicker" name="Client_Deadline1" id="Client_Deadline1" value="" /></td><td style=""><input type="text" class="datepicker" name="Actual_Deadline1" id="Actual_Deadline1" value="" /></td><td style="width: 83px;"></td></tr>
        <input type="hidden" id="items" name="items" value="1" /> 
        </TABLE>

What exactly is your question? If the user selects a date in Internal_Deadline1, you want the date picker in Client_Deadline1 to only show dates before Internal_Deadline1..? — Michael Bellamy
– Michael Bellamy, Commented Feb 28, 2014 at 11:05
If the user selects a date in Internal_Deadline1, I want the date picker in Client_Deadline1 to show after Internal_Deadline1 dates. — user3317777
– user3317777, Commented Mar 4, 2014 at 5:11
possible duplicate of Jquery datepicker restrict dates in second date field based on selected date in first date field — j08691
– j08691, Commented Mar 4, 2014 at 17:07

BenMorel · Accepted Answer · 2014-03-08 18:48:34Z

Here's an example of a holiday booking system I wrote. When a user selects a start date, the end date must be in the future from the start date.

Here's the form

<form action="test.html" method="post" enctype="multipart/form-data" class="createForm" id="createForm"> 

    <div>
        <label for="startDate" >First day</label>
        <input style="width: 100px" type="text" id="startDate" name="startDate" size="10"/>
    </div>

    <div>
        <label for="endDate" >Last Day</label>
        <input style="width: 100px" type="text" id="endDate" name="endDate" size="10"/>
    </div>

</form>

And here's the code using jQuery UI for the magic with the date picker, notice on change of the startDate it sets a minimum value on the endDate

$( "#startDate" ).datepicker({ changeMonth: true,
        changeYear: true,
        dateFormat:'dd/mm/yy',
        showButtonPanel: true,
        firstDay: '1',
        beforeShowDay: $.datepicker.noWeekends,

        // This function changes the 'endDate' calendar picker to show future days
        onSelect: function(dateStr) {
            $('#endDate').datepicker('option', 'defaultDate', dateStr);
            $('#endDate').datepicker('option', 'minDate', dateStr);
        }

});

$( "#endDate" ).datepicker({ changeMonth: true,
        changeYear: true,
        dateFormat:'dd/mm/yy',
        showButtonPanel: true,
        firstDay: '1',
        beforeShowDay: $.datepicker.noWeekends          
});

Hopefully you can adapt this to work within your code.

I've made a fiddle here: JSFiddle

Collectives™ on Stack Overflow

Jquery datepicker restrict dates in second date field based on selected date in first field

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related