Question

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

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

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

基本的datepicker代码＆＃39;因为我被告知要包含代码D：

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

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

Answer 1

这对我有用。 datepicker有一个事件处理程序（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>

另一种方法是为每个元素添加一个datepicker：

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

        }   
    });

}

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

将jQuery datepicker拆分为单独的Day / Month / Year字段

1 个答案: