- 浏览: 761409 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
飞出四季做的茧:
z赞
JAVA日期格式化字符串的24小时制 -
daniaowansui:
亲测,可行!
JS 在open打开的窗口中调用父页面JS方法 -
zh_123:
ie9测试过吗貌似列不能冻结啊!
Css 实现的表头, 表列冻结, 可以超大数据量 -
Jxdwuao:
IXR 写道少年,在哪里混呢?在虹桥机场这边阿, 兄弟你在何方 ...
修改JS文件FF刷新不生效 -
IXR:
少年,在哪里混呢?
修改JS文件FF刷新不生效
在日期选择控件上,我一直使用之前项目组长推荐的 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"); }
发表评论
-
NODE__NPM INSTALL 报错处理
2022-08-22 20:32 0公司小程序开发,使用NODE管理包。 在代码目录执行NP ... -
JS调试
2018-09-06 15:11 0JQUERY:得到的元素有多个的时候用prop设置属性, 只 ... -
IE11高版本页面兼容问题
2018-06-21 09:47 2607页面在 FF 和 CHROME下显示正常,在IE11以下版本 ... -
Jquery 表格插件DataTables
2014-11-11 09:54 921可以实现自定义的排序,分页等功能, 要实现按照自己设定的 ... -
jquery根据name属性查找
2014-09-06 15:55 1051http://hbiao68.iteye.com/blog/ ... -
修改JS文件FF刷新不生效
2014-02-17 16:39 1555修改了trend_key.js 在 FF 刷新页面没用, ... -
Ext4 Grid规则校验
2013-11-22 10:46 1055Ext4 的排班规则列表, 需要在选中一个规则时, 判断是否 ... -
Ext4 Grid改变行选择方式
2013-08-29 11:00 1116Ext4 使用Gird 的列表, CheckBoxModel ... -
Ext4工具类使用
2013-07-31 15:27 1033在Ext4中的各种类型提供的静态方法工具类, 比如查询 S ... -
java JSON解析遇到的问题
2013-07-25 17:18 1612得到JSON对象之后, 进行解析的过程中, 遇到NULL值问 ... -
Ext4 表格分组和组标题的设置
2013-06-07 10:28 2582Ext.create(' ... -
EXT+struts2文件上传 返回的json乱码
2013-05-23 14:02 1565环境是 EXT4.2 + Struts2 。 别的页 ... -
JS学习
2012-12-28 13:10 887http://www.csdn.net ... -
HTML中css和js链接中的版本号
2012-10-24 13:29 965设置了版本号, 可以避免因为缓存带来的不能读取到最新修改的文件 ... -
Spring JSON格式传输
2012-10-17 16:39 930http://blog.csdn.net/leec ... -
FLASH的统计图表,饼图,方块统计图
2012-09-17 09:31 1115FLASH 的统计图表 -
Jquery动态列
2012-09-12 11:04 1749看到有人写的一个JQUERY动态列, 值得参考, 特转发下来 ... -
功能比较丰富支持附件的编辑器
2012-08-20 17:11 962KindEditor 4.x 文档 http://ww ... -
Jquery向导插件
2012-07-10 14:27 1189很多时候我们需要引导用户一步步完成, 还要设计成可以回退的功 ... -
ModalDialog模态对话框的刷新
2012-07-05 23:35 7350原文地址: http://wuaner.iteye.com ...
相关推荐
而"jQuery日期时间范围选择插件"则是利用jQuery的力量来实现一个功能强大的用户界面组件,特别适用于需要用户选择特定日期和时间范围的场景,如酒店预订系统。 这个插件名为daterangepicker.js,它的主要目标是提供...
对于日期范围的选择,如携程网和elong的预订场景,可以设置两个日期选择器,一个用于开始日期,一个用于结束日期,并通过JavaScript进行关联,确保结束日期始终在开始日期之后。同时,后台需要处理日期范围的有效性...
通过阅读和理解这个文件,你可以自定义日期选择器的行为,比如添加日期范围限制、更改日期格式,或者添加验证规则。 总之,利用JavaScript和BIRT的日期参数功能,我们可以创建一个直观且用户友好的日期选择器,从而...
此外,日期范围的限制允许开发者限制用户可以选择的日期范围,这对于某些需要特定日期区间的应用场景非常有用。 在工具性方面,"data2.js"还支持与各种前端框架的集成,如React、Vue或Angular。这意味着开发者可以...
起始时间和结束时间的选择通常通过两个独立的日期时间选择器完成,但也可以通过一个选择器提供范围选择的功能。当用户选择一个起始日期后,可以选择禁用起始日期之前的日期;同样,选择结束日期后,禁用之后的日期。...
基于jQuery的日期范围选择插件,通常会提供一些高级功能,比如预设日期范围、日期限制、日期格式化以及自定义事件处理等。Bootstrap的样式设计使得这些插件具有良好的用户体验和视觉吸引力。 此插件可能利用了...
本篇文章将深入探讨如何利用jQuery实现滑动拖动设置时间日期范围选择器的功能,这对于构建用户友好的Web应用尤其有用。 首先,我们需要理解jQuery的基本语法和API。jQuery对象通常用"$"表示,它可以用来选择DOM元素...
5. **日期验证**:根据应用需求,源码可能包含了日期范围的验证,例如限制用户只能选择特定日期范围内的日期。 6. **与其他元素的交互**:日期选择器通常与输入框或表单关联,当用户选择日期后,会自动填充到对应的...
laydate是一个流行的JavaScript日期插件,它提供了丰富的配置选项和自定义功能,如日期格式化、日期范围限制、自定义事件等。在实际应用中,可以根据项目需求灵活配置,以实现多样化的需求。 总的来说,实现多种...
在JavaScript编程中,日期联动是一种常见的交互功能,尤其在网页表单或日历应用中,用户选择一个日期后,另一个日期选择器会自动更新以显示相关的日期范围或限制。这种功能提高了用户体验,使得数据输入更加便捷和...
- 可以设置日期范围限制,防止用户选择超出指定范围的日期。 - 支持多语言,包括中文、英文等,方便国际化应用。 - 具有事件监听机制,可以响应用户的日期选择行为。 2. **安装与引入**: - 下载lhgcalendar...
5. **关联参数**:确保JavaScript代码中的`id`(如上述的`startDate`)与你在步骤3中创建的参数名称一致,这样BIRT就能正确处理用户选择的日期值。 6. **测试运行**:保存并运行报告,你应该能看到一个可点击的日期...
1. **日期范围选择**:用户可以轻松选取一个开始日期和结束日期,适用于酒店入住和离店的日期设定。 2. **触摸友好**:设计时考虑到了移动设备的触摸操作,使得在小屏幕上滑动和点击都能顺畅进行。 3. **日期格式化*...
比如,用户可以方便地设置日期范围限制,或者添加相对日期选择(如“今天”、“昨天”、“明天”等)。同时,它支持多语言,包括简体中文、繁体中文、英文等多种语言环境,使得全球化的应用开发变得更加容易。 在...
3. **范围选择**:支持选择日期范围,例如旅行的起止日期,这对于预订系统非常实用。 4. **日期验证**:确保用户选择的日期有效,比如不能选择未来某个已知的限制日期之后,或者过去某个不可选的日期之前。 5. **...
2. **My97 DatePicker**:这是一款轻量级但功能强大的JavaScript日期选择插件,它提供了多种皮肤、日期格式化选项、日期范围限制等功能。My97 DatePicker不仅支持IE6+浏览器,还兼容现代的Chrome、Firefox、Safari等...
这些库不仅提供了日期选择功能,还支持自定义格式、范围限制、日期验证等高级特性。 5. **样式和交互设计** 为了提升用户体验,开发者还可以通过CSS对日期输入控件进行样式定制,使其更好地融入页面设计。此外,...
5. **日期范围限制**:可以设定最小和最大可选日期范围,防止用户选择不合适的日期。 6. **日期输入框关联**:可能与HTML的日期输入框关联,当用户在日历上选择日期后,输入框会自动更新。 为了更好地理解和使用这...
6. **日期范围限制**:可以设置最小和最大日期,防止用户选择超出范围的日期。 使用Things-calendar的步骤大致如下: 1. **引入库**:在HTML文件中,通过`<script>`标签引入JavaScript和CSS文件。 2. **初始化日历...
- **日期范围限制**:可以设置最小日期和最大日期,防止用户选择超出范围的日期。 - **事件监听**:支持添加点击、选择、关闭等事件监听,方便开发者进行进一步的业务处理。 - **多语言支持**:通过加载不同的...