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>

.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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏文武兼修ing——机器学习与IC设计

队列及其实现队列队列的实现

队列 队列即FIFO,一言以蔽之就是先进先出。比如入队列的顺序是1,2,3,4,那么出队列的顺序也是1,2,3,4 队列的实现 软件——GO语言实现 除了使用链...

42770
来自专栏大内老A

[ASP.NET Web API]如何Host定义在独立程序集中的Controller

通过《ASP.NET Web API的Controller是如何被创建的?》的介绍我们知道默认ASP.NET Web API在Self Host寄宿模式下用于...

21280
来自专栏FD的专栏

一步步理解python的异步IO

看到越来越多的大佬都在使用python的异步IO,协程等概念来实现高效的IO处理过程,可是我对这些概念还不太懂,就学习了一下。 因为是初学者,在理解上有很多不到...

18120
来自专栏电光石火

EasyUI日期选择框

<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" hre...

30260
来自专栏Java编程技术

常用开源框架中设计模式使用分析(全)

说起来设计模式,大家应该都耳熟能详,设计模式代表了软件设计的最佳实践,是经过不断总结提炼出来的代码设计经验的分类总结,这些模式或者可以简化代码,或者可以是代码逻...

17820
来自专栏cnblogs

knockoutjs 上自己实现的flux

在knockoutjs 上实现 Flux 单向数据流 状态机,主要解决多个组件之间对数据的耦合问题。 一、其实简单 flux的设计理念和实现方案,很大程度上人借...

23680
来自专栏曾大稳的博客

ffmpeg为AVPacket添加解码头信息

FFmpeg解码获得的AVPacket只包含视频压缩数据,并没有包含相关的解码信息 (比如:h264的sps pps头信息,AAC的adts头信息),没有这些编...

1.3K20
来自专栏Hadoop实操

如何开发HBase Endpoint类型的Coprocessor以及部署使用

37820
来自专栏分布式系统进阶

Kafka集群Metadata管理Kafka源码分析-汇总

可以看到是调用了ReplicaManager.maybeUpdateMetadataCache方法, 里面又会调用到MetadataCache.updateCa...

28520
来自专栏Elasticsearch实验室

Elasitcsearch 底层系列 Lucene 内核解析之 Stored Fields

Lucene 的 stored fields 主要用于行存文档需要保存的字段内容,每个文档的所有 stored fields 保存在一起,在查询请求需要返回字段...

77250

扫码关注云+社区

领取腾讯云代金券