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);
    });
  • 相关阅读:
    判断某个目录下半小时内是否有新文件
    centos 多路径下挂载磁盘目录
    rac多路径下添加lun
    FFmpeg笔记
    FFmpeg报错大全
    Eclipse 安装C语言开发环境
    乱码
    FreeSql提示“【主库】状态不可用,等待后台检查程序恢复方可使用。”错误
    JetBrains Rider安装说明
    博客园终于可以使用了
  • 原文地址:https://www.cnblogs.com/tangpg/p/9371674.html
Copyright © 2011-2022 走看看