zoukankan      html  css  js  c++  java
  • bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件

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


    </style>
    </head>
    <body>
    <p>主体部分</p>
    <input type="text" class="picker" placeholder="请选择日期" />

    <div >
    时间插件是组合用法(注意引用是不同的!)

    1.公用部分
    css: bootstrap.min.css
    js:jquery-1.10.2.min.js

    2特有部分
    datatime组合
    css:bootstrap-datetimepicker.min.css
    js:bootstrap-datetimepicker.js
    bootstrap-datetimepicker.zh-CN.js
    $(".picker").datetimepicker({format: 'yyyy-mm-dd hh:ii'//日期格式})

    date组合
    css:bootstrap-datepicker.min.css
    js:bootstrap-datepicker.js
    bootstrap-datepicker.zh-CN.js
    $(".picker").datepicker({format: 'yyyy-mm-dd'//日期格式})

    time组合
    css:bootstrap-timepicker.min.css
    js:bootstrap-timepicker.js
    bootstrap-datepicker.zh-CN.js
    $(".picker").timepicker({format: 'hh:ii:ss'//日期格式})

    date、time都是由datetime简化而来,因此datetime更通用。

    注意使用date组合时,可能会与原有js、css冲突,可以注释看看
    <!--<link rel="stylesheet" href="__PUBLIC__/Assets/css/bootstrap.min.css">-->
    <!--<script src="__PUBLIC__/Assets/js/jquery-1.10.2.min.js"></script>-->
    </div>

    </body>

    1.公用部分
    <link rel="stylesheet" href="__PUBLIC__/Assets/css/bootstrap.min.css">
    <script src="__PUBLIC__/Assets/js/jquery-1.10.2.min.js"></script>

    2特有部分
    <!--datatime组合-->
    <link rel="stylesheet" href="__PUBLIC__/Assets/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <script src="__PUBLIC__/Assets/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script src="__PUBLIC__/Assets/js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript">
    $(function () {
    $(".picker").datetimepicker({
    language: "zh-CN",
    autoclose: true,//选中之后自动隐藏日期选择框
    clearBtn: true,//清除按钮
    todayBtn: true,//今日按钮
    format: 'yyyy-mm-dd hh:ii'//日期格式
    // format: 'yyyy-mm-dd '//可行但操作麻烦
    });
    });
    </script>

    <!--date组合-->
    <!--<link rel="stylesheet" href="../../../../Public/Assets/css/datepicker.css">-->
    <!--<script src="../../../../Public/Assets/js/date-time/bootstrap-datepicker.min.js"></script>-->
    <!--<script src="../../../../Public/Assets/js/date-time/locales/bootstrap-datepicker.zh-CN.js"></script>-->
    <script type="text/javascript">
    // $(function () {
    // $(".picker").datepicker({
    // language: "zh-CN",//语言
    // autoclose: true,//选中之后自动隐藏日期选择框
    // clearBtn: true,//清除按钮
    // todayBtn: true,//今日按钮
    // format: 'yyyy-mm-dd'//日期格式
    // });
    // });
    </script>

    <!--time组合-->
    <!--<link rel="stylesheet" href="../../../../Public/Assets/css/bootstrap-timepicker.css">-->
    <!--<script src="../../../../Public/Assets/js/date-time/bootstrap-timepicker.min.js"></script>-->
    <script type="text/javascript">
    // $(function () {
    // $(".picker").timepicker({
    // language: "zh-CN",
    // autoclose: true,//选中之后自动隐藏日期选择框
    // clearBtn: true,//清除按钮
    // todayBtn: true,//今日按钮
    // format: 'hh:ii:ss'//日期格式
    // });
    // });
    // //没找到对应的汉化包。
    </script>



    </html>

  • 相关阅读:
    成员变量、类变量、局部变量的区别
    微服务学习笔记二:Eureka服务注册发现
    微服务学习笔记一:Spring Cloud简介
    Java集合篇六:Map中key值不可重复的测试
    重写Euqals & HashCode
    Java集合篇五:HashMap
    Java集合篇四:Map的基本应用
    Java集合篇三:Vector
    Java集合篇二:LinkList
    Java集合篇一:ArrayList
  • 原文地址:https://www.cnblogs.com/hao-1234-1234/p/7039859.html
Copyright © 2011-2022 走看看