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

cor*_*osh 66 jquery datepicker twitter-bootstrap

我正在使用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>
Run Code Online (Sandbox Code Playgroud)

我尝试使用此代码更新值:

$('#dpStartDate').attr('data-date', startDate);
$('#startDateText').attr('value', startDate);
Run Code Online (Sandbox Code Playgroud)

它会更新日期,但不会设置日历.

我也试过触发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();
    });
Run Code Online (Sandbox Code Playgroud)

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

谢谢

Imr*_*hid 66

这适合我

$(".datepicker").datepicker("update", new Date());
Run Code Online (Sandbox Code Playgroud)

  • 这有效,但如果你在`html`上声明它,它就会破坏格式.比如,如果格式为"dd.mm.yyyy",则更新时会产生格式为"mm/dd/yyyy"的`datetime`.有解决方法吗? (5认同)

小智 35

var startDate = new Date();

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

其他方式

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

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

  • ...并且该代码不起作用,此代码有效$('#dpStartDate').datepicker('update','2012-08-08'); (4认同)
  • 你能为你的代码片段添加一些解释吗?:) (3认同)
  • 为什么datepicker不会监听文本输入中的更改并自行执行此操作? (3认同)

小智 26

$("#datepicker").datepicker("setDate", new Date);
Run Code Online (Sandbox Code Playgroud)


小智 10

试试这段代码,

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

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


jay*_*l d 9

这对我有用,

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


小智 8

更好用:

$("#datepicker").datepicker("setDate", new Date); 
Run Code Online (Sandbox Code Playgroud)

代替

$("#datepicker").datepicker("update", new Date);
Run Code Online (Sandbox Code Playgroud)

如果使用update,则不会触发事件changeDate.