zoukankan      html  css  js  c++  java
  • Bootstrap时间选择插件datetimepicker使用

    导入相关插件

    <link rel="stylesheet" href="/static/plugin/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
    <script src="{% static '/plugin/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js' %}"></script>
    <script src="{% static '/plugin/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>

    相关body代码

    <div class="form-group">
        <label class="col-sm-3 control-label" for="classname">有效时间</label>
        <div class="col-sm-3">
            <input id="starttime" class="form-control" type="text" readonly placeholder="请选择开始时间">
        </div>
        <div class="col-sm-3">
            <input id="endtime" class="form-control" type="text" readonly placeholder="请选择结束时间">
        </div>
    </div>

    相关js代码及解释

    $('#starttime').datetimepicker(
        {
            format: 'yyyy-mm-dd hh:ii:ss', // 显示格式 精确到分
            autoclose: true, // 选完时间后,窗口自动关闭
            todayBtn: true, // 当天日期按钮
            pickerPosition: "bottom-right", // 选择框位置
            startDate: new Date(), //date之前的时间不能选
            daysOfWeekDisabled: [0, 6], // 一周的周六和周天不能选
            minView: 0, //时间精确度 [0-4]分-年
            todayHighlight: true, // 当天日期高亮
            language: 'zh-CN', // 显示语言
            minuteStep: 5, // 最小的分钟区间
            initialDate: true, // 默认时间
        });
    
    $('#endtime').datetimepicker(
        {
            format: 'yyyy-mm-dd hh:ii:ss', // 显示格式 精确到分
            autoclose: true, // 选完时间后,窗口自动关闭
            todayBtn: true, // 当天日期按钮
            pickerPosition: "bottom-right", // 选择框位置
            startDate: new Date(), //date之前的时间不能选
            daysOfWeekDisabled: [0, 6], // 一周的周六和周天不能选
            minView: 0, //时间精确度 [0-4]分-年
            todayHighlight: true, // 当天日期高亮
            language: 'zh-CN', // 显示语言
            minuteStep: 5, // 最小的分钟区间
            //showMeridian:true, // 是否显示上下午
            initialDate: true, // 默认时间
        });
     
     
  • 相关阅读:
    java网络爬虫爬虫小栗子
    浮点数精确表示
    使用yum安装CDH Hadoop集群
    判断奇数,java陷阱
    Long型整数,缄默溢出
    java基础知识点
    java常用指令
    Codeforces Round #275 (Div. 2) D
    区间dp的感悟
    Codeforces Round #386 (Div. 2) C D E G
  • 原文地址:https://www.cnblogs.com/oldpai/p/9635343.html
Copyright © 2011-2022 走看看