jquery date picker split into multiple fields

Question

I have the usual Jquery datepicker working fine. But I want to feed it into a set of selectboxes rather than one textfield. I have had success feeding it into one select field with a specific format but am unsure how to feed all three into different fields with different formats.

$(document).ready(function(){
  $("#search_startdate").datepicker({showOn: 'button', 
                                     buttonImage: '/images/cal/calendar.gif', 
                                     buttonImageOnly: true, 
                                     minDate: 0, 
                                     maxDate: '+6M +10D', 
                                     showAnim: 'fadeIn',
                                     altField: '#startdate_month', 
                                     altFormat: 'MM',
                                     altField: '#startdate_day',
                                     altFormat: 'dd'});
    //$("#datepicker").datepicker({showOn: 'button', buttonImage: 'images/calendar.gif', buttonImageOnly: true});

});

This doesn't work, it works on the last field, but ignores the first. If I remove the second set of altField and altFormat lines, the first works.

I also tried putting them in a series,

altField: '#startdate_month', '#start_day', altFormat: 'MM', 'dd'

The problem is the same as here:

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_24767646.html

Any ideas?

Thanks,

tvanfosson · Accepted Answer · 2010-01-17 13:49:21Z

8

I'd suggest using your set up with a single alternate field to get the first select, then using an onClose handler to parse the date and fill the other selects.

$(document).ready(function(){
  $("#search_startdate").datepicker({showOn: 'button', 
                                     buttonImage: '/images/cal/calendar.gif', 
                                     buttonImageOnly: true, 
                                     minDate: 0, 
                                     maxDate: '+6M +10D', 
                                     showAnim: 'fadeIn',
                                     altField: '#startdate_month', 
                                     altFormat: 'MM',
                                     onClose: function(dateText,picker) {
                                                 $('#startdate_day').val( dateText.split(/\//)[1] );
                                              }
                                    });
});

answered Jan 17, 2010 at 13:49

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter Gfader Over a year ago

+1 After trying to bring ASP.NET MVC to support the Australian date format, I decided to submit 3 fields: day,month,year. Nice and clean URL.

Seeker · Accepted Answer · 2012-02-26 18:36:52Z

1

This is simpler I think:

$('#datePickerField').datepicker({
    onClose: function (dateText) {
                var objDate = new Date(dateText);
                $('#year_field').val(dateText.length ? objDate.getFullYear() : '');
                $('#month_field').val(dateText.length ? objDate.getMonth() + 1 : '');
                $('#day_field').val(dateText.length ? objDate.getDate() : '');
            }
});

and if you want changes made to day,month,year fields update the main datapicker:

$('#year_field,#month_field,#day_field').change(function() {
    $('#datePickerField').datepicker('setDate', new Date(
        parseInt($('#year_field').val(), 10),
        parseInt($('#month_field').val(), 10) - 1,
        parseInt($('#day_field').val(), 10)));
});

edited Feb 26, 2012 at 18:36

answered Feb 26, 2012 at 18:25

Seeker

1,2781 gold badge17 silver badges23 bronze badges

1 Comment

Woody Over a year ago

Yes, much simpler and cleaner. Saved me much time!

faizalheesyam · Accepted Answer · 2013-04-22 04:45:00Z

0

just leaving an answer here for future reference, here's a sample of how i did it:

$("#departDate").datepicker({
    onClose: function( selectedDate ) {

        // use split() to break down the [MM/DD/YYYY] format
        // populate each into multiple field

        $('#departDateDay').val( selectedDate.split(/\//)[1] ); // day
        $('#departDateMonth').val( selectedDate.split(/\//)[0] ); // month
        $('#departDateYear').val( selectedDate.split(/\//)[2] ); // year
    }
})

answered Apr 22, 2013 at 4:45

faizalheesyam

161 bronze badge

Collectives™ on Stack Overflow

jquery date picker split into multiple fields

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related