Bootstrap3 datetimepicker控件之smalot的使用

逃离我推掉我的手 2022-05-24 02:51 277阅读 0赞

**一、说明**

smalot 版的datetimepicker控件是对原有的[bootstrap-datetimepicker 项目][bootstrap-datetimepicker] 改进增强。

原项目对于选择年份、选择月份没做处理。

Git源代码地址：[https://github.com/smalot/bootstrap-datetimepicker][https_github.com_smalot_bootstrap-datetimepicker]

CSDN地址：[http://www.bootcdn.cn/smalot-bootstrap-datetimepicker/][http_www.bootcdn.cn_smalot-bootstrap-datetimepicker]

官网：[https://www.malot.fr/bootstrap-datetimepicker/][https_www.malot.fr_bootstrap-datetimepicker]

中文网：[http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm][http_www.bootcss.com_p_bootstrap-datetimepicker_index.htm]

**引用如下：**

**二、使用示例：**

**1.选择到时间**

$(function () {
        //选择到分钟
        $('#date1').datetimepicker({
            format: 'yyyy-mm-dd hh:ii', //格式设置
            language: 'zh-CN',  //日期
        }).on('changeDate', function (ev) {
            console.info($('#date1').val()); //获取选择结果，2018-05-05 20:10
            console.info(ev.date);//返货js Date 类型GMT格式 ，Thu May 17 2018 10:30:38 GMT+0800 (中国标准时间)
            console.info(ev.date.valueOf());//返回 数字格式时间，1526524238000
        });
    });

**![20180518210133364][]![20180518210139173][]![20180518210144468][]**

**2.选择月份处理**

//选择到分钟
    $('#date2').datetimepicker({
        format: 'yyyy-mm', //格式设置
        language: 'zh-CN',  //日期
        startView: 3, //开始使用月份面板
        minView: 3, //选择到月份
        autoclose: true  //是否自动关闭
    });

![20180518210149831][]

常用参数：

*  1 format 格式
 *  2 weekStart 一周从哪一天开始
 *  3 startDate 开始时间
 *  4 endDate 结束时间
 *  5 daysOfWeekDisabled 一周的周几不能选
 *  6 autoclose 选完时间后是否自动关闭
 *  7 startView 选完时间首先显示的视图
 *  8 minView 最精确的时间
 *  9 maxView 最高能展示的时间
 *  10 todayBtn 当天日期按钮
 *  11 todayHighlight 当天日期高亮
 *  12 keyboardNavigation 方向键改变日期
 *  13 language 语言
 *  14 forceParse 强制解析
 *  15 minuteStep 步进值
 *  16 pickerPosition 选择框位置
 *  17 showMeridian 是否显示上下午
 *  18 initialDate 初始化日期时间

[https://blog.csdn.net/hizzyzzh/article/details/51212867][https_blog.csdn.net_hizzyzzh_article_details_51212867]

#### [Bootstrap 模态框垂直居中处理][Bootstrap] ####

#### [Bootstrap Table使用整理（六）-常用操作][Bootstrap Table_-] ####

[bootstrap-datetimepicker]: https://github.com/eternicode/bootstrap-datepicker
[https_github.com_smalot_bootstrap-datetimepicker]: https://github.com/smalot/bootstrap-datetimepicker
[http_www.bootcdn.cn_smalot-bootstrap-datetimepicker]: http://www.bootcdn.cn/smalot-bootstrap-datetimepicker/
[https_www.malot.fr_bootstrap-datetimepicker]: https://www.malot.fr/bootstrap-datetimepicker/
[http_www.bootcss.com_p_bootstrap-datetimepicker_index.htm]: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
[20180518210133364]: https://img-blog.csdn.net/20180518210133364
[20180518210139173]: https://img-blog.csdn.net/20180518210139173
[20180518210144468]: /images/20220524/5ad4eda6243b4f88a6a7e6ebf0c036a9.png
[20180518210149831]: /images/20220524/8abada72732d48ae881fe9fc567ce5f9.png
[https_blog.csdn.net_hizzyzzh_article_details_51212867]: https://blog.csdn.net/hizzyzzh/article/details/51212867
[Bootstrap]: https://blog.csdn.net/u011127019/article/details/78641594
[Bootstrap Table_-]: https://blog.csdn.net/u011127019/article/details/76691479