日期控件:datepicker(bootstrap)支持时分秒

来源:csdn博客 分类: 文章浏览史 发布时间:2020-05-18 12:40:06 最后更新:2020-05-18 浏览:108
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-05-18 12:40:06

记录一下日期控件,datepicker-bootstrap;这个控件支持年月日以及时分秒。


首先需要到官网下载其js、cs样式


2、页面应用:(支持年月日)


<td style="width: 40%">

<label class="col-sm-3 control-label">创建时间</label>

 <div class="col-sm-4">

<input class="form-control input-sm" id="lsc_startdate" name="lsc_startdate" placeholder="起始日期" type="text"></div> 

<label class="col-sm-1 control-label">至</label>

<div class="col-sm-4">
<input class="form-control input-sm" id="lsc_enddate"
name="lsc_enddate" placeholder="结束日期" type="text">
</div>
</td>


<script>

$('#lsc_startdate').datepicker({
format : 'yyyy-mm-dd',
language : 'zh-CN',
autoclose : true,
clearBtn : true,
todayHighlight : true,
endDate : new Date()
}).on( 'changeDate', function(e) {
var startTime = e.date;
$('#lsc_enddate').datepicker( 'setStartDate', startTime);
}); 
    
$('#lsc_enddate').datepicker({
format : 'yyyy-mm-dd',
language : 'zh-CN',
autoclose : true,
clearBtn : true,
todayHighlight : true
}).on( 'changeDate', function(e) {
var endTime = e.date;
$('#lsc_startdate').datepicker('setEndDate', endTime);
$('#lsc_enddate').datepicker( 'setEndDate', new Date());
}); 

</script>



支持至时分秒:

$('#lj_startdate').datetimepicker({

format: 'yyyy-mm-dd hh:ii:ss',
    autoclose: true,
    minView: 0,
    language : 'zh-CN',
    minuteStep:1
}).on('changeDate',function(ev){
        var starttime=$("#lj_startdate").val();
        $("#lj_enddate").datetimepicker('setStartDate',starttime);
        $("#lj_startdate").datetimepicker('hide');
    });
    
$('#lj_enddate').datetimepicker({
format: 'yyyy-mm-dd hh:ii:ss',
    autoclose: true,
    minView: 0,
    language : 'zh-CN',
    minuteStep:1
}).on('changeDate',function(ev){
        var starttime=$("#lj_startdate").val();
        var endtime=$("#lj_enddate").val();
        $("#lj_startdate").datetimepicker('setEndDate',endtime);
        $("#lj_enddate").datetimepicker('hide'); 

   });

链接:https://blog.csdn.net/lanyang123456/article/details/52894548

php技术微信