30dateTimePicker

<!-- 
    在3.x的版本使用：
        官网：https://www.malot.fr/bootstrap-datetimepicker/ 
        中文翻译：https://www.bootcss.com/p/bootstrap-datetimepicker/
 -->
<!-- 需要引入css和js -->
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="js/bootstrap-datetimepicker.js"></script>

1、基本属性

<div class="container">
    <div class="row">
        <div class="col">
            <div class="form-group form-inline">
                <label for="datetime">日期：</label>
                <input type="text" class="form-control datetime" id="datetime"> <!-- class的datetime是自己给的 -->
            </div>
        </div>
    </div>
</div>
<script>
    //设置中文
    ; (function ($) {
                $.fn.datetimepicker.dates['zh-CN'] = {
                    days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
                    daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                    daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
                    months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    today: "今天",
                    suffix: [],
                    meridiem: ["上午", "下午"]
                };
            }(jQuery));
    $('.datetime').datetimepicker({
            //格式化日期
            format: 'yyyy-mm-dd hh:ii',     //小时分钟
            format: 'yyyy-mm-ddThh:ii',     //T:表示后面是真实时间
            format: 'yyyy-mm-dd hh:ii:ss',  //时分秒
            format: 'yyyy-mm-dd hh:ii:ssZ', //Z:本地时间的时区
            format: 'yyyy-mm-dd hh:ii:ss P',//P：大写的am和pm
            format: 'yyyy-mm-dd H:ii:ss p', //p：小写的am和pm  H：十二小时制
            format: 'yyyy-m-dd',            //月份不补0
            format: 'yyyy-mm-dd',
            weekStart: 1,   //一周从哪一天开始，0-6（周日-周六）
            /* startDate:new Date(),    //能够选择到的开始日期
            endDate:new Date(2020,1,1), //能够选择到的结束日期：月份从0开始，所以是2月1号 */
            daysOfWeekDisabled: [1, 3, 5],  //一周里周几不能选择到（字符串和数组都可）
            autoclose: true,    //当选择到一个日期后，是否自动关闭日期选择器
            startView: 0,   //0或者'hour'：从小时视图开始，选分
            startView: 1,   //1或者'day'：从天视图开始，选小时
            startView: 2,   //2或者'month'：从月视图开始，选天（这是默认的）
            startView: 3,   //3或者'year'：从年视图开始，选月
            startView: 4,   //4或者'decade'：从十年视图开始，选年
            startView: 2,   //还原
            //日期时间选择器最低能够选择到的日期类型
            minView: 0,     //0或者'hour'：能选择到分（这是默认的）        
            minView: 1,     //1或者'day'：能选择到小时       
            minView: 2,     //2或者'month'：能选择到天      
            minView: 3,     //3或者'year'：能选择到月       
            minView: 4,     //4或者'decade'：能选择到年
            minView: 0,     //还原
            //最大能够选择到的日期类型。是通过点击头部的日期来选择。演示234就够了，最大的值权限为2了
            maxView: 0,     //0或者'hour'：能选择到分   
            maxView: 1,     //1或者'day'：能选择到小时       
            maxView: 2,     //2或者'month'：能选择到天      
            maxView: 3,     //3或者'year'：能选择到月       
            maxView: 4,     //4或者'decade'：能选择到年（这是默认的）
            todayBtn: true, //是否显示回到今天的按钮
            keyboardNavigation: true,   //是否可以通过键盘选择日期
            language: 'zh-CN',  //语言选择
            minuteStep: 10, //最小分钟间隔数，默认为5
            pickerPosition: 'bottom-right',     //日期组件显示的位置
            showMeridian: true, //在日期界面上是否显示上下午,默认false
        });
</script>

2、方法和事件

<script>
    //方法
        //datetimepicker：初始化
        /* $('.datetime').datetimepicker('remove'); //移除日期时间选择器组件 
        $('.datetime').datetimepicker('show');  //显示日期时间选择器组件 
        setTimeout(function(){
            $('.datetime').datetimepicker('hide');  //隐藏日期时间选择器组件 
        },5000); */
        $('.datetime').datetimepicker('setStartDate', '2019-10-01');//设置日期选择器的起始日期
        $('.datetime').datetimepicker('setEndDate', '2020-10-01');//设置日期选择器的结束日期
        $('.datetime').datetimepicker('setDaysOfWeekDisabled', [0, 6]);//设置不可选的星期
        //事件
        $('.datetime').datetimepicker() //先初始化
            //日期选择器显示事件
            .on('show', function () {
                console.log('日期选择器组件显示了');
            })
            //日期选择器隐藏事件
            .on('hide', function () {
                console.log('日期选择器组件隐藏了');
            })
            //日期变动事件
            .on('changeDate', function () {
                console.log('日期变动了');
            })
            //年份变动事件
            .on('changeYear', function () {
                console.log('年份变动了')
            })
            //月份变动事件
            .on('changeMonth', function () {
                console.log('月份变动了')
            })
            //超出选择日期范围事件
            .on('outOfRange', function () {
                console.log('你选择的日期超出范围了')
            })
</script>