DateTimePicker에 defaultDate를 설정하고 이벤트 발생시 dtp의 함수를 사용합니다.

Question

Bootstrap Datetimepicker을 사용하여 페이지에 캘린더를 표시하고 요일과 시간을 선택합니다.

내가 이런 식으로 설정하고 있습니다 :

var $dtp = $("#datetimepicker1"); 
$(function() { 
    $dtp.datetimepicker({ 
     format: 'DD-MM-YYYY HH:00', 
     locale: 'pt', 
     defaultDate: d, 
     minDate: dMin, 
     maxDate: dMax 
    }); 
}); 

을 그리고 트리거 "dp.change" 있습니다

$dtp.on("dp.change", function(e) { 
    d = $dtp.data("DateTimePicker").date().toDate(); 
}); 

dMin, dMax 및 d 날짜 개체입니다

var d = new Date(); //actual Date 
var dMin = new Date(2012, 0, 1, 0); 
var dMax = new Date(); dMax.setDate(dMax.getDate()+2); dMax.setHours(0); //more 2 days 

글쎄,을 설정해야합니다. 왜냐하면 때때로 d이 변경되어 현재 날짜가 아니기 때문에 dMin과 dMax 사이의 다른 날짜가 변경되기 때문입니다.

d이 현재 사용 중인지 여부와 상관없이 datetimepicker의 초기화 설정에서 defaultDate으로 설정하면 문제가 해결되지 않습니다. 오류를 검사

는

, 콘솔, 내가 먼저 "dp.change"가 발생했을 때 $dtp.data("DateTimePicker")이 undefined이라고 결론,하지만 설정을 초기화에 defaultDate 만이있을 때.

이 문제를 해결하는 데 몇 가지 문제가 있습니다.

Answer 1

$dtp.data("DateTimePicker")이 dp.change 청취자 내부 if($dtp.data("DateTimePicker")) 같은 것을 사용하지 undefined 경우 당신은 간단하게 확인할 수 있습니다. docs은 다음과 같이 이벤트 매개 변수를 사용할 수도 있습니다.

날짜가 변경되면 실행됩니다.

매개 변수 : 여기

e = { 
    date, //date the picker changed to. Type: moment object (clone) 
    oldDate //previous date. Type: moment object (clone) or false in the event of a null 
} 

라이브 샘플 : 또한

var d = new Date(); //actual Date 
 
var dMin = new Date(2012, 0, 1, 0); 
 
var dMax = new Date(); 
 
dMax.setDate(dMax.getDate()+2); 
 
dMax.setHours(0); //more 2 days 
 

 
var $dtp = $("#datetimepicker1"); 
 
$(function() { 
 
    $dtp.datetimepicker({ 
 
     format: 'DD-MM-YYYY HH:00', 
 
     locale: 'pt', 
 
     defaultDate: d, 
 
     minDate: dMin, 
 
     maxDate: dMax 
 
    }); 
 
}); 
 

 
$dtp.on("dp.change", function(e) { 
 
    // Solution 1: simply check for undefined 
 
    //if($dtp && $dtp.data("DateTimePicker")) d = $dtp.data("DateTimePicker").date().toDate(); 
 
    if(e.date){ 
 
     d = e.date.toDate(); 
 
    } 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment-with-locales.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class='col-sm-6'> 
 
    <div class="form-group"> 
 
    <div class='input-group date' id="datetimepicker1"> 
 
     <input type='text' class="form-control" /> 
 
     <span class="input-group-addon"> 
 
     <span class="glyphicon glyphicon-calendar"></span> 
 
     </span> 
 
    </div> 
 
    </div> 
 
</div>

, 구성 요소가 momentjs를 사용하기 때문에, 당신은 d, dMin 및,467,122,321 init을 할 수 있습니다 이 같은 0 :

var d = moment(); //actual Date 
var dMin = moment([2012, 0, 1]); 
var dMax = moment().add(2, 'days').startOf('day'); 

는 moment(), moment(Number[]), add() 추가 참조 startOf() 참조하십시오.