0

我正在使用 jquery ui daterange datepicker http://jqueryui.com/demos/datepicker/#date-range我的代码低于它几乎是默认初始化。我希望我的“to”输入字段值是今天的日期，而“from”输入字段值是 30 天前。我还没有找到动态设置这些输入值，任何帮助表示赞赏

谢谢

<div id="date-wrapper">
<script>
$(function() {
    var dates = $( "#from, #to" ).datepicker({
        defaultDate: "+1w",
        dateFormat: "M d, yy",
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            var option = this.id == "from" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        }
    });
});
</script>
<label for="from"></label>
<input type="text" id="from" name="from"/><span style="font-weight:bold;font-size:15px;">-</span>
<label for="to"></label>
<input type="text" id="to" name="to"/>
</div>
</div>
4

2 回答 2

3

您需要分别启动这两个字段。不过，您可以将设置保存到对象以供重复使用。

JavaScript 看起来像：

var settings = {
    dateFormat: "M d, yy",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function(selectedDate) {
        var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(
            instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        $("#from, #to").not(this).datepicker("option", option, date);
    }
};
$("#to").datepicker(settings);
$("#from").datepicker($.extend({}, settings, { defaultDate: '-30d'}));

在行动中看到它：http: //jsfiddle.net/william/xtATL/。

编辑：

您可以使用实用程序函数$.datepicker.formatDate(format, date, settings)来格式化要在输入中显示的日期：

$("#to").val(function() {
    return $.datepicker.formatDate('M d, yy', new Date(), settings);
});
$("#from").val(function() {
    var thirtyDaysAgo = new Date().getTime() - 30 * (1000*60*60*24);
    return $.datepicker.formatDate('M d, yy', new Date(thirtyDaysAgo), settings);
});

请参阅更新的示例：http: //jsfiddle.net/william/xtATL/4/。

于 2011-09-11T07:28:36.337 回答
0

在初始化 datepicker 之前在输入中设置日期（使用正确的日期格式），或者在初始化 datepicker 之后使用 setDate 方法。例如

var d = 新日期（）；jQuery("#to).datepicker("setDate", d);

于 2011-09-11T10:23:13.860 回答