bootstrap datetimepicker 时间选择框 (人人都可以看懂,超级简单使用)

超级无敌简单的时间选择器,简单方便快捷。是心动的感觉鸭。只能说 bootstrap真好。
第一步:首先去官网下载脚本和样式CSS。然后导入。

官网的网址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
(网址要样式的设置和详细介绍)。下载zip包,然后解压后导入项目。
注意: datetimepicker是一个很好用的日期时间选择插件,但是经常会发现点击完之后时间会变成1899年。
但是在js添加这句就可以了鸭。

     forceParse: 0,//设置为0,时间不会跳转1899,会显示当前时间。

第一步:导入样式
//这个是datetimepicker 中文包

第二步:设置input标签

                        <div class="col-sm-2 col-lg-offset-1">
                            <p>DATE</p>
                            <input type="text" id="date" name="datetimepicker" value=" " placeholder="查询年月" class="form-control">
                        </div>

第三步:写入脚本

 <script type="text/javascript">
        $('#date').datetimepicker({
        forceParse: 0,//设置为0,时间不会跳转1899,会显示当前时间。
        language: 'zh-CN',//显示中文
        format: 'yyyymmdd',//显示格式
        minView: "month",//设置只显示到月份
        initialDate: new Date(),//初始化当前日期
        autoclose: true,//选中自动关闭
        todayBtn: true//显示今日按钮
    })
   $("#date").datetimepicker("setDate", new Date() );  //设置显示默认当天的时间
</script>

下面附属图片:
在这里插入图片描述
图一:导入脚本在这里插入图片描述
图二:写input标签
在这里插入图片描述
图三:编写脚本
在这里插入图片描述
图四:效果图

在这里插入图片描述

评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值