84

我正在使用 bootstrap datepicker 和一个 line highchart。

我希望在缩放图表时更新日期选择器日期。一旦该事件触发,我将更新日期选择器的值。值更新正常,但单击日历时,弹出日历上的日期仍然是旧日期。

这是我的日期选择器:

<div class="input-append date pull-right" id="dpStartDate" data-date="@DateTime.Now.AddMonths(-1).ToString("dd/MM/yyyy")" data-date-format="dd/mm/yyyy">
    <input class="span2" id="startDateText" size="16" type="text" value="@DateTime.Now.AddMonths(-1).ToString("dd/MM/yyyy")" readonly="">
    <span class="add-on"><i class="icon-th"></i></span>
</div>

我尝试使用以下代码更新值:

$('#dpStartDate').attr('data-date', startDate);
$('#startDateText').attr('value', startDate);

它可以很好地更新日期,但不设置日历。

我也尝试触发 onChange 事件,它也更新日期但不更新日历:

$('#dpStartDate').trigger('changeDate', startDate);

$('#dpStartDate').datepicker()
    .on('show', function (ev) {
        ev.stopPropagation();
    })
    .on('changeDate', function (ev, date) {
        var startDate = new Date();
        if (date != undefined) {
            startDate = date;
            $('#dpStartDate').attr('data-date', startDate);
            $('#startDateText').attr('value', startDate);
        }
        else {
            startDate = ev.date;
            $('#dpStartDate').attr(startDate.getDate() + '/' + (startDate.getMonth() + 1) + '/' + startDate.getFullYear());
            $('#startDateText').attr(startDate.getDate() + '/' + (startDate.getMonth() + 1) + '/' + startDate.getFullYear());
        }
        $('#dpStartDate').datepicker('hide');
        ev.stopPropagation();
    });

有谁知道是否可以像这样更新日历?

谢谢

4

25 回答 25

75

这对我有用

$(".datepicker").datepicker("update", new Date());
于 2013-11-13T12:32:09.040 回答
43
var startDate = new Date();

$('#dpStartDate').data({date: startDate}).datepicker('update').children("input").val(startDate);

另一种方式

$('#dpStartDate').data({date: '2012-08-08'});
$('#dpStartDate').datepicker('update');
$('#dpStartDate').datepicker().children('input').val('2012-08-08');
  1. 在属性数据日期上设置日历日期
  2. 需要更新)
  3. 设置输入值(记住输入是 datepicker 的子项)。

这样,您将日期设置为“2012-08-08”

于 2012-11-15T14:59:24.200 回答
30
$("#datepicker").datepicker("setDate", new Date);
于 2013-08-09T09:31:33.833 回答
15

试试这个代码,

$(".endDate").datepicker({
    format: 'dd/mm/yyyy',
    autoclose: true
}).datepicker("update", "10/10/2016"); 

这也将更新日期和应用格式dd/mm/yyyy

于 2016-06-07T05:12:31.097 回答
12

更好用:

$("#datepicker").datepicker("setDate", new Date); 

代替

$("#datepicker").datepicker("update", new Date);

如果您使用更新,则不会触发事件 changeDate。

于 2016-08-24T02:29:39.057 回答
11

这对我有用,

$('#datepicker').datepicker("setValue", '01/10/2014' );
$('#datepicker').datepicker("setValue", new Date(2008,9,03));
于 2014-01-22T07:16:48.643 回答
4

我必须做'setValue'和'update'才能让它完全工作

$('#datepicker').datepicker('setValue', '2014-01-29').datepicker('update');
于 2014-01-30T14:46:17.450 回答
4

当使用其他答案的方法时,配置的选项会丢失,要更正它,可以使用全局配置:

$('.datepicker').datepicker();
$.fn.datepicker.defaults.format = 'dd/mm/yyyy';
$.fn.datepicker.defaults.startDate = "0";
$.fn.datepicker.defaults.language = "es";
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.todayHighlight = true;
$.fn.datepicker.defaults.todayBtn = true;
$.fn.datepicker.defaults.weekStart = 1;

现在您可以使用更新方法而不会丢失选项:

$(".datepicker").datepicker("update", new Date("30/11/2018"));
于 2018-06-13T10:28:23.717 回答
3

这真的有效。

简单的,

容易理解,

设置和更新对我有用的插件的单一方法。

$(".datepicker").datepicker("update", new Date());

其他更新方式

