Separate a jQuery UI datepicker into 3 separate text boxes

Question

Does anyone know of an elegant way of separating the jquery-ui datepicker's input into 3 separate boxes?

By default its input is just one textbox: DD/MM/YYYY

I have to separate the input into 3 separate ones for day, month, and year: DD, MM, and YYYY.

Answer 1

You can use the datepicker function onClose then grab the value.

See this http://jsfiddle.net/96FPU/

This will only work if the dateFormat is correctly referenced by the array index, i.e. in my example, it is working from day = index 0, month = index 1, year = index 1. Also in my example i am just assigning the values to spans'

Answer 2

<input type='text' id='fullDate' name='fulldate'>
<!-- Your other HTML fields listed above -->

$('#fullDate').datepicker({
    onSelect: function(dateText, inst) {
        var pieces = dateText.split('/');
        $('#day').val(pieces[0]);
        $('#month').val(pieces[1]);
        $('#year').val(pieces[2]);
    }
})

working example http://jsfiddle.net/jomanlk/7NgpQ/

Answer 3

You can use the .datepicker('dialog') method to achieve this effect.

function onSelect(dateText, inst) {
    var pieces = dateText.split('/');
    for (var i = 0; i < pieces.length; ++i)
        $('.date:eq('+i+')').val(pieces[i]);
};

$('.date').click(function(event) {
    var d = $('.date').map(function() { return $(this).val() }).get().join('/');
    $(this).datepicker('dialog', d, onSelect, { dateFormat: 'dd/mm/yy' }, [10, 40]);
});

See this in action: http://jsfiddle.net/william/QHasQ/.