专栏首页逸鹏说道05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

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

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

本文分享自微信公众号 - 我为Net狂(dotNetCrazy),作者:dnt

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-05-25

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 码农眼中的数学之~数学基础

    1维直线、2维平面(长宽)、3维空间(长宽高 | xyz轴)、4维时空(xyz轴+时间轴)

    逸鹏
  • Windows无法安装到这个磁盘。请确保在计算机的BIOS菜单中启用了磁盘控制器

    今天一朋友问我这个问题,呃,以前我也遇到过,但忘记记录了,这次就记录一下吧,就懒得打字了,图片里面很清楚了 ? ? ? ? ? 不说点什么的话是不是太水了O(∩...

    逸鹏
  • 【开源】1句代码搞定图片批量上传,无需什么代码功底【无语言界限】

    开源地址:https://github.com/dunitian/LoTUploader WebUploader基础上的封装改善,一句代码全部实现(样式美化,实...

    逸鹏
  • SpringBoot之前端文件管理

    WebJars能使Maven的依赖管理支持OSS的JavaScript库/CSS库,比如jQuery、Bootstrap等。  (1)添加js或者css库 ...

    hbbliyong
  • Flink源码解读系列 | TaskManager启动

    通过启动脚本已经找到了TaskManager 的启动类org.apache.flink.runtime.taskexecutor.TaskManagerRunn...

    暴走大数据
  • 如何找到是哪一个进程占用了某个端口号

    ubuntu@ip-172-31-12-185:-/KOI/Template/front-end$ ng serve --port 3000Port 3000 ...

    Jerry Wang
  • 围棋人机大战明日上演,这份观赛指南请留好

    问耕 假装发自乌镇 量子位 报道 | 公众号 QbitAI ? 柯洁与AlphaGo的围棋人机大战,将于明天正式上演。以下内容是量子位整理的一份观赛指南,以及目...

    量子位
  • FME小技巧-Esri Shapefile乱码

    经常有朋友会问,我的数据,ArcGIS里没问题的,怎么FME一读就乱码了? 划重点:ArcGIS里打开正常!

    数据处理与分析
  • Gartner:2019数据和分析技术十大趋势预测

    增强分析、持续型智能和可解释型人工智能(AI)是未来三到五年内数据和分析技术中最具颠覆性潜力的趋势。

    新智元
  • gulp命令执行报错解决

    薛定喵君

扫码关注云+社区

领取腾讯云代金券