CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
Aaron
Aaron

Reputation: 545

jQuery UI DatePicker read date from multiple fields

I have separate fields for month, day and year and have a calendar control for each set of three fields contained in a div. I am trying to have the calendar popup defaults to the date set in the fields if there is one and if no date set in the 3 fields it would default to todays like it currently does.

Here is my code.

HTML:

    <h1>Date Picker Example</h1>
<div class="date-picker">
 <label for="preferredDate">Date</label>
 <input type="text" class="date_month" value="06" size="2" maxlength="2" /> / 
 <input type="text" class="date_day" value="01" size="2" maxlength="2" /> / 
 <input type="text" class="date_year" value="2014" size="4" maxlength="4" />  
</div>
<div class="date-picker">
 <label for="preferredDate">Date</label>
 <input type="text" class="date_month" value="09" size="2" maxlength="2" /> / 
 <input type="text" class="date_day" value="09" size="2" maxlength="2" /> / 
 <input type="text" class="date_year" value="2017" size="4" maxlength="4" />   
</div>
<div class="date-picker">
 <label for="preferredDate">Date</label>
 <input type="text" class="date_month" size="2" maxlength="2" /> / 
 <input type="text" class="date_day" size="2" maxlength="2" /> / 
 <input type="text" class="date_year" size="4" maxlength="4" />  
</div>

jQuery:

$(".date_year").datepicker({
    showOn: 'button',
    //buttonImage: "calendar_icon.png", 
    buttonText: 'Cal',
    buttonImageOnly: false,
    showAnim: 'fadeIn',
    dateFormat: 'mm/dd/yy',
    onClose: function (dateText, picker) {
        dateArr = dateText.split('/');
        $(this).siblings('.date_month').val(dateArr[0]);
        $(this).siblings('.date_day').val(dateArr[1]);
        $(this).val(dateArr[2]);
    }
});

Example : http://jsfiddle.net/C57Ws/3/

Thanks in advance for the help!

Upvotes: 0

Views: 964

Answers (2)

jmm
jmm

Reputation: 990

You can use the datepicker option beforeShow to look at the inputs and create a datepicker object to set what ever you want.

I modified your fiddle

Basically i just used the code you had in the onClose option. But went in reverse.

beforeShow: function (dateText, picker) {

    var month =     $(this).siblings('.date_month').val();
    var day = $(this).siblings('.date_day').val();
    var year = $(this).val();
    var showDate = day+ "/" + month + "/" + year;
    alert(showDate);
    // do some error checking before returning date to show.
    return { defaultDate: showDate };
},

I also change the code you were using in onClose. If you notice your example, the datapicker is attached to the "year" input. If a user doesn't click a date (clicks outside datepicker) the dateText you are passing in will only have the year. Your split method will not have a full date of three variables. That will result in the year getting added to the date_month if a date is not clicked on..

You can use $(this).datepicker( "getDate" ) to make sure you get the date that was clicked, or empty string if nothing was clicked. It returns a Date object that you can use the standard date object methods.

Upvotes: 2

James Glass
James Glass

Reputation: 4300

You'll have to use the jQueryUI option defaultDate or the jQueryUI method setDate along with the jQueryUI option onSelect.

I would suggest giving each set of date inputs (day, month, and year) a unique identifier. At the moment, you don't have anything to distinguish each set of dates by.

Upvotes: 0

Related Questions