jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

日期选择插件是一个配置灵活的插件，你可以定义它的展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等

文档和下载地址：

1、jQuery-Timepicker-Addon的下载地址：https://github.com/trentrichardson/jQuery-Timepicker-Addon

2、jQuery-Timepicker-Addon的的文档地址：http://trentrichardson.com/examples/timepicker/

3、DateTimePicker的演示地址：http://www.helloweba.com/demo/timepicker/

4、JQuery-UI下载地址：http://jqueryui.com/themeroller/

6、JQuery下载地址：http://www.jq22.com/jquery-info122

下面先看效果图：

引入js文件：

<script src="js/jquery-3.1.1.min.js"></script>

<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>

<link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />

<script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script>

<script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>

<link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />

1、默认的效果：

关键代码：

$("#defult").datetimepicker();

2、控制到时分秒：

关键代码：

                $('#date').prop("readonly", true).datetimepicker({

                        timeText: '时间',

                        hourText: '小时',

                        minuteText: '分钟',

                        secondText: '秒',

                        currentText: '现在',

                        closeText: '完成',

                        showSecond: true, //显示秒

                        timeFormat: 'HH:mm:ss' //格式化时间

                    });

3、控制到年月日

关键代码：

                $("#date_yy-mm-dd").prop("readonly", true).datepicker({

                        changeMonth: true,

                        dateFormat: "yy-mm-dd",

                        onClose: function(selectedDate) {

                        }

                    });

4、开始结束区间

关键代码：

        $("#date_start").prop("readonly", true).datepicker({

                        changeMonth: true,

                        dateFormat: "yy-mm-dd",

                        onClose: function(selectedDate) {

                            $("#date_end").datepicker("option", "minDate", selectedDate);

                        }

                    });

                    $("#date_end").prop("readonly", true).datepicker({

                        changeMonth: true,

                        dateFormat: "yy-mm-dd",

                        onClose: function(selectedDate) {

                            $("#date_start").datepicker("option", "maxDate", selectedDate);

                            $("#date_end").val($(this).val());

                        }

                    });

5、时分秒选择：

关键代码：

                       $('#date_hhmmss').prop("readonly", true).timepicker({

                        timeText: '时间',

                        hourText: '小时',

                        minuteText: '分钟',

                        secondText: '秒',

                        currentText: '现在',

                        closeText: '完成',

                        showSecond: true, //显示秒

                        timeFormat: 'HH:mm:ss' //格式化时间

                    });

6、开始结束区间(第二种写法)：

     

关键代码：

                $.timepicker.dateRange(

                        $("#date_start_1"),

                        $("#date_end_1"), {

                            minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间

                            maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间

                            start: {}, // start picker options

                            end: {} // end picker options});

                        }

                    );

完整代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <title></title>

        <script src="js/jquery-3.1.1.min.js"></script>

        <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>

        <link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />

        <script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script>

        <script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>

        <link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />

        <script type="text/javascript">

            (function($) {

                $(function() {

                    $.datepicker.regional['zh-CN'] = {

                        changeMonth: true,

                        changeYear: true,

                        clearText: '清除',

                        clearStatus: '清除已选日期',

                        closeText: '关闭',

                        closeStatus: '不改变当前选择',

                        prevText: '<上月',

                        prevStatus: '显示上月',

                        prevBigText: '<<',

                        prevBigStatus: '显示上一年',

                        nextText: '下月>',

                        nextStatus: '显示下月',

                        nextBigText: '>>',

                        nextBigStatus: '显示下一年',

                        currentText: '今天',

                        currentStatus: '显示本月',

                        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],

                        monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],

                        monthStatus: '选择月份',

                        yearStatus: '选择年份',

                        weekHeader: '周',

                        weekStatus: '年内周次',

                        dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],

                        dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],

                        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],

                        dayStatus: '设置 DD 为一周起始',

                        dateStatus: '选择 m月 d日, DD',

                        dateFormat: 'yy-mm-dd',

                        firstDay: 1,

                        initStatus: '请选择日期',

                        isRTL: false

                    };

                });

                $(function() {

                    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);

                    $("#defult").datetimepicker();

                    $('#date').prop("readonly", true).datetimepicker({

                        timeText: '时间',

                        hourText: '小时',

                        minuteText: '分钟',

                        secondText: '秒',

                        currentText: '现在',

                        closeText: '完成',

                        showSecond: true, //显示秒

                        timeFormat: 'HH:mm:ss' //格式化时间

                    });

                    $("#date_yy-mm-dd").prop("readonly", true).datepicker({

                        changeMonth: true,

                        dateFormat: "yy-mm-dd",

                        onClose: function(selectedDate) {

                        }

                    });

                    $("#date_start").prop("readonly", true).datepicker({

                        changeMonth: true,

                        dateFormat: "yy-mm-dd",

                        onClose: function(selectedDate) {

                            $("#date_end").datepicker("option", "minDate", selectedDate);

                        }

                    });

                    $("#date_end").prop("readonly", true).datepicker({

                        changeMonth: true,

                        dateFormat: "yy-mm-dd",

                        onClose: function(selectedDate) {

                            $("#date_start").datepicker("option", "maxDate", selectedDate);

                            $("#date_end").val($(this).val());

                        }

                    });

                    $('#date_hhmmss').prop("readonly", true).timepicker({

                        timeText: '时间',

                        hourText: '小时',

                        minuteText: '分钟',

                        secondText: '秒',

                        currentText: '现在',

                        closeText: '完成',

                        showSecond: true, //显示秒

                        timeFormat: 'HH:mm:ss' //格式化时间

                    });

                    $.timepicker.dateRange(

                        $("#date_start_1"),

                        $("#date_end_1"), {

                            minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间

                            maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间

                            start: {}, // start picker options

                            end: {} // end picker options});

                        }

                    );

                });

            }(jQuery));

        </script>

    </head>

    <body>

        默认：

        <input id="defult" />

        <br/>

        <br />

        控制到时分秒：<input id="date" />

        <br />

        <br /> 控制到年月日：

        <input id="date_yy-mm-dd" />

        <br />

        <br /> 开始结束区间：

        <br />

        <input id="date_start" />~<input id="date_end" />

        <br />

        <br /> 时分秒选择：

        <br />

        <input id="date_hhmmss" />

        <br />

        <br /> 开始结束区间(第二种写法)：

        <br />

        <input id="date_start_1" />~<input id="date_end_1" />

    </body>

