如何显示从Zebra Datepicker中选择的两个日期中选择的天数? [英] How do I display the number of days selected from two dates selected from Zebra Datepicker?
本文介绍了如何显示从Zebra Datepicker中选择的两个日期中选择的天数?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是JavaScript.我能够运行Zebra Datepicker，但无法显示天数.
<script type="text/javascript">
$(function() {
$('#mystartdate').Zebra_DatePicker({
direction: 3, // represents the earliest start day from now
select_other_months: 1,
pair: $('#myenddate'),
format: 'm/d/Y'
});
$('#myenddate').Zebra_DatePicker({
direction: [1, 30], // represents 30 days from the selected date
select_other_months: 1,
format: 'm/d/Y'
});
});
</script>
<script type="text/javascript">
function showDays() {
var start = $('#mystartdate').data('Zebra_DatePicker');
var end = $('#myenddate').data('Zebra_DatePicker');
if (!start || !end) return;
var days = (end - start) / 1000 / 60 / 60 / 24;
$('#num_nights').val(days);
};
</script>
以下是HTML:
<input type="text" name="xstartdate" class="form-control input-sm" id="mystartdate" placeholder="Required">
<input type="text" name="xenddate" class="form-control input-sm" id="myenddate" placeholder="Required">
<input type="text" id="num_nights" readonly>
推荐答案
缺少几件事:
- 用户选择日期后，呼叫
showDays().可以使用onClose(关闭日期选择器时调用)来完成. - 使用
val()获取日期. - 解析日期，然后进行计算.
- Call
showDays()after the user picks a date. That can be done usingonClose(called when the datepicker is closed). - Use
val()to get the dates. - Parse the date, and then do the calculation.
$(document).ready(function() {
$(function() {
$('#mystartdate').Zebra_DatePicker({
direction: 3, // represents the earliest start day from now
select_other_months: 1,
pair: $('#myenddate'),
format: 'm/d/Y',
onClose: function(el) {
showDays(el);
}
});
$('#myenddate').Zebra_DatePicker({
direction: [1, 30], // represents 30 days from the selected date
select_other_months: 1,
format: 'm/d/Y',
onClose: function(el) {
showDays(el);
}
});
});
function showDays() {
// get date
var start = $('#mystartdate').val();
var end = $('#myenddate').val();
if (!start || !end) return;
// parse date
var startArr = start.split("/");
var endArr = end.split("/");
var startDate = new Date(startArr[2], startArr[0] - 1, startArr[1]);
var endDate = new Date(endArr[2], endArr[0] - 1, endArr[1]);
// calculate days
var days = Math.round((endDate-startDate)/(1000*60*60*24));
$('#num_nights').val(days);
};
});
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Datepicker/dist/zebra_datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Datepicker/dist/css/default/zebra_datepicker.min.css">
</head>
<body>
<input type="text" name="xstartdate" class="form-control input-sm" id="mystartdate" placeholder="Required">
<input type="text" name="xenddate" class="form-control input-sm" id="myenddate" placeholder="Required">
<input type="text" id="num_nights" readonly>
</body>
</html>
这篇关于如何显示从Zebra Datepicker中选择的两个日期中选择的天数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
