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

Question

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

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

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

Answer 1

<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 2

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

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

这仅在 dateFormat 被数组索引正确引用，即在我的示例中，它从日 = 索引 0、月 = 索引 1、年 = 索引 1 开始工作。另外，在我的示例中，我只是将值分配给 spans'

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/。