zoukankan      html  css  js  c++  java
  • bootstrap-datepicker实现日期input readonly 标签中选择时间功能

    引用datepicker css,js,zh-CH文件

    ps: 都是基于bootstrap,所以得先引入bootstrap文件才可以使用

       <link href="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script> 
        <script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>   // 日期显示会用到中文
        

    js

    <input readonly name="start-time" class="form-control choice-start-time" type="text" placeholder="开始时间">
    <span>-</span>
    <input readonly name="end-time" class="form-control choice-end-time" type="text" placeholder="结束时间">
    // 选择时间事件
    $(function () {
        var today = new Date();
        var todayStr = today.getFullYear() + '/' + (today.getMonth()+1)
        + '/' + today.getDate();
        var option = {
            'format': 'yyyy/mm/dd',
            'autoclose': true,
            'startDate': '2018/7/10',
            'endDate': todayStr,
            'language': 'zh-CN',
            'todayBtn': 'linked', // 显示一个选择今日的按钮
            'todayHighlight': true, // 当前日期是否高亮
            'showButtonPanel': false, // 是否展示按钮
            'clearBtn': true
    
            // 'startDate': '-3d'
        };
        $('input[name="start-time"]').datepicker(option);
        $('input[name="end-time"]').datepicker(option);
    });
  • 相关阅读:
    【队列】队列的分类和实现
    【JSP】EL表达式语言
    【JSP】JSP的介绍和基本原理
    【JSP】JSP Action动作标签
    【Servlet】关于RequestDispatcher的原理
    【JSP】JSP指令
    【JSP】JSP中的Java脚本
    【算法】表达式求值--逆波兰算法介绍
    C语言指针详解
    移动架构-MVVM框架
  • 原文地址:https://www.cnblogs.com/tangpg/p/9371674.html
Copyright © 2011-2022 走看看