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

Question

所以我正在使用 WordPress 的 Contact Form 7 插件，我相信它利用 jQuery 日期选择器来生成其日期字段(如果我错了，请纠正我)。

我的问题是，我是否可以将用户的输入框拆分为三个单独的元素(日/月/年)，而不是单个字段，同时仍然使用日期选择器来检查日期是否存在(以防止用户例如选择 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);

        }   
});

此外，我会将三个输入字段设置为只读。因此用户无法修改日期选择器插入的值。

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

        }   
    });

}

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