[英]Set an end date based on start date using datepicker
我需要使用datepicker设置开始日期(仅允许将来的日期),然后根据特定月份的选定日期设置结束日期,其中结束日期将是从开始日期选择的月份的最后一天。
HTML代码如下所示:
<fieldset>
<label for="dataStart">Start Date</label>
<input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" />
</fieldset>
<fieldset>
<label for="dataEnd">End Date</label>
<input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="<!-- last day of mont from dataStart -->" readonly />
</fieldset>
jQuery代码:
function getLastDayOfYearAndMonth(year, month)
{
return(new Date((new Date(year, month + 1, 1)) - 1)).getDate();
}
$(document).ready(function() {
$("#dataStart").datepicker({
minDate: 1,
onSelect: function(theDate) {
var defalulDate = new Date();
defalulDate.getLastDayOfYearAndMonth(date.getFullYear(), date.getMonth()));
$("#dataEnd").datepicker(defaultDate: defalulDate);
},
beforeShow: function() {
$('#ui-datepicker-div').css('z-index', 9999);
},
dateFormat: 'mm/dd/yy'
});
});
我无法以某种方式使“结束日期”功能正常工作。
的HTML
<p>From Date: <input type="text" id="fromDatePicker"></p>
<p>To Date: <input type="text" id="toDatePicker"></p>
的JavaScript
var dateToday = new Date();
$(function() {
$( "#fromDatePicker" ).datepicker({
minDate: dateToday,
onSelect: function(selected,evnt) {
var date = $(this).datepicker('getDate'),
day = date.getDate(),
month = date.getMonth() + 1,
year = date.getFullYear();
updateToDate(day,month,year);
}
});
});
function updateToDate(day,month,year){
var myDate = new Date();
var updatedDay;
if(month==9|| month==4 ||month==6 || month==11){
updatedDay = 30;
}
else if (month==2){
updatedDay = 28;
}
else{
updatedDay = 31;
}
var prettyDate =month+ '/' +updatedDay + '/' +year;
$("#toDatePicker").val(prettyDate);
}
$(function() {
$( "#toDatePicker" ).datepicker({
minDate: dateToday
});
});
低于准确的版本,并且没有“ 2月leap年”错误:
HTML:
<fieldset>
<label for="dataStart">Start Date</label>
<input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" />
</fieldset>
<fieldset>
<label for="dataEnd">End Date</label>
<input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="" readonly />
</fieldset>
<div>Days counted between dates: <span id="calculated"></span></div>
jQuery的:
$(document).ready(function() {
$("#dataStart").datepicker({
minDate: '+1d',
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
onSelect: function(date){
var dates = date.split('/');
var lastDate = new Date(dates[2], dates[0], 0);
var y = lastDate.getFullYear(), m = lastDate.getMonth(), d = lastDate.getDate();
m = ('0'+ (m+1)).slice(-2);
$('#dataEnd').val(m+'/'+d+'/'+y);
var start = $('#dataStart').datepicker('getDate');
$('#dataEnd').datepicker({dateFormat: 'mm/dd/yy'}).datepicker('setDate', m+'/'+d+'/'+y);
var end = $('#dataEnd').datepicker('getDate');
var days = ((end - start)/1000/60/60/24)+1;
$('#calculated').text(days);
}
});
});
PS。 感谢jQuery论坛的Sµßhrånil∂提供的提示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.