zoukankan      html  css  js  c++  java
  • 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;
            }

    参考网址:

    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

  • 相关阅读:
    暴力STL
    多维坐标离散 排序二分 | set | hash
    H. 试题H:摆动序列 25'
    蓝桥杯模拟赛4.D.路径配对[搜索+判重]
    python 参数表,可变参数,用 json/dict 作为函数参数传入
    sql 修改查询结果的值给接下来的查询用,但是不更改数据库中的值
    使用chrome全网页或部分网页截图
    一个sql语句中用多个where
    sql 使用with as 语句报 “Only `SELECT` statements are allowed against this database”错误
    go 语言并行
  • 原文地址:https://www.cnblogs.com/liminjun88/p/3659271.html
Copyright © 2011-2022 走看看