jQuery datepicker即时设置所选日期


121

如何动态地动态更改jquery日期选择器的选定日期?我说过创建了一个内联日期选择器。然后过了一段时间,我想在那里反映一个不同的日期,而不必从头开始重新创建日期选择器。

我尝试了setDate方法,但是没有用,并且doc中没有太多文档。

还有一种(扩展?)插件在这里,但我想用它随jquery.ui.all.js插件。

Answers:


187

您正在使用哪个版本的jQuery-UI?我已经使用1.6r6、1.7和1.7.1测试了以下内容,并且可以正常工作:

//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );

16
如果setDate不起作用,请使用defaultDate而不是setDate。
bingjie2680

8
但是对我来说这两种方式都不起作用。日期已更改。但是所选日期未出现在日历中。它向我显示的只是今天的重点。
普雷吉斯(Prageeth)Godage

28

如果设置了minDate或maxDate选项,请检查您要将其设置为允许的日期范围内的日期。


10

本示例说明如何使用下拉日历中的默认值和文本框中的值。它还显示了如何将默认值设置为上一个日期。

selectedDate是另一个保存日历控件当前选定日期的变量

    var date = new Date();
    date.setDate(date.getDate() - 1);

    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: date,
        onSelect: function () {
            selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
        }
    });

    $("#datepicker").datepicker("setDate", date);

8

请注意,对于Keith Wood(http://keith-wood.name/datepickRef.html)的DatePicker,以下工作有效-请注意,默认日期的设置是最后一个:

    $('#datepicker').datepick({
        minDate: 0,
        maxDate: '+145D',
        multiSelect: 7,
        renderer: $.datepick.themeRollerRenderer,
        ***defaultDate: new Date('1 January 2008')***
    });

7

由于某些原因,在某些情况下我无法使setDate工作。

我发现一种解决方法是简单地更新给定输入的value属性。当然,日期选择器本身不会被更新,但是如果您只想显示日期,它就可以正常工作。

var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input

6
有一个月的折扣,所以您需要(date.getMonth()+ 1)
亚当

1
如果在初始选项中进行设置,则setDate不起作用,之后我用.datepicker('setDate',...)进行了链接
马丁

4
$('.date-pick').datePicker().val(new Date()).trigger('change')

最后,这就是我最近几个小时的样子!我需要进行初始更改,而不仅仅是在文本字段中设置日期!


2
它应该是.datepicker().datePicker()
阿尔斯兰塔巴瑟姆

3

这是一个旧线程,但我只想提供一些使用方法。如果您想设置今天的日期,则可以像下面这样简单地应用它。

 $("#datepickerid").datepicker("setDate", "0");

如果要在当前日期之前/之后设置几天,请使用如下所示的符号来-/+表示需要多少天。

 $("#datepickerid").datepicker("setDate", "-7");
 $("#datepickerid").datepicker("setDate", "+5");

2

setDate似乎只是jquery UI中使用的嵌入式datepicker的问题,具体错误是InternalError:过多的递归。



2

在HTML中,您可以使用以下日期选择器添加输入字段

<input class="form-control date-picker fromDates" id="myDate" type="text">

然后在Java脚本中,初始化日期选择器,并将值设置为这样的日期,

$('.fromDates').datepicker({
                maxDate: '0',
                dateFormat: "dd/mm/yy",
                changeYear: true,
                changeMonth: true,
                yearRange: "-100:+0"
            });

var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );

(在这里fromdate属性显示当前日期的先前日期)


0
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...

不鼓励在堆栈溢出上使用仅代码的答案,因为它们没有解释它如何解决问题。请编辑您的答案以解释代码的作用以及它如何回答问题,以便它对于其他用户以及OP均有用。
FluffyKitten

-1

setDate方法也给我带来很多麻烦。似乎仅适用于v1。但是,似乎有效的方法是使用dpSetSelected方法:

    $("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());

祝好运!


-1

或者你可以简单地拥有

$('.date-pick').datePicker().val(new Date()).trigger('change')

1
应该.datepicker()不会.datePicker()
FlorinFrătică17年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.