To select a date range, I use the Jquery UI Datepicker plugin. I use a code that should show the number of days when choosing a period.
To connect the plugin, I use CDN:
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"></link>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
HTML Code:
<form>
<label>From</label>
<input id="from" readonly="readonly" name="from" type="text" value="">
<label>To</label>
<input id="to" readonly="readonly" name="to" type="text" value="">
<label>You choosed</label>
<input id="days" readonly="readonly" name="days" type="text" value=""> days.
</form>
Plugin Initialization:
var from = new Date();
var to = new Date();
var dayDiff = 1;
$(function() {
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
if (this.id == "from") {
from = $(this).datepicker('getDate');
if (!(to == "")) {
update_days()
}
}
if (this.id == "to") {
to = $(this).datepicker('getDate');
update_days()
}
}
});
});
function update_days() {
dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24));
$("#days").empty()
$("#days").append(dayDiff)
}
Unfortunately, this code for some reason does not show the number of days when choosing a period. It is necessary, for example, to show "You have chosen - 5 days."
How to fix the code so that everything works? Need your help! Thanks!
The #days
is an input
element which doesn't have any HTML content appending doesn't make any change in the value. To make it work use val()
method.
function update_days() {
dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24));
$("#days").val(dayDiff)
}
var from = new Date(); var to = new Date(); var dayDiff = 1; $(function() { var dates = $("#from, #to").datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 1, onSelect: function(selectedDate) { var option = this.id == "from" ? "minDate" : "maxDate", instance = $(this).data("datepicker"), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); dates.not(this).datepicker("option", option, date); if (this.id == "from") { from = $(this).datepicker('getDate'); if (!(to == "")) { update_days() } } if (this.id == "to") { to = $(this).datepicker('getDate'); update_days() } } }); }); function update_days() { dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24)); $("#days").val(dayDiff) }
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"></link> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <form> <label>From</label> <input id="from" readonly="readonly" name="from" type="text" value=""> <label>To</label> <input id="to" readonly="readonly" name="to" type="text" value=""> <label>You choosed</label> <input id="days" readonly="readonly" name="days" type="text" value=""> days. </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.