将 jQuery 日期选择器拆分为单独的日/月/年字段

Question

所以我正在使用 Wordpress 的 Contact Form 7 插件，我相信它利用 jQuery datepicker 来生成它的日期字段（如果我错了，请纠正我）。

我的问题是，而不是单个字段，我可以将用户的输入框拆分为三个单独的元素（日/月/年），同时仍然使用日期选择器来检查日期是否存在（以防止用户例如选择 2 月 31 日）？

基本的 JSFiddle，希望能解释我的意思...http://jsfiddle.net/lustre/n908n2g3/1/

基本的日期选择器代码，因为我被告知要包含代码 D：

$("#datepicker").datepicker();

只是在寻找任何建议/帮助 :) 这样的事情可能吗？如果我必须手动将其拆分为三个下拉字段，是否需要应用新的 JavaScript？

Answer 1

这对我有用。日期选择器有一个事件处理程序（onSelect），一旦选择日期就会被调用：

$("#datepicker").datepicker({
    onSelect: function(date) {

            date = date.split(/\//g);

            var day = date[1];
            var month = date[0];
            var year = date[2];

            $('#day').val(day);
            $('#month').val(month);
            $('#year').val(year);

        }   
});

此外，我会将三个输入字段设为只读。所以用户不能修改 datepicker 插入的值。

<p><input id="day" type="text" placeholder="Day" readonly/>
<input id="month" type="text" placeholder="Month" readonly/>
<input id="year" type="text" placeholder="Year" readonly/></p>

另一种方法是为每个元素添加一个日期选择器：

attachDatepickerToFieldById("#day");
attachDatepickerToFieldById("#month");
attachDatepickerToFieldById("#year");

function attachDatepickerToFieldById(id){

    $(id).datepicker({
        onSelect: function(date) {

            date = date.split(/\//g);

            var day = date[1];
            var month = date[0];
            var year = date[2];

            $('#day').val(day);
            $('#month').val(month);
            $('#year').val(year);

        }   
    });

}

现在，当您单击一个字段时，会出现一个日期选择器，并在选择一个日期后相应地设置所有三个字段。在这种情况下，您可以删除原始输入字段。