Datepicker 设置默认日期答案

【问题标题】：Datepicker set default dateDatepicker 设置默认日期
【发布时间】：2014-04-15 01:19:26
【问题描述】：

我正在尝试在初始化时为 Jquery datepicker 设置默认日期。这是我的html：

var content = "";
            content = "<table class=\"filter-table\">";
            content += "<tr><td><label for='startDate'>From </label></td><td><input name='startDate' id='startDate' class='date-picker' /></td></tr>";
            content += "<tr><td>&nbsp;</td></tr>";  
            content += "<tr><td><label for='endDate'>To </label></td><td><input name='endDate' id='endDate' class='date-picker'  /></td></tr>";

还有我的 JavaScript：

<script type="text/javascript">
    function showdatepicker() {
        $('.date-picker').datepicker( {
            changeMonth: true,
            changeYear: true,
            changeDay: true,
            showButtonPanel: true,
            dateFormat: 'yy-mm-dd',
            onClose: function(dateText, inst) { 
                var day = $("#ui-datepicker-div .ui-datepicker-day :selected").val();
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $('#startDate').datepicker({defaultDate: -30});
                $('#endDate').datepicker({defaultDate: new Date()});
            }
        });
    }       
    </script>

我要做的是设置日期并在加载页面时显示在文本框中。 endDate 应该是当前日期，而开始日期应该是一个月前。但是，通过使用这些代码，它不会在第一次加载时在文本框中显示日期。

我想知道为什么会这样。提前致谢。

【问题讨论】：

标签： javascript jquery datepicker

【解决方案1】：

我和你一样，无法使用日期选择器上的方法在输入中填充默认日期。

因此，我使用 vanilla JS 编写代码来计算默认日期并格式化它们以显示在文本框中。

这是我添加的JS：

function showdatepicker() {
    // same as yours
}

function populateDefaultValues() {
    var today = new Date();
    var month = today.getMonth() - 1,
        year = today.getFullYear();
    if (month < 0) {
        month = 11;
        year -= 1;
    }
    var oneMonthAgo = new Date(year, month, today.getDate());

    $('#startDate').val($.datepicker.formatDate('yy-mm-dd', today));
    $('#endDate').val($.datepicker.formatDate('yy-mm-dd', oneMonthAgo));
}

$(function() {
    populateDefaultValues();
    showdatepicker();
});

jsFiddle

【讨论】：

它有效，谢谢。所以基本上我必须为两个不同的目的制作两个不同的功能？
好吧，您可以重构它以保留 DRY 的内容。您可能会发现包含一个更好的库来管理日期（如MomentJS）很有用，它可以更轻松地构建日期，同时考虑到闰年、一个月中的天数等所有因素。我的方法不太适用那个，我现在意识到了。
如果您只是在页面加载时运行该代码一次，请将其放在 $(function(){ 块内。
@Wireblue 好点，这将防止不必要地污染全局命名空间。
@GregL 感谢您提到 MomentJS。看起来超级好用！

【解决方案2】：

查看defaultDate 选项。它提供了您需要的功能。

因为每个日期选择器的默认日期选项会有所不同，所以您需要分别初始化它们（基本上是复制粘贴，然后进行调整以适应）。

http://api.jqueryui.com/datepicker/#option-defaultDate

【讨论】：

但我认为这个是为了在日历上设置日期而不是文本框本身？
对不起，那是正确的。在这种情况下，@GregL 的答案是最好的。