jQuery 如何动态设置 bootstrap-datepicker 的日期值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11507508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically set bootstrap-datepicker's date value?
提问by corinacallan
I am using bootstrap datepicker along with a line highchart.
我正在使用 bootstrap datepicker 和 line highchart。
I want the datepicker date to update when the chart is zoomed. Once that event triggers I update the values of the datepicker. The values update fine but when the calendar is clicked, the date on the popup calendar is still the old date.
我希望日期选择器日期在图表缩放时更新。一旦该事件触发，我就会更新日期选择器的值。值更新得很好，但当点击日历时，弹出日历上的日期仍然是旧日期。
Here is my 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>
I have tried just updating the values using this code:
我曾尝试使用此代码更新值：
$('#dpStartDate').attr('data-date', startDate);
$('#startDateText').attr('value', startDate);
which updates the dates fine but doesn't set the calendar.
它可以很好地更新日期，但没有设置日历。
I've also tried triggering the onChange event, which also updates the dates but not the calendar:
我也尝试触发 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();
});
Does anyone know if it's even possible to update the calendar like that?
有谁知道是否有可能像这样更新日历？
Thanks
谢谢
回答by Imran Rashid
This works for me
这对我有用
$(".datepicker").datepicker("update", new Date());
回答by MG_
var startDate = new Date();
$('#dpStartDate').data({date: startDate}).datepicker('update').children("input").val(startDate);
another way
其它的办法
$('#dpStartDate').data({date: '2012-08-08'});
$('#dpStartDate').datepicker('update');
$('#dpStartDate').datepicker().children('input').val('2012-08-08');
- set the calendar date on property data-date
- update (required)
- set the input value (remember the input is child of datepicker).
- 在属性数据日期设置日历日期
- 需要更新）
- 设置输入值（记住输入是 datepicker 的孩子）。
this way you are setting the date to '2012-08-08'
这样您就可以将日期设置为“2012-08-08”
回答by Nikhil
$("#datepicker").datepicker("setDate", new Date);
回答by user6433435
Try this code,
试试这个代码，
$(".endDate").datepicker({
format: 'dd/mm/yyyy',
autoclose: true
}).datepicker("update", "10/10/2016");
this will update date and apply format dd/mm/yyyyas well.
这将更新日期并应用格式dd/mm/yyyy。
回答by jayapal d
This works for me,
这对我有用，
$('#datepicker').datepicker("setValue", '01/10/2014' );
$('#datepicker').datepicker("setValue", new Date(2008,9,03));
回答by Camille Muller
Better to use :
更好地使用：
$("#datepicker").datepicker("setDate", new Date);
instead of
代替
$("#datepicker").datepicker("update", new Date);
If you use update, event changeDate isn't triggered.
如果您使用更新，则不会触发事件 changeDate。
回答by SomethingOn
I had to do 'setValue' and 'update' in order to get it to work completely
我必须做“setValue”和“update”才能让它完全工作
$('#datepicker').datepicker('setValue', '2014-01-29').datepicker('update');
回答by A.J.
That really works.
这确实有效。
Simple,
简单的，
Easy to understand,
容易理解，
Single method to set and update plugin which worked for me.
设置和更新对我有用的插件的单一方法。
$(".datepicker").datepicker("update", new Date());
Other ways to update
其他更新方式
$('.datepicker').data({date: '2015-01-01'});
$('.datepicker').datepicker('update');
Dont forget to call updatemanually.
不要忘记update手动调用。
回答by track3r
When using the methods of other answers, the configured options are lost, to correct it, you can use a global configuration:
当使用其他答案的方法时，配置的选项丢失，要纠正它，您可以使用全局配置：
$('.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;
Now you can use the update method without losing the options:
现在您可以使用 update 方法而不会丢失选项：
$(".datepicker").datepicker("update", new Date("30/11/2018"));
回答by Saurabh Srivastava
Use Code:
使用代码：
var startDate = "2019-03-12"; //Date Format YYYY-MM-DD
$('#datepicker').val(startDate).datepicker("update");
Explanation:
解释：
Datepicker(input field) Selector #datepicker.
日期选择器（输入字段）选择器#datepicker。
Update input field.
更新输入字段。
Call datepicker with option update.
使用选项更新调用日期选择器。