$('.datepicker').data({date: '2015-01-01'});
$('.datepicker').datepicker('update');

update不要忘记手动调用。

于 2014-04-04T06:40:43.887 回答
3

使用代码:

var startDate = "2019-03-12"; //Date Format YYYY-MM-DD

$('#datepicker').val(startDate).datepicker("update");

解释:

日期选择器(输入字段)选择器#datepicker。

更新输入字段。

使用选项更新调用 datepicker。

于 2019-03-12T07:19:06.323 回答
3

对于引导程序 4

如果您在 Bootstrap 中使用输入组,则需要将新日期附加到文本框的父级,否则如果单击日历图标并单击外部日期将被清除。

<div class="input-group date" id="my-date-component">
   <input type="text" />
    <div class="input-group-append">
      <span class="input-group-text"><i class="fa fa-calendar"></i></span>
    </div>
</div>

您需要将日期设置为input-group.date.

$('#my-date-component').datepicker("update", new Date("01/10/2014"));

还要检查 datepicker更新方法

于 2018-04-13T10:36:14.110 回答
3

对于 datetimepickers 使用这个为我工作

$('#lastdate1').data({date: '2016-07-05'});
$('#lastdate1').datetimepicker('update');
$('#lastdate1').datetimepicker().children('input').val('2016-07-05');
于 2016-07-05T08:49:50.367 回答
2

请注意,如果您使用自定义格式启动日期选择器,则可以将简单字符串日期作为第二个参数传递。这样可以节省几行。

$('.selector').datepicker({
    format:'dd/mm/yyyy',
});

$('.selector').datepicker('update', '13/09/2019');
于 2019-09-09T15:38:04.077 回答
2

$('#DateDepenseInput').val("2020-12-28")
格式应该像年月日
对我来说效果很好......

于 2020-10-05T13:27:01.470 回答
1

这对我有用:

$('#dpStartDate').data("date", startDate);
于 2018-05-25T05:48:26.603 回答
1

像这样的简单方法(一行)

$('#startDateText').val(startDate).datepicker("update");
于 2018-03-17T04:54:30.057 回答
1

如果您使用的是Bootstrap DatePicker 版本 4+

注意 所有函数都通过数据属性访问,例如 $('#datetimepicker').data("DateTimePicker").FUNCTION()

要设置日期值,您的代码应该类似于

$("#datetimepicker").data("DateTimePicker").date(new Date());
于 2017-09-12T05:22:53.213 回答
0
$('#datetimepicker1').data("DateTimePicker").date('01/11/2016 10:23 AM')
于 2018-05-24T08:26:42.790 回答
0

你也可以这样做:

  $("#startDateText").datepicker({
                toValue: function (date, format, language) {
                    var d = new Date(date);
                    d.setDate(d.getDate());
                    return new Date(d);
                },
                autoclose: true
            });

http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#format

于 2015-11-24T11:51:23.323 回答
0

尝试

$("#datepicker").datepicker('setDate','25-05-2020').datepicker('fill');

setDate当不更新浏览器上的日期选择器文本字段值时,这对我有用。“附加”为由方法设置的新日期.datepicker('fill');重新填充引导程序。datepickersetDate

于 2020-05-15T07:00:10.553 回答
0

这对我来说非常有效。简单的说下一个。

$('.className').datepicker('setDate', 'now');
于 2021-01-20T16:07:47.710 回答
0

You can use this simple method like :

qsFromDate = '2017-05-10';
$("#dtMinDate").datepicker("setDate", new Date(qsFromDate));
$('#dtMinDate').datepicker('update');
于 2017-05-11T06:36:53.850 回答
0

@Imran 答案适用于文本框

将 datepicker 应用于 div 使用:

$('#div_id').attr("data-date", '1 January 2017');
$('#div_id').datepicker("update");

逗号分隔多个日期:

$('#div_id').attr("data-date", '1 January 2017,2 January 2017,3 January 2017');
于 2017-02-22T14:55:31.220 回答
0

如果参考https://github.com/smalot/bootstrap-datetimepicker 需要设置日期值: $('#datetimepicker1').data('datetimepicker').setDate(new Date(value));

于 2018-05-28T07:20:23.197 回答
0

如果您不想触发我没有的 changeDate 事件,则在页面加载时

$('#calendarDatePicker').data("date", new Date());
$('#calendarDatePicker').datapicker();
于 2020-05-15T16:24:54.357 回答