当前,我正在构建一些应用程序,我需要考虑用户选择的月份和年份范围的差异,但它对我不起作用。
我只是得到用户选择的日期,但没有区别。 datepicker方法提供当前系统日期。
我想要的是
from date: Aug-2016
To date: Sep-2017
Difference: 1 month 1 year
和
from date: Aug-2017
To date: Oct-2017
Difference: 2 month
有什么建议么
$("#from, #to").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
var other = this.id == "from" ? "#to" : "#from";
var option = this.id == "from" ? "maxDate" : "minDate";
if ((selectedDate = $(other).val()).length > 0) {
year = selectedDate.substring(selectedDate.length-4, selectedDate.length);
month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker( "option", option, new Date(year, month, 1));
}
}
});
//button click function
$("#btnShow").click(function(){
if ($("#from").val().length == 0 || $("#to").val().length == 0){
alert('All fields are required');
} else {
alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val());
}
});
.ui-datepicker-calendar {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div style="text-align:center;">
<label for="from">From</label>
<input type="text" id="from" name="from" readonly="readonly" />
<label for="to">to</label>
<input type="text" id="to" name="to" readonly="readonly" />
<input type="button" id="btnShow" value="Show" />
</div>
最佳答案
请找到以下提到的解决方案。在这里,您可以找到月份之间的差异。
$(document).ready(function() {
$("#from").datepicker({
dateFormat: 'yy-mm',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
beforeShow: function(input, inst) {
if (!$(this).val()) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)).trigger('change');
}
},
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
$("#to").datepicker("option", {minDate: new Date(inst.selectedYear, inst.selectedMonth, 1)})
}
});
$('#from').datepicker('setDate', new Date());
$('#to').datepicker({
dateFormat: 'yy-mm',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)).trigger('change');
}
});
$("#btnShow").click(function() {
if ($("#from").val().length == 0 || $("#to").val().length == 0) {
alert('All fields are required');
} else {
var startDay = new Date($("#from").val());
var endDay = new Date($("#to").val());
var date2_UTC = new Date(Date.UTC(endDay.getUTCFullYear(), endDay.getUTCMonth()));
var date1_UTC = new Date(Date.UTC(startDay.getUTCFullYear(), startDay.getUTCMonth()));
var months = date2_UTC.getMonth() - date1_UTC.getMonth();
if (months < 0) {
date2_UTC.setFullYear(date2_UTC.getFullYear() - 1);
months += 12;
}
var years = date2_UTC.getFullYear() - date1_UTC.getFullYear();
if (years > 0) {
if(months > 0)
$('#result').html(years + " year " + " " + months + " month");
else
$('#result').html(years + " year ");
} else {
$('#result').html(months + " month");
}
}
});
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<style>.ui-datepicker-calendar {display: none;}</style>
<div style="text-align:center;">
<label for="from">From</label>
<input type="text" id="from" name="from" readonly="readonly" />
<label for="to">to</label>
<input type="text" id="to" name="to" readonly="readonly" />
<input type="button" id="btnShow" value="Show" />
</div>
<div id="result"></div>
关于javascript - 使用Jquery DatePicker IN n month n year格式显示仅月份年份范围持续时间的差异,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45448370/