`

JS 关联日期选择范围的限制

    博客分类:
  • JS
阅读更多



 在日期选择控件上,我一直使用之前项目组长推荐的 My97DatePicker 今天使用了一个它在日期选择上比较好的功能.

 

就是朋友 做酒店订房系统, 想要修改 日期控件 入住日期 和 退房日期的选择范围.

 

 

但是要求选择了入住日期之后, 退房日期范围也要随即变化,在入住日期 X 天之后。

 

My97 可以调用函数的方式来设定 日期选择范围 。

 

 

入住日期<input name="checkin" type="text" id="checkin" class="Wdate"  onfocus="WdatePicker({lang:'en',skin:'whyGreen',minDate:'<%=CDate(dateArr(0))%>',maxDate:'<%=CDate(dateArr(1))%>'})" value="<%=CDate(dateArr(0))%>" />



退房日期<input name="checkout" type="text" id="checkout" class="Wdate"  onfocus="WdatePicker({lang:'en',skin:'whyGreen',minDate:'#F{getChkin()}',maxDate:'<%=DateAdd("d",stayDays,CDate(dateArr(1)))%>'})" value="<%=DateAdd("d",stayDays,CDate(dateArr(0)))%>" />

 

 

这里,我使用一个函数 getChkin() 来计算退房日期。 这样调用的:#F{getChkin()}

 

 

此外,还要考虑到几个 问题:

1. 日期选择, 格式化的 问题 。

 

我参考扩展JS 日期类的代码:

						
							/*
							 * 日期格式化方法
							 */
							Date.prototype.format = function(mask) {   
							  
								var d = this;   
							  
								var zeroize = function (value, length) {   
							  
									if (!length) length = 2;   
							  
									value = String(value);   
							  
									for (var i = 0, zeros = ''; i < (length - value.length); i++) {   
							  
										zeros += '0';   
							  
									}   
							  
									return zeros + value;   
							  
								};     
							  
								return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, function($0) {   
							  
									switch($0) {   
							  
										case 'd':   return d.getDate();   
							  
										case 'dd':  return zeroize(d.getDate());   
							  
										case 'ddd': return ['Sun','Mon','Tue','Wed','Thr','Fri','Sat'][d.getDay()];   
							  
										case 'dddd':    return ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][d.getDay()];   
							  
										case 'M':   return d.getMonth() + 1;   
							  
										case 'MM':  return zeroize(d.getMonth() + 1);   
							  
										case 'MMM': return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];   
							  
										case 'MMMM':    return ['January','February','March','April','May','June','July','August','September','October','November','December'][d.getMonth()];   
							  
										case 'yy':  return String(d.getFullYear()).substr(2);   
							  
										case 'yyyy':    return d.getFullYear();   
							  
										case 'h':   return d.getHours() % 12 || 12;   
							  
										case 'hh':  return zeroize(d.getHours() % 12 || 12);   
							  
										case 'H':   return d.getHours();   
							  
										case 'HH':  return zeroize(d.getHours());   
							  
										case 'm':   return d.getMinutes();   
							  
										case 'mm':  return zeroize(d.getMinutes());   
							  
										case 's':   return d.getSeconds();   
							  
										case 'ss':  return zeroize(d.getSeconds());   
							  
										case 'l':   return zeroize(d.getMilliseconds(), 3);   
							  
										case 'L':   var m = d.getMilliseconds();   
							  
												if (m > 99) m = Math.round(m / 10);   
							  
												return zeroize(m);   
							  
										case 'tt':  return d.getHours() < 12 ? 'am' : 'pm';   
							  
										case 'TT':  return d.getHours() < 12 ? 'AM' : 'PM';   
							  
										case 'Z':   return d.toUTCString().match(/[A-Z]+$/);   
							  
										// Return quoted strings with the surrounding quotes removed   
							  
										default:    return $0.substr(1, $0.length - 2);   
							  
									}   
							  
								});   
							};  

 

 

这样,可以使用 Date.format("yyyy-MM-dd"); 的形式来 格式化日期字符串了。

 

JS 的日期构造函数 不支持 new Date("yyyy-MM-dd") 只能使用 new Date("yyyy/MM/dd")   后面我们用正则替换下 即可  replace(/-/g, "/")  。

 

2. 日期计算的问题。

 

使用 Date.setDate(Date.getDate() + X) 的方式来 加 X 天。

function getChkin(){
								var sdate = document.getElementById("checkin").value;
								sdate = new Date(sdate.replace(/-/g, "/"));
								sdate.setDate(sdate.getDate()+<%=stayDays%>);
								return sdate.format("yyyy-MM-dd");
							}

 

 

 

  • 大小: 21.3 KB
分享到:
评论

相关推荐

    jQuery日期时间范围选择插件.zip

    而"jQuery日期时间范围选择插件"则是利用jQuery的力量来实现一个功能强大的用户界面组件,特别适用于需要用户选择特定日期和时间范围的场景,如酒店预订系统。 这个插件名为daterangepicker.js,它的主要目标是提供...

    类似携程网日期,elong日期选择

    对于日期范围的选择,如携程网和elong的预订场景,可以设置两个日期选择器,一个用于开始日期,一个用于结束日期,并通过JavaScript进行关联,确保结束日期始终在开始日期之后。同时,后台需要处理日期范围的有效性...

    birt报表参数日期选择JS文件及操作步骤

    通过阅读和理解这个文件,你可以自定义日期选择器的行为,比如添加日期范围限制、更改日期格式,或者添加验证规则。 总之,利用JavaScript和BIRT的日期参数功能,我们可以创建一个直观且用户友好的日期选择器,从而...

    data2.js日期控件

    此外,日期范围的限制允许开发者限制用户可以选择的日期范围,这对于某些需要特定日期区间的应用场景非常有用。 在工具性方面,"data2.js"还支持与各种前端框架的集成,如React、Vue或Angular。这意味着开发者可以...

    时间日期选择器(包含中英文)

    起始时间和结束时间的选择通常通过两个独立的日期时间选择器完成,但也可以通过一个选择器提供范围选择的功能。当用户选择一个起始日期后,可以选择禁用起始日期之前的日期;同样,选择结束日期后,禁用之后的日期。...

    基于bootstrap实现的jQuery日期范围选择插件特效源码.zip

    基于jQuery的日期范围选择插件,通常会提供一些高级功能,比如预设日期范围、日期限制、日期格式化以及自定义事件处理等。Bootstrap的样式设计使得这些插件具有良好的用户体验和视觉吸引力。 此插件可能利用了...

    jQuery滑动拖动设置时间日期范围选择器代码

    本篇文章将深入探讨如何利用jQuery实现滑动拖动设置时间日期范围选择器的功能,这对于构建用户友好的Web应用尤其有用。 首先,我们需要理解jQuery的基本语法和API。jQuery对象通常用"$"表示,它可以用来选择DOM元素...

    js基于calendar实现的橙色日期选择器源码.zip

    5. **日期验证**:根据应用需求,源码可能包含了日期范围的验证,例如限制用户只能选择特定日期范围内的日期。 6. **与其他元素的交互**:日期选择器通常与输入框或表单关联,当用户选择日期后,会自动填充到对应的...

    多种类型日期文本框选择

    laydate是一个流行的JavaScript日期插件,它提供了丰富的配置选项和自定义功能,如日期格式化、日期范围限制、自定义事件等。在实际应用中,可以根据项目需求灵活配置,以实现多样化的需求。 总的来说,实现多种...

    js关于日期联动的代码

    在JavaScript编程中,日期联动是一种常见的交互功能,尤其在网页表单或日历应用中,用户选择一个日期后,另一个日期选择器会自动更新以显示相关的日期范围或限制。这种功能提高了用户体验,使得数据输入更加便捷和...

    lhgcalendar-日期选择控件(js控件-实例)

    - 可以设置日期范围限制,防止用户选择超出指定范围的日期。 - 支持多语言,包括中文、英文等,方便国际化应用。 - 具有事件监听机制,可以响应用户的日期选择行为。 2. **安装与引入**: - 下载lhgcalendar...

    在birt中添加js日期控件

    5. **关联参数**:确保JavaScript代码中的`id`(如上述的`startDate`)与你在步骤3中创建的参数名称一致,这样BIRT就能正确处理用户选择的日期值。 6. **测试运行**:保存并运行报告,你应该能看到一个可点击的日期...

    jQuery移动端酒店入住日期选择代码.zip

    1. **日期范围选择**:用户可以轻松选取一个开始日期和结束日期,适用于酒店入住和离店的日期设定。 2. **触摸友好**:设计时考虑到了移动设备的触摸操作,使得在小屏幕上滑动和点击都能顺畅进行。 3. **日期格式化*...

    一款强大的日期选择控件my97DataPick

    比如,用户可以方便地设置日期范围限制,或者添加相对日期选择(如“今天”、“昨天”、“明天”等)。同时,它支持多语言,包括简体中文、繁体中文、英文等多种语言环境,使得全球化的应用开发变得更加容易。 在...

    日期选择器

    3. **范围选择**:支持选择日期范围,例如旅行的起止日期,这对于预订系统非常实用。 4. **日期验证**:确保用户选择的日期有效,比如不能选择未来某个已知的限制日期之后,或者过去某个不可选的日期之前。 5. **...

    ext JS集成My97DatePicker日期控件

    2. **My97 DatePicker**:这是一款轻量级但功能强大的JavaScript日期选择插件,它提供了多种皮肤、日期格式化选项、日期范围限制等功能。My97 DatePicker不仅支持IE6+浏览器,还兼容现代的Chrome、Firefox、Safari等...

    form表单日期输入控件

    这些库不仅提供了日期选择功能,还支持自定义格式、范围限制、日期验证等高级特性。 5. **样式和交互设计** 为了提升用户体验,开发者还可以通过CSS对日期输入控件进行样式定制,使其更好地融入页面设计。此外,...

    一个比较好用的js日期空件

    5. **日期范围限制**:可以设定最小和最大可选日期范围,防止用户选择不合适的日期。 6. **日期输入框关联**:可能与HTML的日期输入框关联,当用户在日历上选择日期后,输入框会自动更新。 为了更好地理解和使用这...

    Thingscalendar简单而优雅的网页日期选择器

    6. **日期范围限制**:可以设置最小和最大日期,防止用户选择超出范围的日期。 使用Things-calendar的步骤大致如下: 1. **引入库**:在HTML文件中,通过`&lt;script&gt;`标签引入JavaScript和CSS文件。 2. **初始化日历...

    qq日期控件 qq日期控件 qq日期控件 qq日期控件

    - **日期范围限制**:可以设置最小日期和最大日期,防止用户选择超出范围的日期。 - **事件监听**:支持添加点击、选择、关闭等事件监听,方便开发者进行进一步的业务处理。 - **多语言支持**:通过加载不同的...

Global site tag (gtag.js) - Google Analytics