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

时间：2012-07-16 15:29:44

标签： 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>

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

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

是否有人知道是否可以像这样更新日历？

由于

25 个答案:

答案 0 :(得分：65)

这对我有用

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

答案 1 :(得分：33)

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. 在属性data-date
    2. 上设置日历日期
  2. 更新（必填）
  3. 设置输入值（记住输入是datepicker的子项）。

    4. 这样您就可以将日期设置为“2012-08-08”

答案 2 :(得分：25)

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

答案 3 :(得分：9)

这对我有用，

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

答案 4 :(得分：9)

试试这段代码，

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

这将更新日期并同时应用格式dd/mm/yyyy。

答案 5 :(得分：7)

最好使用：

class invoice(models.Model):
_inherit = "account.invoice"

@api.multi
def send_xml_file(self):
    # haciendolo para efacturadelsur solamente por ahora
    host = 'https://www.efacturadelsur.cl'
    post = '/ws/DTE.asmx' # HTTP/1.1
    url = host + post
    _logger.info('URL to be used %s' % url)
    # client = Client(url)
    # _logger.info(client)
    _logger.info('len (como viene): %s' % len(self.sii_xml_request))

    response = pool.urlopen('POST', url, headers={
        'Content-Type': 'application/soap+xml',
        'charset': 'utf-8',
        'Content-Length': len(
            self.sii_xml_request)}, body=self.sii_xml_request)

    _logger.info(response.status)
    _logger.info(response.data)
    self.sii_xml_response = response.data
    self.sii_result = 'Enviado'

而不是

Odoo Server Error

Traceback (most recent call last):
File "/home/kristian/odoov9/odoo-9.0c-20160712/openerp/http.py", line 646, in _handle_exception
return super(JsonRequest, self)._handle_exception(exception)
File "/home/kristian/odoov9/odoo-9.0c-20160712/openerp/http.py", line 683, in dispatch
result = self._call_function(**self.params)
File "/home/kristian/odoov9/odoo-9.0c-20160712/openerp/http.py", line 319, in _call_function
return checked_call(self.db, *args, **kwargs)
File "/home/kristian/odoov9/odoo-9.0c-20160712/openerp/service/model.py", line 118, in wrapper
return f(dbname, *args, **kwargs)
File "/home/kristian/odoov9/odoo-9.0c-20160712/openerp/http.py", line 312, in checked_call
result = self.endpoint(*a, **kw)
File "/home/kristian/odoov9/odoo-9.0c-20160712/openerp/http.py", line 962, in __call__
return self.method(*args, **kw)
File "/home/kristian/odoov9/odoo-9.0c-20160712/openerp/http.py", line 512, in response_wrap
response = f(*args, **kw)
File "/home/kristian/odoov9/odoo-9.0c-20160712/openerp/addons/web/controllers/main.py", line 901, in call_button
action = self._call_kw(model, method, args, {})
File "/home/kristian/odoov9/odoo-9.0c-20160712/openerp/addons/web/controllers/main.py", line 889, in _call_kw
return getattr(request.registry.get(model), method)(request.cr, request.uid, *args, **kwargs)
File "/home/kristian/odoov9/odoo-9.0c-20160712/openerp/api.py", line 250, in wrapper
return old_api(self, *args, **kwargs)
File "/home/kristian/odoov9/odoo-9.0c-20160712/openerp/api.py", line 381, in old_api
result = method(recs, *args, **kwargs)
File "/home/kristian/odoov9/odoo-9.0c-20160712/openerp/addons/l10n_cl_dte/models/invoice.py", line 102, in send_xml_file
_logger.info('len (como viene): %s' % len(self.sii_xml_request))
TypeError: object of type 'bool' has no len()

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

答案 6 :(得分：3)

真的有用。

简单，

易于理解，

设置和更新适用于我的插件的单一方法。

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

其他更新方式

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

别忘了手动拨打update。

答案 7 :(得分：3)

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

$('#datepicker').datepicker('setValue', '2014-01-29').datepicker('update');

答案 8 :(得分：2)

对于datetimepickers，我可以使用此工作

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

答案 9 :(得分：2)

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

答案 10 :(得分：1)

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

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

$('.selector').datepicker('update', '13/09/2019');

答案 11 :(得分：1)

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方法

答案 12 :(得分：1)

这对我有用：

$('#dpStartDate').data("date", startDate);

答案 13 :(得分：1)

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

Observable.create(function(observer) {
    ref.orderByKey().endAt("pterodactyl").on("child_added", snapshot => 
    {
        observer.next(snapshot.key);
    });
};

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

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

答案 14 :(得分：0)

这对我来说非常有效。简单的写下下面的。

$('.className').datepicker('setDate', 'now');

答案 15 :(得分：0)

在页面加载中，如果您不希望触发我没有执行的changeDate事件

wrap_content

答案 16 :(得分：0)

尝试

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

当setDate未在浏览器上更新日期选择器文本字段值时，这对我有用。 “额外的.datepicker('fill');”将为datepicker方法设置的新日期重新填充引导程序setDate。

答案 17 :(得分：0)

使用代码：

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

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

说明：

Datepicker（输入字段）选择器#datepicker。

更新输入字段。

通过选项更新呼叫日期选择器。

答案 18 :(得分：0)

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

答案 19 :(得分：0)

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

答案 20 :(得分：0)

这样的简单方法（一行）

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

答案 21 :(得分：0)

如果您使用Bootstrap DatePicker version 4+

  

注意所有功能都可通过数据属性访问，例如   $（＆＃39;＃的DateTimePicker＆＃39）的数据。（＆＃34;的DateTimePicker＆＃34）。FUNCTION（）

要设置日期值，您的代码应该是

$("#datetimepicker").data("DateTimePicker").date(new Date());

答案 22 :(得分：0)

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

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

答案 23 :(得分：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');

答案 24 :(得分：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

相关问题
最新问题