将 jquery ui 日期范围选择器输入上的默认输入值设置为特定日期答案

【问题标题】：Set default input values on jquery ui daterange picker inputs to be specific dates将 jquery ui 日期范围选择器输入上的默认输入值设置为特定日期
【发布时间】：2011-09-11 06:58:21
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： jquery jquery-ui datepicker daterangepicker

【解决方案1】：

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

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/。

【讨论】：

您好威廉，感谢您的回复和代码。我看到弹出日期选择器中的日期设置为从和到输入的前 30 天和今天。但我想要的是在页面加载时设置输入值，例如
谢谢威廉，是的，我尽可能多地改变了小提琴，你上面的编辑帮助解决了问题

【解决方案2】：

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

var d = new Date(); jQuery("#to).datepicker("setDate", d);

【讨论】：