[英]Datetimepicker validation doesn't work
我有一個帶有2 datetimepciker的表格:一個用於開始日期,另一個用於結束日期。
驗證是,選擇開始日期后,結束日期必須大於或等於開始日期。
我在互聯網上搜索,但是我的代碼無法正常工作。
這是我的js函數:
function formatFields() {
$('#report_startDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
$('#report_endDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
$("#report_endDate").datepicker().on("dp.change", function (e) {
$('#report_startDate').data("DateTimePicker").minDate(e.date);
});
}
這是我的2日期時間選擇器的html:
<table style="width: 100%">
<tr>
<td>
<div class="form-group">
<label class="control-label col-sm-3" id="lb_report_startDate"></label>
<div class="col-sm-8 date">
<div class="input-group input-append date" id="report_startDate">
<input runat="server" type="text" class="form-control" name="report_startDate_datePicker" id="report_startDate_datePicker" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span id="report_startDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
</div>
</div>
</td>
<td>
<div class="form-group">
<label class="control-label col-sm-3" id="lb_report_endDate"></label>
<div class="col-sm-8 date">
<div class="input-group input-append date" id="report_endDate">
<input runat="server" type="text" class="form-control" name="report_endDate_datePicker" id="report_endDate_datePicker" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span id="report_endDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
</div>
</div>
</td>
</tr>
</table>
這里的任何人都可以解釋我的代碼有什么問題以及如何解決該問題? 非常感謝。
function formatFields() { $('#report_startDate').datepicker({ format: 'mm/dd/yyyy', todayHighlight: true, autoclose: true, startDate: "01/01/1900", endDate: "01/01/2100" }); $('#report_endDate').datepicker({ format: 'mm/dd/yyyy', todayHighlight: true, autoclose: true, startDate: "01/01/1900", endDate: "01/01/2100" }); $("#report_endDate").datepicker().on("dp.change", function (e) { $('#report_startDate').data("DateTimePicker").minDate(e.date); }); }
<table style="width: 100%"> <tr> <td> <div class="form-group"> <label class="control-label col-sm-3" id="lb_report_startDate"></label> <div class="col-sm-8 date"> <div class="input-group input-append date" id="report_startDate"> <input runat="server" type="text" class="form-control" name="report_startDate_datePicker" id="report_startDate_datePicker" /> <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> </div> <span id="report_startDate_error" class="error-message">Wrong format MM/dd/yyyy.</span> </div> </div> </td> <td> <div class="form-group"> <label class="control-label col-sm-3" id="lb_report_endDate"></label> <div class="col-sm-8 date"> <div class="input-group input-append date" id="report_endDate"> <input runat="server" type="text" class="form-control" name="report_endDate_datePicker" id="report_endDate_datePicker" /> <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> </div> <span id="report_endDate_error" class="error-message">Wrong format MM/dd/yyyy.</span> </div> </div> </td> </tr> </table>
嘗試在您的js中更改以下代碼
$('#report_startDate').data("DateTimePicker").minDate(e.date);
至
$('#report_startDate').datepicker("option", "minDate", e.date);
我終於找到了答案。
我的函數在更改時調用了datetimepicker錯誤事件。
我的功能更改為:
function formatFields() {
$('#report_startDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
}).on("changeDate", function (e) {
$('#report_endDate').datepicker('setStartDate', e.date);
});
;
$('#report_endDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
}
而且有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.