jQuery 日期选择器动态设置所选日期

问题描述 投票:0回答:15

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

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

还有另一个(扩展?)插件here,但我想使用 jquery.ui.all.js 附带的插件。

jquery-ui datepicker
15个回答
208
投票

您使用的 jQuery-UI 版本是什么?我已经使用 1.6r6、1.7 和 1.7.1 测试了以下内容,它有效:

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

28
投票

如果设置了 minDate 或 maxDate 选项,请检查您尝试设置的日期是否在允许的日期范围内。


12
投票

此示例展示了如何使用下拉日历中的默认值和文本框中的值。它还演示了如何将默认值设置为之前的日期。

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 的 DatePicker (http://keith-wood.name/datepickRef.html) 具有以下功能 - 请注意,默认日期的设置是最后一个:

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

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

最后,这就是我过去几个小时所寻找的!我需要启动更改,而不仅仅是在文本字段中设置日期!


7
投票

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

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

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

5
投票

这是一个旧线程,但我只想提供一些我如何使用的信息。如果您想设置今天的日期,您可以简单地应用它,如下所示。

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

如果您想设置当前日期之前/之后的几天,请使用符号

-/+
表示您想要的天数,如下所示。

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

4
投票

请找到下面的一个,它对我设置数据功能有很大帮助

$('#datepicker').datepicker({dateFormat: 'yy-mm-dd'}).datepicker('setDate', '2010-07-25');


3
投票

这对我有用:

$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));

2
投票

setDate似乎只是jquery UI中使用的内联日期选择器的问题,具体错误是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...

0
投票

如果将您的输入类型从其他类型更改为 datetime "type="datetime" 那么它将起作用。

$('#dateSelect').datepicker("setDate", new Date(2023,6,10));


-1
投票

我在使用 setDate 方法时也遇到了很多麻烦。似乎只在 v1 中有效。然而,似乎有效的是使用 dpSetSelected 方法:

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

祝你好运!


-1
投票

或者你可以简单地拥有

$('.date-pick').datePicker().val(new Date()).trigger('change')
© www.soinside.com 2019 - 2024. All rights reserved.