bootstrap配合datetimepicker实现漂亮的日期选择功能

By | 2020年6月9日

作为一个后端程序员,自从接触bootstrap前端框架开发后台界面后,逐渐喜欢上bootstrap了,她的功能很强大,如果会使用的话,使用起来也很方便;

这不最近需要用到日期插件了,然后就在bootstrap插件库中找到了datetimepicker这么一个插件,使用起来很方便,而且界面也很好看。

bootstrap datetimepicker日期插件界面演示

bootstrap datetimepicker具体使用方法:

datetimepicker插件下载地址:https://github.com/flavienlaurent/datetimepicker

//引入css以及js文件,当然了,前提是引入bootstrap js及css文件,这个就不多说了
<link href="../common/js/bootstrap/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="./common/js/bootstrap/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="./common/js/bootstrap/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>  <!--汉化包-->

//日期显示
<div class="input-group">
     <span class="input-group-addon">开始时间</span>
     <input type="text" class="form-control" id='act_st_time'>
     <span class="input-group-addon">
           <span class="glyphicon glyphicon-calendar"></span>
     </span>
</div>

//js调用部分
<script type="text/javascript">
$('#act_st_time').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',  //日期显示格式
        language:'zh-CN'  //转换成汉语模式
});
</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注