bootstrap datetimepicker日期控件使用方法

2024-10-14 08:32:23

1、页面head头部引入css文件<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css" rel="stylesheet">(楼主这里用的是在线引入,也可以自己下载)

bootstrap datetimepicker日期控件使用方法

3、div添加,起始日期、结束日期设置你同id<div class="cell"><sp锾攒揉敫an>日期周期</span><input size="16" type="text" id="datetimeStart" readonly class="form_datetime form-control"><span> 至 </span><input size="16" type="text" id="datetimeEnd" readonly class="form_datetime form-control"></div>

bootstrap datetimepicker日期控件使用方法

5、设置开始时间配置$("#datetimeStart").datetimepicker({format: 'yyyy-mm-dd',minView:'month',language: 'zh-CN',autoclose:true,startDate:new Date()}).on("click",function(){$("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())});

bootstrap datetimepicker日期控件使用方法

7、运行HTML页面即可

bootstrap datetimepicker日期控件使用方法
猜你喜欢