如何动态设置bootstrap-datepicker的日期值？-Java 学习之路

我正在使用bootstrap datepicker以及行高图 .

我希望在缩放图表时更新datepicker日期 . 一旦该事件触发，我就会更新datepicker的值 . 值更新正常，但单击日历时，弹出日历上的日期仍为旧日期 .

这是我的日期选择器：

<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();
    });

有谁知道是否甚至可以像这样更新日历？

谢谢

19 回答

这适合我

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

回复于 2024-04-18T16:24:54+08:00

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');

在属性data-date上设置日历日期
更新（必填）
设置输入值（记住输入是datepicker的子项） .

这样你就把日期设置为'2012-08-08'

回复于 2024-04-18T16:24:54+08:00

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

回复于 2024-04-18T16:24:54+08:00

试试这段代码，

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

这将更新日期并应用格式 dd/mm/yyyy .

回复于 2024-04-18T16:24:54+08:00

这对我有用，

$('#datepicker').datepicker("setValue", '01/10/2014' );
$('#datepicker').datepicker("setValue", new Date(2008,9,03));

回复于 2024-04-18T16:24:54+08:00

9
更好用：
```
$("#datepicker").datepicker("setDate", new Date);
```
代替
```
$("#datepicker").datepicker("update", new Date);
```
如果使用update，则不会触发事件changeDate .
回复于 2024-04-18T16:24:54+08:00
0
我必须做'setValue'和'update'才能让它完全运行
```
$('#datepicker').datepicker('setValue', '2014-01-29').datepicker('update');
```
回复于 2024-04-18T16:24:54+08:00
25
这确实有效 .

简单，

容易明白，

设置和更新插件的单一方法对我有用 .
```
$(".datepicker").datepicker("update", new Date());
```
其他更新方式
```
$('.datepicker').data({date: '2015-01-01'});
$('.datepicker').datepicker('update');
```
别忘了手动调用 update .
回复于 2024-04-18T16:24:54+08:00

对于datetimepickers，我可以使用这个工作

$('#lastdate1').data({date: '2016-07-05'});
$('#lastdate1').datetimepicker('update');
$('#lastdate1').datetimepicker().children('input').val('2016-07-05');

回复于 2024-04-18T16:24:54+08:00

31
对于 Bootstrap 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 update方法
回复于 2024-04-18T16:24:54+08:00
0
这对我有用：
```
$('#dpStartDate').data("date", startDate);
```
回复于 2024-04-18T16:24:54+08:00

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

$('.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"));

回复于 2024-04-18T16:24:54+08:00

你也可以这样做：

$("#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

回复于 2024-04-18T16:24:54+08:00

您可以使用以下简单方法：

qsFromDate = '2017-05-10';
$("#dtMinDate").datepicker("setDate", new Date(qsFromDate));
$('#dtMinDate').datepicker('update');

回复于 2024-04-18T16:24:54+08:00

3
如果您正在使用Bootstrap DatePicker version 4+

注意通过数据属性访问所有功能，例如$（ '＃的DateTimePicker'） . 数据（ “的DateTimePicker”） . FUNCTION（）

要设置日期值，您的代码应该是
```
$("#datetimepicker").data("DateTimePicker").date(new Date());
```
回复于 2024-04-18T16:24:54+08:00

@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');

回复于 2024-04-18T16:24:54+08:00

7
像这样的简单方法（一行）
```
$('#startDateText').val(startDate).datepicker("update");
```
回复于 2024-04-18T16:24:54+08:00

$('#datetimepicker1').data("DateTimePicker").date('01/11/2016 10:23 AM')

回复于 2024-04-18T16:24:54+08:00

1

如果您参考https://github.com/smalot/bootstrap-datetimepicker您需要通过以下方式设置日期值：$（'#datetimepicker1'）.data（'datetimepicker'） . setDate（new Date（value））;

回复于 2024-04-18T16:24:54+08:00

如何动态设置bootstrap-datepicker的日期值？

19 回答

相关问题