Question

我有月，日和年的单独字段，并且对div中包含的每组三个字段都有日历控件。我试图让日历弹出窗口默认为字段中设置的日期，如果有的话，如果3个字段中没有设置日期，它将默认为今天的日期。

这是我的代码。

HTML：

    <h1>Date Picker Example</h1>
<div class="date-picker">
 <label for="preferredDate">Date</label>
 <input type="text" class="date_month" value="06" size="2" maxlength="2" /> / 
 <input type="text" class="date_day" value="01" size="2" maxlength="2" /> / 
 <input type="text" class="date_year" value="2014" size="4" maxlength="4" />  
</div>
<div class="date-picker">
 <label for="preferredDate">Date</label>
 <input type="text" class="date_month" value="09" size="2" maxlength="2" /> / 
 <input type="text" class="date_day" value="09" size="2" maxlength="2" /> / 
 <input type="text" class="date_year" value="2017" size="4" maxlength="4" />   
</div>
<div class="date-picker">
 <label for="preferredDate">Date</label>
 <input type="text" class="date_month" size="2" maxlength="2" /> / 
 <input type="text" class="date_day" size="2" maxlength="2" /> / 
 <input type="text" class="date_year" size="4" maxlength="4" />  
</div>

jQuery的：

$(".date_year").datepicker({
    showOn: 'button',
    //buttonImage: "calendar_icon.png", 
    buttonText: 'Cal',
    buttonImageOnly: false,
    showAnim: 'fadeIn',
    dateFormat: 'mm/dd/yy',
    onClose: function (dateText, picker) {
        dateArr = dateText.split('/');
        $(this).siblings('.date_month').val(dateArr[0]);
        $(this).siblings('.date_day').val(dateArr[1]);
        $(this).val(dateArr[2]);
    }
});

示例：http://jsfiddle.net/C57Ws/3/

提前感谢您的帮助！

Answer 1

您可以使用datepicker选项beforeShow查看输入并创建一个datepicker对象来设置您想要的内容。

我修改了您的fiddle

基本上我只使用了onClose选项中的代码。但反过来了。

beforeShow: function (dateText, picker) {

    var month =     $(this).siblings('.date_month').val();
    var day = $(this).siblings('.date_day').val();
    var year = $(this).val();
    var showDate = day+ "/" + month + "/" + year;
    alert(showDate);
    // do some error checking before returning date to show.
    return { defaultDate: showDate };
},

我还会更改您在onClose中使用的代码。如果您注意到您的示例，则数据贴图将附加到“年份”输入。如果用户未单击日期（点击外部日期选择器），则您传入的dateText将只有年份。您的拆分方法不会包含三个变量的完整日期。如果没有点击日期，这将导致年份被添加到date_month。

您可以使用$(this).datepicker( "getDate" )确保获得点击的日期，如果没有点击任何内容，则使用空字符串。它返回一个Date对象，您可以使用标准日期对象方法。

Answer 2

您必须使用jQueryUI选项defaultDate或jQueryUI方法setDate以及jQueryUI选项onSelect。

我建议给每组日期输入（日，月和年）一个唯一的标识符。目前，您无法区分每组日期。

jQuery UI DatePicker从多个字段读取日期

2 个答案: