JavaScript中的日期处理注意事项

简介:

在业务逻辑比较多的系统里面,一般都会涉及到日期的处理。包括选择起始日期和结束日期,结束日期要大于起始日期,日期的显示和输入等。

输入这一块基本都是使用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>

image

 

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;
        }

目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
39 2
|
5月前
|
JavaScript 前端开发 Serverless
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
163 2
|
6月前
|
JavaScript
JS设置日期为0时0分0秒
项目中经常要给设置默认值,搜索从哪天开始,这时候,如果直接通过new Date()来获取时间,会有时分秒,如果快速设置为0时0分0秒?
267 0
|
6月前
|
移动开发 JavaScript 前端开发
分享76个时间日期JS特效,总有一款适合您
分享76个时间日期JS特效,总有一款适合您
68 0
|
6月前
|
JavaScript 前端开发 UED
分享89个时间日期JS特效,总有一款适合您
分享89个时间日期JS特效,总有一款适合您
77 3
|
2月前
|
JavaScript 前端开发
js时间戳转日期时间
js时间戳转日期时间
81 20
|
14天前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
2月前
|
JavaScript 前端开发
|
3月前
|
资源调度 JavaScript 前端开发
安装 Nuxt.js 的步骤和注意事项
【8月更文挑战第6天】
54 3
|
5月前
|
JavaScript 前端开发
JavaScript中的var变量详解:定义、提升与注意事项
JavaScript中的var变量详解:定义、提升与注意事项
156 2