</html>

代码的下载地址：http://pan.baidu.com/s/1dFl27hJ      提取密码：adtu

jQuery DateTimePicker 日期和时间插件的更多相关文章

  1. jquery datetimepicker 日期时间控件的使用及参数说明

    首先下载 jquery.datetimepicker.css jquery.datetimepicker.main.js 1. 引入css和js (注:该控件要依赖于jquery) <link ...

  2. DateTimePicker：jQuery日期和时间插件

    点击在线预览效果       点击下载该插件 下面是效果截图:

  3. jQuery日期和时间插件（jquery-ui-timepicker-addon.js）中文破解版使用

    <html> <head> <title></title> <link type="text/css" href=" ...

  4. datetimepicker bootstrap的时间插件显示位置问题及其他配置

    位置问题: 在bootstrap中用 datetimepicker 时默认是在输入框下面弹出的, 但是遇到输入框在屏幕最下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出. 可以 ...

  5. jQuery DateTimePicker 日期控件

    在线实例 实例演示 使用方法 <input id="datetimepicker" type="text" > 复制 $('#datetimepic ...

  6. 微信小程序之日期与时间插件

    页面 <picker mode="time" value="{{time}}" start="{{minTime}}" end=&qu ...

  7. bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件

    <!DOCTYPE html><head> <title>时间插件测试</title><style type="text/css&quo ...

  8. 1、用datetimepicker插件实现限定时间范围的选择 2、时间插件实现默认当天的时间和只能选择小于今天的日期

    一.用datetimepicker插件实现限定时间范围的选择 1.下面是要实现的效果图,让开始时间只能从  2018-7-1  到 2018-7-7 选择. 2.html的结构 <div cla ...

  9. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

随机推荐

  1. iOS之TimeLine(时间轴)的实现

    这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...

  2. AJAX 同步异步笔记

    就在刚才,做一个很简单的Demo, 预览MP4视频文件 这就是一个video标签嘛,然后再动态的给src赋值嘛.这还不是so easy? 好,说做就做.先简单的测试一下.先给src赋值一下. 嗯,可以 ...

  3. Angular动画（ng-class）

    ng-class 同 触发的是 addClass//当给元素添加一个class时触发, removeClass //把元素的class移除时触发 <ul ng-style="ulWid ...

  4. 树链剖分+线段树 HDOJ 4897 Little Devil I（小恶魔）

    题目链接 题意: 给定一棵树,每条边有黑白两种颜色,初始都是白色,现在有三种操作: 1 u v:u到v路径(最短)上的边都取成相反的颜色 2 u v:u到v路径上相邻的边都取成相反的颜色(相邻即仅有一 ...

  5. Struts 2

    <默认>execute -- 默认方法success -- 默认返回值 <配置><package><package name="default&qu ...

  6. 通过url传参

    简介: 通过url传单个和多个参数 你得配Route; 你得使用ui-sref传参数; 在你相关Route的Controller里面Inject $stateParams,然后取参数就OK. 实例: ...

  7. 【填坑】bzoj3224 splay裸题

    人生第一道splay不出所料是一道裸题,一道水题,一道2k代码都不到的题 #include <cstdio> ,n,p,q; ],c[][],size[],sp[]; void rot(i ...

  8. 阿里云ECS（Centos）开启X11的步骤

    阿里云ECS(Centos)开启X11的步骤 1.修改sshd_config X11Forwarding yes 2.yum -y install xorg-x11-xauth xorg-x11-ut ...

  9. python反射问题

    python中的__import__是以字符串的形式反射导入模块并以字符串的形式执行函数

  10. FTD团队目录

    一.Daily Scrum Meeting[Alpha] · [Alpha]Daily Scrum Meeting 第一次 · [Alpha]Daily Scrum Meeting 第二次 · [Al ...