Як динамічно встановити значення дати bootstrap-datepicker?

Я використовую bootstrap 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();
    });

Хтось знає, чи можливо взагалі так оновити календар?

Дякую

Це працює для мене

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

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).

таким чином ви встановлюєте дату "08.08.08"

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

Спробуйте цей код,

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

це оновить дату та застосує також формат dd/mm/yyyy.

Краще використовувати:

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

замість

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

Якщо ви використовуєте оновлення, подія changeDate не запускається.

Це працює для мене,

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

Мені довелося зробити 'setValue' та 'update', щоб змусити його повністю працювати

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

Це справді працює.

Простий,

Легко зрозуміти,

Єдиний метод встановлення та оновлення плагіна, який працював у мене.

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

Інші способи оновлення

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

Не забудьте зателефонувати updateвручну.

Для 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

При використанні методів інших відповідей налаштовані параметри втрачаються, щоб виправити це, ви можете використовувати глобальну конфігурацію:

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

Код використання:

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

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

Пояснення:

Datepicker (поле введення) Селектор #datepicker.

Оновити поле введення.

Зателефонуйте датчику дати з оновленням опцій

Для датчиків часу використовую цю роботу для мене

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

Зверніть увагу, що якщо ви ініціюєте засіб вибору дати з користувацьким форматом, ви можете передати просту дату рядка як другий аргумент. Це економить кілька рядків.

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

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

$('#DateDepenseInput').val("2020-12-28")
формат повинен бути як рік-місяць-день
Це добре працювало для мене ...

Такий простий спосіб (один рядок)

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

Це працює для мене:

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

Ви також можете зробити це таким чином:

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

Ви можете використовувати цей простий метод, наприклад:

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

Якщо ви використовуєте Bootstrap DatePicker версії 4+

Примітка. Усі функції доступні через атрибут data, наприклад $ ('# datetimepicker'). Data ("DateTimePicker"). FUNCTION ()

Щоб встановити значення дати, ваші коди мають бути такими

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

Відповідь @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');

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

Якщо ви звертаєтесь до https://github.com/smalot/bootstrap-datetimepicker Вам потрібно встановити значення дати за допомогою: $ ('# datetimepicker1'). Data ('datetimepicker'). SetDate (new Date (value));

Спробуйте

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

Це працює для мене, коли setDateне оновлюється значення текстового поля вибору дати у браузері. "Додатковий .datepicker('fill');" повторно заповнює завантажувальну стрічку datepickerна нову дату, яка встановлюється setDateметодом.

Під час завантаження сторінки, якщо ви не хочете запускати подію changeDate, яку я не робив

$('#calendarDatePicker').data("date", new Date());
$('#calendarDatePicker').datapicker();