0

我有月、日和年的单独字段，并且对于 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/

在此先感谢您的帮助！

4

2 回答 2

2

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

我修改了你的小提琴

基本上我只是使用了你在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 对象。

于 2013-04-01T21:03:57.577 回答
0

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

我建议给每组日期输入（日、月和年）一个唯一标识符。目前，您没有任何东西可以区分每组日期。

于 2013-04-01T20:02:37.437 回答