jQuery日期选择器分成多个字段

Question

我已经成功地使用了常规的Jquery日期选择器。但是，我想将其输入到一组选择框中，而不是一个文本字段中。我已经成功地将其输入到一个具有特定格式的选择框中，但是不确定如何将所有三个选择框输入到不同的具有不同格式的字段中。

$(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});

});

这个不起作用，它只对最后一个字段有效，而忽略了第一个字段。如果我删除第二组altField和altFormat行，则第一个字段可以正常工作。

我也尝试将它们串联在一起，

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

问题与此处相同：

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

你有什么想法吗？谢谢。

- holden

Answer 1

我建议使用单个备用字段来获取第一个选择，然后使用onClose处理程序来解析日期并填充其他选择。

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

- tvanfosson

---

在尝试将ASP.NET MVC支持澳大利亚日期格式后，我决定提交3个字段：日、月、年。URL清晰明了。+1 - Peter Gfader

Answer 2

我觉得这更简单：

$('#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() : '');
            }
});

如果您想更改日期、月份或年份字段，请更新主数据选择器：

$('#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)));
});

- Seeker

---

是的，简单而干净。节省了我很多时间！ - Woody

Answer 3

只是留下一个答案供将来参考，这是我实现它的示例：

$("#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
    }
})

- faizalheesyam