CODEWITHSUNDEEP
phpjqueryjquery-uidatepicker
Dodinas
Dodinas

Reputation:

jQuery DatePicker - 2 Fields

I'm currently working with jQuery and using the datepicker.

I have two input fields: Start Date and End Date. When each is clicked, the datepicker pops out.

For the "End Date" field, I would like the jQuery date picker to highlight the same day. For example, if a user picks 8/12/09 as their start date, for the End Date, they cannot pick anything BEFORE 8/12/09.

Here's what I currently have:

$("#datepicker").datepicker({minDate: +5, maxDate: '+1M +10D', changeMonth: true});
var startDate = $("#datepicker").val();
var the_date = new Date(startDate);
$("#datepicker2").datepicker({ minDate: the_date });

And, unforunately, this does not work.

I have found that if I "hard-code" the values in, like:

$("#datepicker2").datepicker({ minDate: new Date("08/12/2009") });

it will work fine. Any ideas on how to pass the "start date" to the "end date" picker?

Thanks!

Upvotes: 0

Views: 6443

Answers (3)

Thulasiram
Thulasiram

Reputation: 8552

date time culture will be different for differ user. the jquery ui minimum is not working for that above code. and initially if i select end date then minimum date will not set for end date.

<input type="text" id="tbStartDate" value="" disabled="disabled" />
<input type="text" id="tbEndDate" value="" disabled="disabled" />

<script type="text/javascript">
    $(document).ready(function () {
        $("#tbStartDate").datepicker({
            //minDate: +5, 
            //maxDate: '+1M +10D', 
            //changeMonth: true,
            dateFormat: 'dd-mm-yy',
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Content/Calendar.png',
            buttonText: 'Click here (date)',
            onSelect: function (dateText, inst) {
                $('#tbEndDate').datepicker("option", 'minDate', new Date($("#tbStartDate").datepicker('getDate')));
            },
            onClose: function (dateText, inst) {
                //$("#StartDate").val($("#tbStartDate").val());
            }
        });

        $("#tbEndDate").datepicker({
            dateFormat: 'dd-mm-yy',
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Content/Calendar.png',
            buttonText: 'Click here (date)',
            onClose: function (dateText, inst) {
                //$("#EndDate").val($("#tbEndDate").val());
            }
        });

        $('#tbEndDate').datepicker("option", 'minDate', new Date($("#tbStartDate").datepicker('getDate')));
    });
</script>

Upvotes: 0

blue01
blue01

Reputation: 2095

start date end date http://rowsandcolumns.blogspot.com/2010/07/jquery-start-dateend-date-datepicker.html

Upvotes: 0

Rufinus
Rufinus

Reputation: 30721

this cant work

you need a callback function from the date picker for the "picking" event. befor this event your startDate will be empty.

try this:

$("#datepicker").datepicker({
     minDate: +5, 
     maxDate: '+1M +10D', 
     changeMonth: true, 
     onSelect: function(dateText, inst){
               var the_date = new Date(dateText);
               $("#datepicker2").datepicker('option', 'minDate', the_date);
     }
 });
 $("#datepicker2").datepicker(); // add options if you want

Upvotes: 4

Related Questions