bootstrap-datepicker 开始时间结束时间

最新推荐文章于 2024-08-08 07:19:16 发布

转载最新推荐文章于 2024-08-08 07:19:16 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/204616/blog/602998

文章标签：

#python

本文展示了一个使用JavaScript实现的日期选择器联动效果。通过设置起始日期与结束日期之间的限制，确保结束日期不会早于起始日期。此外，还展示了如何禁用过去一年内的日期选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<input class="span10" name="showStartDate" id="showStartDate"  
		value="<fmt:formatDate value="${showProject.showStartDate}" pattern="yyyy-MM-dd"/>" 
		type="text" data-date-format="yyyy-mm-dd" readonly="readonly" style="width:88px;" 
		placeholder="开始日期" title="开始日期"/>-
<input class="span10" name="showEndDate" id="showEndDate"  
		value="<fmt:formatDate value="${showProject.showEndDate}" pattern="yyyy-MM-dd"/>" 
		type="text" data-date-format="yyyy-mm-dd" readonly="readonly" style="width:88px;" 
		placeholder="结束日期" title="结束日期"/>

var nowTemp = new Date();
	var now = new Date(nowTemp.getFullYear()-1, nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
	var isfirst=true;
	var checkin = $('#showStartDate').datepicker({
	  onRender: function(date) {
	    return date.valueOf() < now.valueOf() ? 'disabled' : '';
	  }
	}).on('changeDate', function(ev) {
	  if (ev.date.valueOf() > checkout.date.valueOf()||isfirst) {
	    var newDate = new Date(ev.date)
	    newDate.setDate(newDate.getDate() + 1);
	    checkout.setValue(newDate);
	    isfirst=false;
	  }
	  checkin.hide();
	  $('#showEndDate')[0].focus();
	}).data('datepicker');
	var checkout = $('#showEndDate').datepicker({
	  onRender: function(date) {
	    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
	  }
	}).on('changeDate', function(ev) {
	  checkout.hide();
	}).data('datepicker');

转载于:https://my.oschina.net/u/204616/blog/602998