首页 > 编程知识 正文

bootstrap4时间控件,时间段选择控件

时间:2023-05-05 22:17:15 阅读:270989 作者:1092

对应上面的三个时间选择器,写法如下:

首先引入css和js:

<link rel="external nofollow" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link rel="external nofollow" href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script><script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

然后html部分:

<div class="row"> <div class='col-sm-6'> <div class="form-group"> <label>选择开始时间:</label> <!--指定 date标记--> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-sm-6'> <div class="form-group"> <label>选择结束时间:</label> <!--指定 date标记--> <div class='input-group date' id='datetimepicker2'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-sm-6'> <div class="form-group"> <label>选择结束时间:</label> <!--指定 date标记--> <div class='input-group date' id='datetimepicker3'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div>

最后js部分:

$('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn'), defaultDate: "1990-1-1" });$(function () { $('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn') }); $('#datetimepicker2').datetimepicker({ format: 'HH:mm', locale: moment.locale('zh-cn') }); $('#datetimepicker3').datetimepicker({ format: 'YYYY-MM-DD HH:mm', locale: moment.locale('zh-tw') });});

解释:

format

日期格式

YYYY-MM-DD:2019-01-10

HH:mm24小时格式

hh:mm12小时格式

YYYY-MM-DD HH:mm 比如:2019-01-01 23:59

HH:mm:ss 带秒数的24小时格式

locale

时间地区zh-cn是中国   

参考:http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201806095166.html

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。