我正在系统中使用引导日期时间选择器功能。
,第一个datetimepicker格式为YYYY-MM-DD
,第二个datetimepicker格式为HH:mm
。
我尝试以下验证:当第一个datetimepicker选择日期时,第二个datetimepicker minDate
将成为HH:mm
格式的选择日期。
但是失败了:
我在今天设置了第一个datetimepicker minDate,并且在尝试使用minDate
库时,第二个datetimepicker验证moment()
失败:
$('#datetimepicker5').datetimepicker({
format: 'L',
showTodayButton: true,
minDate: new Date()-1,
format: 'YYYY-MM-DD'
}).on('dp.change', function(e) {
var fromDate = $("#datetimepicker5").data("date");
var chosenTime = $("#datetimepicker6").data("date");
if(moment(moment(e.date).format( 'YYYY-MM-DD'), 'YYYY-MM-DD',true).isValid()){
if( moment(e.date).isSame(formatDate(new Date)) ){
alert("SAME DATE")
console.log("SAME DATE")
var nowTime = moment().format('HH:mm');
if(nowTime > formatHourAndMinute(new Date (0, 0, 0, chosenTime.split(":")[0],chosenTime.split(":")[1]))){
$('#datetimepicker6').data("DateTimePicker").date(nowTime);
$('#datetimepicker6').data("DateTimePicker").minDate(nowTime);
}
}
}else{
alert(" Sorry the date you selec is not valid.");
$scope.dateTimePickerFailed = false;
}
});
$('#datetimepicker6').datetimepicker({
format: 'HH:mm',
showTodayButton: true,
minDate: $("#datetimepicker5").data("date"),
}).on('dp.change', function(e) {
var beginningTime = moment({h: +e.date.format('HH'), m: +e.date.format('mm')});
var nowTime = moment().format('HH:mm');
var choosenDate = $("#datetimepicker5").data("date");
var chosenTime = $("#datetimepicker6").data("date");
var selectedTime = $("#selectedTime").val();
if(moment(moment(e.date).format( 'HH:mm'),'HH:mm',true).isValid()){
if( moment(choosenDate).isSame(formatDate(new Date)) ){
if(nowTime > formatHourAndMinute(new Date (0, 0, 0, chosenTime.split(":")[0],chosenTime.split(":")[1])) ){
$('#datetimepicker6').data("DateTimePicker").date(nowTime);
$('#datetimepicker6').data("DateTimePicker").minDate(nowTime);
}
}
}else{
alert(" Sorry the date you selec is not valid.");
$scope.timePickerFailed = false;
}
});
function formatHourAndMinute(date) {
var d = new Date(date),
hour = '' + parseInt(d.getHours()+1),
minute = '' + d.getMinutes();
if (hour.length < 2) hour = '0' + hour;
if (minute.length < 2) minute = '0' + minute;
return [hour, minute].join(':');
}
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
这是HTML:
<div class="form-group"
data-ng-class="{true: 'error'}[submitted && userForm.pickDate.$invalid]">
<div class="col-sm-6">
<label class="control-label">Date :</label>
<div class="form-group">
<div class="input-group date" id="datetimepicker5">
<input type="text"
id="selectedDate"
class="form-control"
name="pickDate"
required="required"
required />
<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<span class="help-inline" data-ng-if="submitted && userForm.pickDate.$error.required">Pick date is required.</span>
</div>
<div class="form-group"
data-ng-class="{true: 'error'}[submitted && userForm.pickTime.$invalid]">
<div class="col-sm-6">
<label class="control-label">Time :</label>
<div class="form-group">
<div class="input-group date" id="datetimepicker6">
<input data-format="hh:mm"
type="text"
id="selectedTime"
class="form-control"
name="pickTime"
required="required" required /> <span class="input-group-addon"><span class="glyphicon-time glyphicon"></span></span>
</div>
</div>
</div>
<span class="help-inline" data-ng-if="submitted && userForm.pickTime.$error.required">Pick time is required.</span>
</div>