부트스트랩 날짜 선택기로 선택한 날짜 변경 탐지

부트스트랩 날짜 선택기로 선택한 날짜 변경 탐지

부트스트랩-데이트 픽커를 사용하여 작성된 첨부된 날짜 픽커가 있는 입력 요소가 있습니다.

<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 이벤트로 값을 얻을 수 있습니다.그러나 사용자가 날짜 선택기에서 날짜를 변경할 때(예를 들어 달력에서 날짜를 눌러), onChange 핸들러가 호출되지 않습니다.

입력 요소에 입력하는 대신 날짜 선택기를 통해 변경된 날짜를 탐지하려면 어떻게 해야 합니까?

다른 모든 답변은 다음과 관련이 있습니다.jQuery UI datepicker, 하지만 문제는.bootstrap-datepicker.

on 이벤트를 사용하여 관련 입력에서 변경 이벤트를 트리거한 다음 날짜를 변경하는 두 가지 방법을 모두 처리할 수 있습니다.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');
});

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

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

그냥 당신이 원하는 것을 언코멘트 해주세요.첫 번째 옵션은 다른 입력 요소의 값을 변경합니다.두 번째는 날짜 선택기 기본 형식으로 날짜를 알려줍니다.세 번째는 사용자 지정 형식으로 날짜를 알립니다.마지막 옵션은 로그(기본 형식 날짜)로 출력됩니다.

e.date, e.date(여러 날짜 입력용) 또는 e.format(...)을 사용할 수 있습니다.

여기 몇 가지 더 많은 정보가 있습니다.

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

아래 코드로 시도해보세요 sample.it 이 저를 위해 작동합니다.

var date_input_field = $('input[name="date"]');
    date_input_field .datepicker({
        dateFormat: '/dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
    }).on('change', function(selected){
        alert("startDate..."+selected.timeStamp);
    });

$(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 Domin 예제를 바탕으로 Paste를 지원하는 2개의 예제를 만들고 Enter 키를 누릅니다.

이것은 크롬에서 작동합니다: 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');
    });
});

하지만 IE에서는 그렇지 않기 때문에 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');
    });
});

IE11에서 마지막 예제가 여전히 작동하지 않는 경우 설정 분할을 시도할 수 있습니다.

// 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  */
}); 

그리고 이벤트 핸들러: (참고로 사용하지 않습니다.$('.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
    });

사용가능onSelect이벤트성

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

날짜 선택기를 선택하면 호출됩니다.함수는 선택한 날짜를 텍스트로 받고 날짜 선택 도구 인스턴스를 매개 변수로 받습니다.관련 입력 필드를 나타냅니다.

여기 보기

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