主要使用bootstrap-datetimepicker小插件实现的日期选择；

1、首先需要引入的js和css文件：

css：

bootstrap.min.css（含有bootstrap 所有css，min.css为压缩版）

bootstrap-datetimepicker.min.css（日期控件所需的样式表）

js：

jquery-min.js（其他版本的jquery也可以）

bootstrap.min.js（含有bootstrap 所有js）

bootstrap-datetimepicker.js（日期控件所需的js）

bootstrap-datetimepicker.zh-CN.js（日期控件中文文件）

说明：引入js时，jquery-min.js必须在bootstrap.min.js之前。后者依托前者。

可以到 git clone git://github.com/smalot/bootstrap-datetimepicker.git 下载以上文件；

2、主要引用如下代码：

//此路径是我本机路径，此处需要用自己文件的目录，引用格式如下：
<script src="../../vendor//jquery.min.js.js" type="text/javascript"></script>
<script src="../../vendor//bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="../../vendor//bootstrap.min.js.js" type="text/javascript"></script>
<link href="../../vendor//bootstrap.min.css.css" rel="stylesheet" type="text/css"/>
<link href="../../vendor//bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"/>
<script src="../../vendor/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>

js代码

<script>
        $('#datetimeStart').datetimepicker({
        format: 'yyyy-mm-dd',  //时间格式,如：yyyy:mm:dd等
        minView:'month',
        language: 'zh-CN',
        autoclose:true,
       // startDate:new Date(),  //此设置主要为选择日期是否从当前时间开始，即不可以选择以前的时间
    });
</script>

html代码：

//此处有一点需要注意，如果不采用calss="form-control"样式，可能会出现选择日期的左右箭头是空白的

<input id="datetimeStart" class="form-control" name="date" style="width:25%">

想了解更多可以去bootstrap官网查看；

用bootstrap日期选择小插件实现日期选择

主要使用bootstrap-datetimepicker小插件实现的日期选择；

1、首先需要引入的js和css文件：

2、主要引用如下代码：

猜你喜欢