Javascript 日期选择器设置默认日期

我正在尝试在init上为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>";             

var content=”“；
content=“”；
内容+=“来自”；
内容+=”；
内容+=“至”；

还有我的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>

函数showdatepicker（）{
$（'.date picker'）。日期选择器（{
变化月：对，
变化年：是的，
是的，
showButtonPanel：是的，
日期格式：'年-月-日'，
onClose:函数（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日期选择器div.ui日期选择器year:selected”）.val（）；
$（'#startDate'）.datepicker（{defaultDate:-30}）；
$（'#endDate'）.datepicker（{defaultDate:new Date（）}）；
}
});
}       

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

---

我不知道为什么会这样。提前感谢。

请查看

defaultDate

选项。它提供了您所需要的功能

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

---

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

因此，我使用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();
});

函数showdatepicker（）{
//和你的一样
}
函数populateDefaultValues（）{
var today=新日期（）；
var month=today.getMonth（）-1，
年=今天。getFullYear（）；
如果（月<0）{
月=11；
年份-=1；
}
var oneMonthAgo=新日期（年、月、今天。getDate（））；
$（#startDate'）.val（$.datepicker.formatDate（'yy-mm-dd'，today））；
$（'#endDate'）.val（$.datepicker.formatDate（'yy-mm-dd'，oneMonthAgo））；
}
$（函数（）{
填充的默认值（）；
showdatepicker（）；
});

---

但我认为这是用来设置日历上的日期，而不是文本框本身？对不起，这是正确的@格雷格尔的答案在这种情况下是最好的。它很有效，谢谢。所以基本上我必须为两个不同的目的制作两个不同的函数？好吧，你可以重构它以保持不变。您可能会发现，包含一个更好的日期管理库非常有用，例如，它可以更轻松地构造日期，同时考虑闰年、一个月内的天数等所有因素。我现在意识到，我的方法并没有做到这一点。如果您只需在页面加载时运行一次代码，请将其放入

$（function（）中）{

block.@Wireblue很好，这将防止不必要地污染全局命名空间。@GregL感谢您提到MomentJS。看起来非常方便！