bootstrap-datepicker의 날짜 값을 동적으로 설정하는 방법은 무엇입니까?

bootstrap-datepicker의 날짜 값을 동적으로 설정하는 방법은 무엇입니까?

---

라인 하이 차트와 함께 부트 스트랩 datepicker를 사용하고 있습니다.

차트를 확대 할 때 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();
    });

캘린더를 그렇게 업데이트 할 수 있는지 아는 사람이 있습니까?

감사

---

이것은 나를 위해 작동합니다

$(".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의 하위 항목임을 기억하십시오).

이렇게하면 날짜를 '2012-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("setValue", '01/10/2014' );
$('#datepicker').datepicker("setValue", new Date(2008,9,03));

---

사용하는 것이 더 좋습니다 :

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

대신에

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

업데이트를 사용하는 경우 이벤트 changeDate가 트리거되지 않습니다.

---

나는 그것을 완전히 작동시키기 위해 '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수동으로 전화하는 것을 잊지 마십시오 .

---

다른 답변의 방법을 사용할 때 구성된 옵션이 손실되며이를 수정하기 위해 전역 구성을 사용할 수 있습니다.

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

---

datetimepickers의 경우이 작업을 사용하십시오.

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

---

대한 부트 스트랩 4

If you are using input group in Bootstrap, you need to attach the new date to parent of the textbox, otherwise if you click on the calendar icon and click outside the date will be cleared.

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

You need to set date to input-group.date.

$('#my-date-component').datepicker("update", new Date("01/10/2014"));

Also check datepicker update method

---

Use Code:

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

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

Explanation:

Datepicker(input field) Selector #datepicker.

Update input field.

Call datepicker with option update.

---

This works for me:

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

---

You can do also this way:

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

---

You can use this simple method like :

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

---

If you are using Bootstrap DatePicker version 4+

Note All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION()

To set the date value, your codes should be like

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

---

@Imran answer works for textboxes

for applying the datepicker to a div use this:

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

comma-delim multiple dates:

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

---

Simple way like this (one line)

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

---

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

---

If you refer to https://github.com/smalot/bootstrap-datetimepicker You need to set the date value by: $('#datetimepicker1').data('datetimepicker').setDate(new Date(value));

---

Please note that if you initiate a datepicker with a custom format, you can pass the simple string date as the second argument. This saves a few lines.

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

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

참고URL : https://stackoverflow.com/questions/11507508/how-to-dynamically-set-bootstrap-datepickers-date-value