Bootstrap~日期控制

简介:

一个成熟的框架,日期控制是少不了的,在网上也有很多日期控制可以选择,而主框架用了bootstrap,日期控制也当前要用它自己的,

控件地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

GitHub上开源地址:https://github.com/smalot/bootstrap-datetimepicker

在使用datetimepicker之前,先要经过以下几个步骤

1 引用JS脚本库

<script src="/Content/bootstraps/js/bootstrap.js"></script>
<script src="/Content/bootstraps/js/bootstrap-datetimepicker.js"></script>
<script src="/Content/bootstraps/js/bootstrap-datetimepicker.zh-CN.js"></script>

其中bootstrap-datetimepicker.zh-CN.js表示可以使用中文的语言显示日期时间

2 引入CSS类库

<link href="/Content/bootstraps/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstraps/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

3 定义HTML标签

<input class="form_datetime form-control" type="text" value="2016-03-07" size="16">

4 编写datetimepicker事件

<script type="text/javascript">
    $(".form_datetime").datetimepicker({
        format: "yyyy-mm-dd",
        autoclose: true,
        todayBtn: true,
        todayHighlight: true,
        showMeridian: true,
        pickerPosition: "bottom-left",
        language: 'zh-CN',//中文,需要引用zh-CN.js包
        startView: 2,//月视图
        minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
    });    
</script>

注意,有很多朋友都在网上问过,如何只用日期,或者不用时间,因为默认情况下,每次使用datetimepicker选择时,都要选到日间那个级别上,很是不爽,大叔在研究中发展,使用minView这个参数解决了这个问题,它相当于在控制上,最小的显示精度,

0表示分钟(默认),1表示小时,而2表示天,我们把值设为2就不会再出现选择小时的页面了!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:Bootstrap~日期控制,如需转载请自行联系原博主。

目录
相关文章
|
前端开发
bootstrap 插件 字体图标库 按钮库 日期插件
bootstrap 插件 字体图标库 按钮库 日期插件
|
前端开发
bootstrap 日期控件起始日期&结束日期相互约束
bootstrap 日期控件起始日期&结束日期相互约束
288 0
bootstrap 日期控件起始日期&结束日期相互约束
|
前端开发 JavaScript
bootstrap-daterangepicker:最好用的日期范围选择组件
bootstrap-daterangepicker:最好用的日期范围选择组件
566 0
bootstrap-daterangepicker:最好用的日期范围选择组件
|
前端开发
|
Web App开发 前端开发
【问题解决】BootStrap.css与layDate日期选择样式起冲突的解决办法
转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】  问题如图: 给大家看下正常的layDate年份选择图片: 一开始想到的,以为是自己没有将layer.css导入,或者layDate.css没有导入,出现的这个问题,结果发现只要导入layer.css,会自动导入layDate.css的,所以问题不在这里。
1373 0
|
前端开发 JavaScript
bootstrap-daterangepicker:最好用的日期范围选择组件
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/65629720 嗯,在我还没有发现bootstrap-daterangepicker组件时, 在页面需要选择日期范围时,我是傻乎乎的创建两个日期组件。
1170 0
N..
|
2月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
13 0
|
7月前
|
前端开发 容器
|
7月前
|
前端开发 容器