如何在 J-Query UI DatePicker 中设置默认日期

Question

我正在尝试在页面加载时在我的 2 个文本框控件中设置默认日期。我希望始终将第一个文本框（StartDate）设置为上个月的第一个文本框（例如 2013 年 1 月 1 日）。我还想将第二个文本框（EndDate）设置为上个月的月底，如 2013 年 1 月 31 日。一旦页面第一次加载，我想在文本框中加载这些默认值。提前感谢您的帮助。
这是我当前的代码：

     <link href="Styles/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />
        <script src="Scripts/jquery-1.8.1.min.js" type="text/javascript"></script>
        <script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
       <script src="FusionCharts/jquery.min.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                $('.datepicker').datepicker();

            });
    </script>

<div>
<asp:TextBox ID="StartDate" runat="server" CssClass="datepicker" Width="110px"></asp:TextBox> 
</div>

<div>
<asp:TextBox ID="EndDate" runat="server" CssClass="datepicker" Width="110px"></asp:TextBox> 
</div>

Answer 1

我可以这样做：

$( ".datepicker" ).datepicker();
var firstDay, lastDay;
firstDay = firstDayNextMonth(new Date(2013, 0, 5)); // january = 0
lastDay = lastDayNextMonth(firstDay);
$("#StartDate").datepicker("setDate",  firstDay);
$( "#EndDate" ).datepicker("setDate", lastDay );

function firstDayNextMonth(date) {
    var d = date;
    if(d === undefined)
        d = new Date();

    d.setDate(1);
    if(d.getMonth() < 11)
        d.setMonth(d.getMonth() + 1);
    else
        d.setMonth(0);
    return d;
}

function lastDayNextMonth(myDate) {
    var endDate = new Date(myDate.getFullYear(), myDate.getMonth(), 1);
    if(endDate.getMonth() < 11)
        endDate.setMonth(endDate.getMonth() + 1);
    else
        endDate.setMonth(0);
    return new Date(endDate.getFullYear(), endDate.getMonth(), 0);
}

Link to the code in jsFiddle

Answer 2

Start <input type="text" id="StartDate"/><br>
End <input type="text" id="EndDate"/>

jQuery:

$(function(){
  $("#StartDate").datepicker();
  $("#EndDate").datepicker();
  var startdate=new Date();
  startdate.setMonth(startdate.getMonth() - 1, 1);
  $("#StartDate").datepicker("setDate",startdate);
  var endDate=new Date(); // current date
  endDate.setDate(1); // going to 1st of the month
  endDate.setHours(-1);
  $("#EndDate").datepicker("setDate",endDate);    
});

jsfiddle

您的代码（已编辑）

<link href="Styles/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="FusionCharts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
       $("#StartDate").datepicker();
       $("#EndDate").datepicker();
       var startdate=new Date();
       startdate.setMonth(startdate.getMonth() - 1, 1);
       $("#StartDate").datepicker("setDate",startdate);
       var endDate=new Date(); // current date
       endDate.setDate(1); // going to 1st of the month
       endDate.setHours(-1);
       $("#EndDate").datepicker("setDate",endDate);
    });
</script>

<div>
<asp:TextBox ID="StartDate" runat="server" CssClass="datepicker" Width="110px">   </asp:TextBox> 
</div>

<div>
<asp:TextBox ID="EndDate" runat="server" CssClass="datepicker" Width="110px">  </asp:TextBox> 
</div>

注意：要运行上述脚本，请确保将ClientIDMode 设置为static

<%@ Page Title="" Language="C#" ClientIDMode="Static" ...

jsfiddle for jquery 1.8.3 and jquery ui 1.8.23