将jQuery UI日期选择器分成3个单独的文本框

Question

有没有人知道将jquery-ui datepicker的输入分成3个独立框的优雅方法？

默认情况下，其输入只是一个文本框：DD/MM/YYYY

我必须将日期，月份和年份的输入分为3个单独的输入：DD，MM和YYYY。

Answer 1

您可以使用datepicker函数onClose然后获取值。

请参阅此http://jsfiddle.net/96FPU/

这只有在数组索引正确引用dateFormat时才有效，即在我的例子中，它从day = index 0，month = index 1，year = index 1开始工作。同样在我的例子中我只是将值分配给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]);
    }
})

工作示例http://jsfiddle.net/jomanlk/7NgpQ/

Answer 3

您可以使用.datepicker('dialog')方法来达到此效果。

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]);
});

请参阅此操作：http://jsfiddle.net/william/QHasQ/。