LOT.UI分解系列汇总：http://www.cnblogs.com/dunitian/p/4822808.html#lotui

LoT.UI开源地址如下：https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI

先看在LoT.UI里面的应用效果图：

关键代码解析：（https://github.com/dunitian/LoTCodeBase/blob/master/LoTUI/Manager/Demo/datepicker.html）

头部引用CSS:

日期选择器定义

引入Script并初始化

案例代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>datepicker</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <link href="/open/bootstrap-datepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" />

    <!--[if lt IE 9]>

        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

    <div class="col-lg-1"></div>

    <div class="col-lg-3">

        <div class="input-group">

            <span class="input-group-addon">时间</span><input type="text" class="form-control lot-time" placeholder="请选择时间...">

        </div>

    </div>

    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script src="/open/bootstrap-datepicker/bootstrap-datetimepicker.min.js"></script>

    <script src="/open/bootstrap-datepicker/bootstrap-datetimepicker.zh-CN.js"></script>

    <script type="text/javascript">

        //时间控件

        $(function () {

            $('.lot-time').datetimepicker({

                format: "yyyy-mm-dd hh:ii",

                todayBtn: "linked",

                language: "zh-CN",

                autoclose: true

            });

        })

    </script>

</body>

</html>

推荐组件：https://github.com/smalot/bootstrap-datetimepicker

原有组件：https://github.com/eternicode/bootstrap-datepicker

05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器的更多相关文章

  1. 08.LoT.UI 前后台通用框架分解系列之——多样的Tag选择器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  2. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. 07.LoT.UI 前后台通用框架分解系列之——强大的文本编辑器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  4. 01.LoT.UI 前后台通用框架分解系列之——小图片背景全屏显示（可自动切换背景）

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  5. 02.LoT.UI 前后台通用框架分解系列之——灵活的菜单栏

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  6. 03.LoT.UI 前后台通用框架分解系列之——多样的表格

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  7. 04.LoT.UI 前后台通用框架分解系列之——轻巧的弹出框

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  8. 07.LoT.UI 前后台通用框架分解系列之——轻巧的文本编辑器

    LoT.UI汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui 上次说的是强大的百度编辑器 http://www.cnblogs.com/d ...

  9. Android通用框架设计与完整电商APP开发系列文章

    作者|傅猿猿 责编|Javen205 有福利 有福利 有福利 鸣谢 感谢@傅猿猿 邀请写此系列文章 Android通用框架设计与完整电商APP开发 课程介绍 [导学视频] [课程详细介绍] 以下是部分 ...

随机推荐

  1. 【.net 深呼吸】序列化中的“引用保留”

    假设 K 类中有两个属性/字段的类型相同,并且它们引用的是同一个对象实例,在序列化的默认处理中,会为每个引用单独生成数据. 看看下面两个类. [DataContract] public class 帅 ...

  2. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  3. 游戏服务器菜鸟之C#初探一游戏服务

    本人80后程序猿一枚,原来搞过C++/Java/C#,因为工作原因最后选择一直从事C#开发,因为读书时候对游戏一直比较感兴趣,机缘巧合公司做一个手游的项目,我就开始游戏服务器的折腾之旅. 游戏的构架是 ...

  4. 4.Android 打包时出现的Android Export aborted because fatal error were founds [closed]

    Android 程序开发完成后,如果要发布到互联网上供别人使用,就需要将自己的程序打包成Android 安装包文件(Android Package,APK),其扩展名为.apk.使用run as 也能 ...

  5. pandas基础-Python3

    未完 for examples: example 1: # Code based on Python 3.x # _*_ coding: utf-8 _*_ # __Author: "LEM ...

  6. 敏捷测试模式之Scrum及其实践

    一.    敏捷开发模式简介 敏捷是近年来软件研发领域很火的一个词,采用敏捷开发模式的研发团队是越来越多了,尤其是敏捷模式中的Scrum更是佼佼者大行其道,这表明敏捷模式确有其好处,能给企业带来效率的 ...

  7. centos 6 安装配置openvpn

    下载地址:http://swupdate.openvpn.org/community/releases/http://www.oberhumer.com/opensource/lzo/download ...

  8. Alwayson的IP冲突

    Alwayson的IP冲突 https://social.technet.microsoft.com/Forums/office/en-US/4d50cb1c-eef7-4dcc-b937-3c8eb ...

  9. ASP.NET Aries JSAPI 文档说明：AR.DataGrid

    AR.DataGrid 文档 用法: <body> <table id="dg"></table> </body> </htm ...

  10. Membership三步曲之入门篇 - Membership基础示例

    Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 -  Membership基础示例 Membership三步曲之进阶篇 -  深入剖析Pro ...