JavaScript中的日期处理注意事项
2014-04-11 18:14
357 查看
在业务逻辑比较多的系统里面,一般都会涉及到日期的处理。包括选择起始日期和结束日期,结束日期要大于起始日期,日期的显示和输入等。
输入这一块基本都是使用jQuery datetimepicker,后来系统使用Bootstrap,就开始使用bootstrap datetimepicker。不过功能都差不多。
1.日期录入控件
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
2.因为bootstrap-datetimepicker项目不支持Time选择,所以国内有团队做了扩展,参考地址:http://www.bootcss.com/p/bootstrap-datetimepicker/。
3.处理含有time日期格式时间的显示
ISO 格式是 ISO 8601 扩展格式的简化形式。 格式如下所示:YYYY-MM-DDTHH:mm:ss.sssZ。但是实际项目中我们存储的时间格式一般是:2014-04-18 18:52:05,这种格式。但是这种使用Date对象不能直接操作,所以我们在项目中需要自己写一个格式化的函数,对这种日期格式进行转换。网上和前期项目中使用的格式化函数如下:
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
参考网址:
Bootstrap Datetimepicker:http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&autoclose=on&todayHighlight=on&keyboardNavigation=on&forceParse=on#sandbox
正则表达式格式化日期:http://www.cnblogs.com/oneivan/p/3671992.html
输入这一块基本都是使用jQuery datetimepicker,后来系统使用Bootstrap,就开始使用bootstrap datetimepicker。不过功能都差不多。
1.日期录入控件
<html> <head> <meta charset="utf-8"/> <title>日期输入</title> <link rel="stylesheet" href="datepicker.css"/> <link rel="stylesheet" href="datepicker3.css"/> </head> <body> <div id="sandbox-container"> <div> <label for="startdate">起始日期:</label> <input id="startdate" type="text" type="text" class="form-control"> </div> </div> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="base.js"></script> <script type="text/javascript" src="bootstrap-datepicker.js"></script> <script type="text/javascript" src="bootstrap-datepicker.zh-CN.js"></script> <script type="text/javascript"> $('#startdate').datepicker({ language:"zh-CN", autoclose: true, todayHighlight: true }).on("hide",function(e){ var start = new Date($("#startdate").val()); start = maxDate(start, new Date()); console.log("最大的日期:"+start); }); /* $('#enddate').datepicker({ language:"zh-CN", autoclose: true, todayHighlight: true }); */ $(document).ready(function(){ }); </script> </body> </html>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
2.因为bootstrap-datetimepicker项目不支持Time选择,所以国内有团队做了扩展,参考地址:http://www.bootcss.com/p/bootstrap-datetimepicker/。
3.处理含有time日期格式时间的显示
ISO 格式是 ISO 8601 扩展格式的简化形式。 格式如下所示:YYYY-MM-DDTHH:mm:ss.sssZ。但是实际项目中我们存储的时间格式一般是:2014-04-18 18:52:05,这种格式。但是这种使用Date对象不能直接操作,所以我们在项目中需要自己写一个格式化的函数,对这种日期格式进行转换。网上和前期项目中使用的格式化函数如下:
//将日期转换为字符串 //epoch值转换为指定格式的日期字符串 Date.prototype.toFormat=function(format){ var o={ "M+":this.getMonth()+1, "d+":this.getDate(), "H+":this.getHours(), "m+":this.getMinutes(), "s+":this.getSeconds(), "S":this.getMilliseconds(), } if(/(y+)/.test(format)){ format=format.replace(RegExp.$1,(this.getFullYear().toString()).substr(4-RegExp.$1.length)); for(var k in o){ if(new RegExp("("+k+")").test(format)){ format=format.replace(RegExp.$1, RegExp.$1.length==1?o[k]:("00"+o[k]).substr((""+o[k]).length)); } } } return format; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
参考网址:
Bootstrap Datetimepicker:http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&autoclose=on&todayHighlight=on&keyboardNavigation=on&forceParse=on#sandbox
正则表达式格式化日期:http://www.cnblogs.com/oneivan/p/3671992.html
相关文章推荐
- javascript 日期处理(注意事项)
- Javascript中文字符串处理额外注意事项
- java中Calendar处理日期时的注意事项
- Javascript 中文字符串处理额外注意事项
- 用JavaScript做日期显示时要注意的事项!
- Django中日期处理注意事项与自定义时间格式转换详解
- 在隐藏域使用json的注意事项(后台-前台-javascript)+javascript处理json串
- Javascript 中文字符串处理额外注意事项
- Oracle 11.2 单实例连接ASM时需要注意的事项以及问题处理
- javascript 时间日期处理相加相减
- JavaScript 错误处理与调试——“错误处理”的注意要点
- JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。浮点型数据使用注意事项。全局变量特殊之处
- JavaScript开发时的四个注意事项
- javascript拖动效果的一个注意事项:拖动图片时,mousemove事件会被中断
- javascript日期处理-通过一个字符串的日期得到所在周、上周及下周的第一天和最后一天
- JavaScript: switch用法及注意事项
- [Javascript] 轻量级的JavaScript日期处理类库xDate使用指南
- javascript事件监听器的用法及注意事项
- Oracle10g修改安装 和 Oracle数据库卸载 和 Oracle服务项批处理命令 和 注意事项
- 高德地图 JavaScript API v1.3 升级注意事项