Как динамически установить значение даты загрузки bootprap-datepicker?

Я использую bootstrap datepicker вместе с строкой highchart.

Я хочу, чтобы дата 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();
    });

Кто-нибудь знает, возможно ли даже обновить этот календарь?

Спасибо

Ответы

Ответ 1

Это работает для меня

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

Ответ 2

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');
  • установить дату календаря на дату данных свойства
  • обновление (обязательно)
  • установите входное значение (помните, что вход является дочерним элементом datepicker).

таким образом вы устанавливаете дату на '2012-08-08'

Ответ 3

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

Ответ 4

Попробуйте этот код,

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

это обновит дату и применит формат dd/mm/yyyy.

Ответ 5

Это работает для меня,

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

Ответ 6

Лучше использовать:

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

вместо

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

Если вы используете обновление, событие changeDate не запускается.

Ответ 7

Мне пришлось делать "setValue" и "update", чтобы заставить его работать полностью

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

Ответ 8

Это действительно работает.

Простой,

Легко понять,

Один метод установки и обновления плагина, который работал у меня.

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

Другие способы обновления

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

Не забудьте вызвать update вручную.

Ответ 9

При использовании методов других ответов настроенные параметры теряются, для исправления можно использовать глобальную конфигурацию:

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

Ответ 10

Для datetimepickers используйте эту работу для меня

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

Ответ 11

Для 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"));

Также проверьте средство выбора даты обновить метод

Ответ 12

Используйте код:

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

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

Объяснение:

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

Обновить поле ввода.

Позвоните в DatePicker с опцией обновления.

Ответ 13

Это работает для меня:

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

Ответ 15

@Imran отвечает за текстовые поля

для применения datepicker к div используйте это:

$('#div_id').attr("data-date", '1 January 2017');
$('#div_id').datepicker("update");

запятая-delim несколько дат:

$('#div_id').attr("data-date", '1 January 2017,2 January 2017,3 January 2017');

Ответ 16

Вы можете использовать этот простой метод, например:

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

Ответ 17

Если вы используете Bootstrap DatePicker версии 4+

Примечание. Все функции доступны через атрибут data, например. $( '# DateTimePicker'). Данные ( "DateTimePicker" ). ФУНКЦИЯ()

Чтобы установить значение даты, ваши коды должны быть как

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

Ответ 18

Простой способ, как это (одна строка)

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

Ответ 19

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

Ответ 20

Если вы ссылаетесь на https://github.com/smalot/bootstrap-datetimepicker Вам необходимо установить значение даты с помощью: $ ('# datetimepicker1'). data ('datetimepicker'). setDate (new Date (value));

Ответ 21

Обратите внимание, что если вы запускаете средство выбора даты в произвольном формате, вы можете передать простую строковую дату в качестве второго аргумента. Это экономит несколько строк.

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

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