标签：相关 mat span lan for ast tst local ado
导入相关插件
<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, // 默认时间 });
Bootstrap时间选择插件datetimepicker使用
标签：相关 mat span lan for ast tst local ado
原文地址：https://www.cnblogs.com/oldpai/p/9635343.html
