bootstrap-datepicker로 선택한 날짜에 대한 변경 감지

bootstrap-datepicker로 선택한 날짜에 대한 변경 감지

---

bootstrap-datepicker를 사용하여 만든 연결된 datepicker가있는 입력 요소가 있습니다.

<div class="well">
    <div class="input-append date" id="dp3" data-date="2012-01-02" data-date-format="yyyy-mm-dd">
        <input type="text" id="date-daily">
        <span class="add-on"><i class="icon-th"></i></span>    
    </div>
</div>

<script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
        $('#dp3').datepicker();
        $('#date-daily').val('0000-00-00');
        $('#date-daily').change(function () {
            console.log($('#date-daily').val());
        });
    });
</script>

사용자가 입력 요소에 직접 입력하여 날짜를 변경하면 위와 같이 입력 요소의 onChange 이벤트로 값을 가져올 수 있습니다. 그러나 사용자가 datepicker에서 날짜를 변경하면 (즉, 달력에서 날짜를 클릭하여) onChange 핸들러가 호출되지 않습니다.

입력 요소에 입력하지 않고 날짜 선택기를 통해 선택한 날짜에 대한 변경 사항을 어떻게 감지 할 수 있습니까?

---

다른 모든 답변은와 관련이 jQuery UI datepicker있지만 질문은에 관한 것 bootstrap-datepicker입니다.

on changeDate이벤트를 사용하여 관련 입력에서 변경 이벤트를 트리거 한 다음 onChange처리기 에서 날짜를 변경하는 두 가지 방법을 모두 처리 할 수 ​​있습니다 .

날짜 변경

날짜가 변경되면 시작됩니다.

예:

$('#dp3').datepicker().on('changeDate', function (ev) {
    $('#date-daily').change();
});
$('#date-daily').val('0000-00-00');
$('#date-daily').change(function () {
    console.log($('#date-daily').val());
});

다음은 작동하는 바이올린입니다. http://jsfiddle.net/IrvinDominin/frjhgpn8/

---

이 시도:

$("#dp3").on("dp.change", function(e) {
    alert('hey');
});

---

$(function() {
  $('input[name="datetimepicker"]').datetimepicker({
    defaultDate: new Date()
  }).on('dp.change',function(event){
    $('#newDateSpan').html("New Date: " + event.date.format('lll'));
    $('#oldDateSpan').html("Old Date: " + event.oldDate.format('lll'));
  });
  
});

<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

<div class="container">
  <div class="col-xs-12">
    <input name="datetimepicker" />
    <p><span id="newDateSpan"></span><br><span id="oldDateSpan"></span></p>
  </div>
</div>

---

이에 대한 내 코드는 다음과 같습니다.

$('#date-daily').datepicker().on('changeDate', function(e) {
    //$('#other-input').val(e.format(0,"dd/mm/yyyy"));
    //alert(e.date);
    //alert(e.format(0,"dd/mm/yyyy"));
    //console.log(e.date); 
});

원하는 것을 주석 해제하십시오. 첫 번째 옵션은 다른 입력 요소의 값을 변경합니다. 두 번째는 datepicker 기본 형식으로 날짜를 알려줍니다. 세 번째는 사용자 지정 형식으로 날짜를 알려줍니다. 마지막 옵션은 로그에 출력됩니다 (기본 형식 날짜).

e.date, e.dates (여러 날짜 입력 용) 또는 e.format (...)을 사용하는 것은 사용자의 선택입니다.

여기에 더 많은 정보

---

$(document).ready(function(){

$("#dateFrom").datepicker({
    todayBtn:  1,
    autoclose: true,
}).on('changeDate', function (selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#dateTo').datepicker('setStartDate', minDate);
});

$("#dateTo").datepicker({
    todayBtn:  1,
    autoclose: true,}) ;

});

---

Irvin Dominin 예제를 기반으로 붙여 넣기를 지원하는 2 개의 예제를 만들고 Enter 키를 누릅니다.

이것은 Chrome에서 작동합니다 : http://jsfiddle.net/lhernand/0a8woLev/

$(document).ready(function() {
   $('#date-daily').datepicker({
      format: 'dd/mm/yyyy',
      assumeNearbyYear: true,
      autoclose: true,
      orientation: 'bottom right',
      todayHighlight: true,
      keyboardNavigation: false
    })
    /* On 'paste' -> loses focus, hide calendar and trigger 'change' */
    .on('paste', function(e) {
      $(this).blur();
      $('#date-daily').datepicker('hide');
    })
    /* On 'enter' keypress -> loses focus and trigger 'change' */
    .on('keydown', function(e) {

      if (e.which === 13) {
         console.log('enter');
         $(this).blur();
      }
    })
    .change(function(e) {
      console.log('change');
      $('#stdout').append($('#date-daily').val() + ' change\n');
    });
});

But not in IE, so I created another example for IE11: https://jsbin.com/timarum/14/edit?html,js,console,output

$(document).ready(function() {
   $('#date-daily').datepicker({
      format: 'dd/mm/yyyy',
      assumeNearbyYear: true,
      autoclose: true,
      orientation: 'bottom right',
      todayHighlight: true,
      keyboardNavigation: false
    })
    // OnEnter -> lose focus
    .on('keydown', function(e) {
         if (e.which === 13){ 
           $(this).blur();
         }
    })
    // onPaste -> hide and lose focus
    .on('keyup', function(e) {
         if (e.which === 86){ 
            $(this).blur();
            $(this).datepicker('hide');
          }
    })
    .change(function(e) {
       $('#stdout').append($('#date-daily').val() + ' change\n');
    });
});

If last example still doesn't work in IE11, you can try splitting the setup:

// DatePicker setup
$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    assumeNearbyYear: true,      /* manually-entered dates with two-digit years, such as '5/1/15', will be parsed as '2015', not '15' */
    autoclose: true,             /* close the datepicker immediately when a date is selected */
    orientation: 'bottom rigth',
    todayHighlight: true,        /* today appears with a blue box */
    keyboardNavigation: false    /* select date only onClick. when true, is too difficult free typing  */
}); 

And the event handlers: (note I'm not using $('.datepicker').datepicker({)

   // Smoker DataPicker behaviour
    $('#inputStoppedDate')
    // OnEnter -> lose focus
    .on('keydown', function (e) {
        if (e.which === 13){ 
            $(this).blur();
        }
    })
    // onPaste -> hide and lose focus
    .on('keyup', function (e) {
        if (e.which === 86){ 
            $(this).blur();
            $(this).datepicker('hide');
        }
    })
    .change(function (e) {
        // do saomething
    });

---

You can use onSelect event

 $("#date-daily").datepicker({
  onSelect: function(dateText) {
   alert($('#dp3').val());
  }
});

It is Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.

SEE HERE

참고URL : https://stackoverflow.com/questions/17009354/detect-change-to-selected-date-with-bootstrap-datepicker