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

输入这一块基本都是使用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中的日期处理注意事项的更多相关文章

  1. JavaScript 中的日期和时间

    前言 本篇的介绍涵盖以下部分: 1. 时间标准指的是什么?UCT和GMT 的概念.关联和区别? 2. 时间表示标准有哪些? 3. JS 中时间的处理 日期时间标准 日期的标准就不多说了 -- 公元纪年 ...

  2. 谈谈javascript中的日期Date对象

    一.日期对象  在javascript中并没有日期型的数据类型,但是提供了一个日期对象可以操作日期和时间.  日期对象的创建:  new Date();二.将日期对象转换为字符串  将日期对象转换为字 ...

  3. javascript中关于日期和时间的基础知识

    × 目录 [1]标准时间 [2]字符串 [3]闰年[4]月日[5]星期[6]时分秒 前面的话 在介绍Date对象之前,首先要先了解关于日期和时间的一些知识.比如,闰年.UTC等等.深入了解这些,有助于 ...

  4. JavaScript中对日期格式化的新想法.

    其实我们对与日期的显示,也就那么几种,不需要每次都传格式化字符串. 只要告诉函数你想要什么结果就好了,以下是在ios的JavaScript中我新写的日期格式化函数: /** 格式化日期 @param ...

  5. [译]在Javascript中进行日期相关的操作

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  6. JavaScript中Date(日期对象),Math对象--学习笔记

    Date对象 1.什么是Date对象? 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 语法:var Udate=new Date();  注:初始值为当前时间(当前电脑系统 ...

  7. JavaScript中的日期时间函数

    1.Date对象具有多种构造函数,下面简单列举如下 new Date() new Date(milliseconds) new Date(datestring) new Date(year, mont ...

  8. JavaScript中判断日期是否相等

    问题 做一个节日提示网页,首先获得当前日期,然后与最近的节日比较,如果恰好是同一天,提示"XX节快乐!"否则,提示"离XX节还有X天".判断是否恰好同一天的时候 ...

  9. （转载）JavaScript中的日期格式转换

    (转载)http://www.php100.com/html/webkaifa/javascript/2008/1229/1618.html 今天做页面需要把JS里面的Date规范输出为“YYYY-M ...

随机推荐

  1. Android 无标题 全屏设置

    标题栏和状态栏 Android程序默认情况下是包含状态栏和标题栏的. 在Eclipse中新建一个Android程序,运行后显示如下: 图中标出了状态栏(显示时间.电池电量.网络等)和标题栏(显示应用的 ...

  2. xcode8 升级后注释快键键不能使用的解决方法

    1.这个是因为苹果解决xcode ghost.把插件屏蔽了.解决方法 命令运行:  sudo /usr/libexec/xpccachectl 然后必须重启电脑后生效 2.option+command ...

  3. JAVA面试逻辑题1

    一.计算推理 烧香问题: 有两根不均匀分布的香,每一根烧完的时间都是一小时.用什么办法确定一段15分钟的时间? 解题步骤: 1.点燃第一根的两头,同时点燃第二根的一头: 2.等到第一根燃尽以后,再点燃 ...

  4. webservice 小小例子

    Web Service的主要目标是跨平台的可互操作性.为了实现这一目标,Web Service 完全基于XML(可扩展标记语言).XSD(XML Schema)等独立于平台.独立于软件供应商的标准,是 ...

  5. xml中DTD解析

    DTD的作用是"文档类型的定义" DTD申明始终以<!DOCTYPE开头(开头后空一格). 本标签一共有三种写法 一.内部DTD: <!DOCTYPE 根元素 [ 文档 ...

  6. markdown预览-快速入门

    最近要写文档,领导指定用markdown. 这个两三年前用过两次的神器工具,都忘的差不多了. 为了熟练一点这个技能,决定好好的重新学一次. 于是乎:看快速入门文档 ...30分钟...看完文档发现要来 ...

  7. 有关JVM配置参数含义

    1.参数的含义-vmargs -Xms128M -Xmx512M -XX:PermSize=64M -XX:MaxPermSize=128M-vmargs 说明后面是VM的参数,所以后面的其实都是JV ...

  8. 热门的PHP框架

    每个PHP框架都拥有各自独特的地方.同时PHP语言已经获得了巨大的认同并且成为了世界上最通用的服务器脚本语言.PHP也俨然成为了最容易学习的web动态开发语言.在PHP发展的同时,PHP框架也迅速崛起 ...

  9. Surface Shader简单向导

    Surface Shader 表面着色器 描述 当你的Material要处理光照,则一般使用Surface Shader.Surface Shader隐藏了光照的计算,你只需要在surf函数里设置好反 ...

  10. web Api 返回json 的两种方式

    web api写api接口时默认返回的是把你的对象序列化后以XML形式返回,那么怎样才能让其返回为json呢,下面就介绍两种方法: 方法一:(改配置法) 找到Global.asax文件,在Applic ...