使用jquery在datepicker中设置初始值?

时间:2012-03-29 08:45:01

标签: javascript jquery jquery-ui datepicker

我正在尝试在我的jquery ui datepicker中设置初始值。我尝试了几种不同的方式,但似乎没有任何东西显示日期,它是空的。

var idag = new Date();
$("#txtFrom").datepicker("setDate", idag - 2);
$("#txtTom").datepicker("setDate", idag);
$("#txtFrom").datepicker("refresh");
$("#txtTom").datepicker("refresh");

7 个答案:

答案 0 :(得分:79)

这个简单的example对我有用......

<强> HTML

<input type="text" id="datepicker">

<强>的JavaScript

var $datepicker = $('#datepicker');
$datepicker.datepicker();
$datepicker.datepicker('setDate', new Date());

我能够通过简单的@ the manual创建这个并阅读setDate的解释:

  

.datepicker(“setDate”,date)
  设置datepicker的当前日期。新日期可能是日期   对象或当前日期格式的字符串(例如'01 / 26/2009'),a   从今天起的天数(例如+7)或一串值和期间   ('y'多年,'m'持续数月,'w'持续数周,'d'持续数天,例如'+ 1m   + 7d'),或null以清除所选日期。

答案 1 :(得分:13)

您可以在HTML中设置值,然后使用init datepicker来开始/突出显示实际日期

<input name="datefrom" type="text" class="datepicker" value="20-1-2011">
<input name="dateto" type="text" class="datepicker" value="01-01-2012">
<input name="dateto2" type="text" class="datepicker" >


$(".datepicker").each(function() {    
    $(this).datepicker('setDate', $(this).val());
});

以上甚至适用于丹麦日期格式

http://jsfiddle.net/DDsBP/2/

答案 2 :(得分:4)

来自jQuery

  

如果该字段为空,请在第一次打开时设置要突出显示的日期。通过Date对象指定实际日期,或者指定当前dateFormat中的字符串,或者从今天开始的天数(例如+7)或一串值和句点('y'表示年份,'m'表示月份, 'w'持续数周,'d'持续数天,例如'+ 1m + 7d'),或今天为null。

代码示例

使用指定的defaultDate选项初始化一个datepicker。

$(".selector").datepicker({ defaultDate: +7 });

在init之后获取或设置defaultDate选项。

//getter
var defaultDate = $(".selector").datepicker("option", "defaultDate");
//setter
$(".selector").datepicker("option", "defaultDate", +7);

在初始化datepicker之后,您还应该能够使用以下内容设置日期:

$(/*selector*/).datepicker("setDate" , date)

答案 3 :(得分:2)

使用setDate

.datepicker( "setDate" , date )
  

设置datepicker的当前日期。新日期可以是Date对象或当前日期格式的字符串(例如'01 / 26/2009'),从今天开始的天数(例如+7)或一串值和句点('y'代表年,'m'持续数月,'w'持续数周,'d'持续数天,例如'+ 1m + 7d'),或null以清除所选日期。

答案 4 :(得分:2)

使用此代码可以帮助您。

<script>
InitializeDate();
</script>




<input type="text" id="txtFromDate" class="datepicker calendar-icon" placeholder="From Date" style="width: 100px; margin-right: 10px; padding: 0px 0px 0px 7px;">
        <input type="text" id="txtToDate" class="datepicker calendar-icon" placeholder="To Date" style="width: 100px; margin-right: 10px; padding: 0px 0px 0px 7px;">


function InitializeDate() {
    var date = new Date();
    var dd = date.getDate();             
    var mm = date.getMonth() + 1;
    var yyyy = date.getFullYear();

    var ToDate = mm + '/' + dd + '/' + yyyy;
    var FromDate = mm + '/01/' + yyyy;
    $('#txtToDate').datepicker('setDate', ToDate);
    $('#txtFromDate').datepicker('setDate', FromDate);
}

答案 5 :(得分:1)

我不完全确定我是否理解了您的问题,但似乎您正在尝试为输入类型Date设置值。

如果您要为输入类型'日期'设置值,则必须将其格式化为“ yyyy-MM-dd “(注:资本MM为月,小写mm为分钟)。否则,它将清除该值并将datepicker留空。

假设您有一个名为“ DateChanger ”的按钮,并且您希望在点击它时将日期选择器设置为“ 2012年12月22日”。

<script>
    $(document).ready(function () {
        $('#DateChanger').click(function() {
             $('#dtFrom').val("2012-12-22");
        });
    });
</script>
<input type="date" id="dtFrom" name="dtFrom" />
<button id="DateChanger">Click</button>

请记住包含JQuery参考。

答案 6 :(得分:-2)

在初始化代码后使用它来获取当前日期(采用datepicker格式):

$(".ui-datepicker-today").trigger("click");