前端--bootstrap-datetimepicker 用法总结

1.datetimepicker 常用实例

1.1. 设置默认当天

日期选择器 默认值当天

<script type="text/javascript">

$(document).ready(function () {
    ////日期选择控件
    $("#datetimepicker").datetimepicker({
        todayBtn: "linked",  //日期选择器底部今天按钮，为链接的方式，点击直接跳转到今天
        keyboardNavigation: false,
        forceParse: false,
        calendarWeeks: true,
        autoclose: true,
        format: "yyyy-mm-dd",
        language: 'zh-CN',
        minView : 2,                   //从日开始选择  3（分：0，  时：1 ，日：2，月：3 ，年：4 ）Number, String类型
        initialDate: new Date()        //默认值本日 （根据format的值，确定是 本日还是本月）
    });
</script>

显示日期的文本框 显示 当天

$(function() {
    var myDate = new Date;
    var year = myDate.getFullYear(); //获取当前年
    var mon = myDate.getMonth() + 1; //获取当前月    ------ 注意要加一-----
    var date = myDate.getDate(); //获取当前日
    var nowDate = year + '-' +mon  + '-' +date ;
    // var h = myDate.getHours();//获取当前小时数(0-23)
    // var m = myDate.getMinutes();//获取当前分钟数(0-59)
    // var s = myDate.getSeconds();//获取当前秒
    
    // 文本框赋值方法1
    document.getElementById("txt_datetimepicker").value = nowDate;   
    //// 文本框赋值方法2
    //$("#txt_datetimepicker2").val(nowDate);   
    //// 显示星期几
    //var week = myDate.getDay();
    //var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    //$("#txt_datetimepicker3").val(year + "年" + mon + "月" + date + "日" + weeks[week]);    
})

效果如下：

1.2.开始日期小于 结束日期

https://blog.csdn.net/qq_43173759/article/details/100762324
注意：其实没必要使用日期选择器限制，开始结束日期，可以在点击查询按钮的时候 加个判断，看看开始日期是否大于结束日期

1.3.当前日期，以后的日期不能选，只能选择今天 及以前的日期

1.3.2 今天以后的日期不能选择

  ////日期选择控件--日查询，今天以后的日期不能选择
    $("#datetimepicker").datetimepicker({
        todayBtn: "linked",  //日期选择器底部今天按钮，为链接的方式，点击直接跳转到今天
        keyboardNavigation: false,
        forceParse: false,
        calendarWeeks: true,
        autoclose: true,         //选择一个日期之后是否立即关闭日期选择器
        format: "yyyy-mm-dd",
        endDate: new Date(),    //默认值：结束时间  (大于本月的月份不能选)
        language: 'zh-CN',
        minView : 2,            //从日开始选择  3（分：0，  时：1 ，日：2，月：3 ，年：4 ）Number, String类型
        initialDate: new Date()        //默认值当天 （根据format的值，确定是 本日还是本月）
    });

1.3.2 这个月以后的月份不能选择

////日期选择控件--月查询 ，这个月以后的月份不能选择
$("#datetimepicker_tab2").datetimepicker({
    todayBtn: "linked",
    keyboardNavigation: false,
    forceParse: false,
    calendarWeeks: true,
    autoclose: true,       //选择一个日期之后是否立即关闭日期选择器
    format: "yyyy-mm",
    endDate: new Date(),  //默认值：结束时间  (大于本月的月份不能选)
    startView: 3,         //日期时间选择器打开之后首先显示的视图（分：0，  时：1 ，日：2，月：3 ，年：4 ）
    language: 'zh-CN',
    minView: 3,           //从月开始选择  3（分：0，  时：1 ，日：2，月：3 ，年：4 ）Number, String类型
    initialDate: new Date()       //默认值本月 （根据format的值，确定是 本日还是本月）
});

1.4.bootstrap-datetimepicker 日期插件设置默认初始值为上一个月

1.4.1日期插件设置默认初始值为上一个月

<script type="text/javascript">

//bootstrap日期插件 开始
$('#datetimepicker').datetimepicker({
    format: 'yyyy-mm',
    startView: 'decade',    //表示起始范围  0为日 1为月 2为年 decade年
    minView: '3',           //从日开始选择  分：0，  时：1 ，日：2，月：3 ，年：4 ， Number, String类型
                            //如果想显示年月视图 minView: '3', 如果想显示年视图 minView:'decade'或者'4'
    language: 'zh-CN',
    autoclose: true         //选择一个日期之后是否立即关闭日期选择器
}).on('changeDate',function(ev){
    var datetimepicker = $('#datetimepicker').val();
    $('#datetimepicker').datetimepicker('hide');
});

//当前月份的上一个月
     var d = new Date();
     var y = d.getFullYear();
     var m = d.getMonth();
     var nowDate = y + '-' + m;
     console.log('nowDate',nowDate);
     if(m == 0){
        y = y-1;
        nowDate = y + '-' + 12;
     }
//设置值为当前月份的上一个月
$('#datetimepicker').datetimepicker('setDate', new Date(nowDate)); //把要设置的默认值放入new Date()里面
//日期插件 结束

</script>

————————————————
原文链接：https://blog.csdn.net/yijiupingfan0914/article/details/88335567

1.4.1日期的文本框 设置默认初始值为上一个月

function lastTime(){
            var lastTime=new Date();
            var h=lastTime.getFullYear();
            var m=lastTime.getMonth();
           
          if(m==0){
              h=h-1;
              m=12;
          }
            m= m<10?"0"+m:m; 
            return h+""+m;
        };
        $(document).ready(function() {
            //此处把时间赋值到你设置的value中
            document.getElementById("realMonth").value = lastTime();
        });

————————————————

原文链接：https://blog.csdn.net/qq_41834408/article/details/82787268

1.5 datepicker初始化及设置指定日期范围

https://blog.csdn.net/qq_41515189/article/details/99637432

https://www.jianshu.com/p/ab2a16169bed

1.6 只选择到年月 只选择到年

只选择到年月

////日期选择控件--月查询 ，这个月以后的月份不能选择
$("#datetimepicker_tab2").datetimepicker({
    todayBtn: "linked",
    keyboardNavigation: false,
    forceParse: false,
    calendarWeeks: true,
    autoclose: true,       //选择一个日期之后是否立即关闭日期选择器
    format: "yyyy-mm",
    startView: 3,         //日期时间选择器打开之后首先显示的视图（分：0，  时：1 ，日：2，月：3 ，年：4 ）
    language: 'zh-CN',
    minView: 3,           //从月开始选择  3（分：0，  时：1 ，日：2，月：3 ，年：4 ）Number, String类型
    initialDate: new Date()       //默认值本月 （根据format的值，确定是 本日还是本月）
});

只选择到年

////日期选择控件--月查询 ，这个月以后的月份不能选择
$("#datetimepicker_tab2").datetimepicker({
    todayBtn: "linked",
    keyboardNavigation: false,
    forceParse: false,
    calendarWeeks: true,
    autoclose: true,       //选择一个日期之后是否立即关闭日期选择器
    format: "yyyy",
    startView: 4,         //日期时间选择器打开之后首先显示的视图（分：0，  时：1 ，日：2，月：3 ，年：4 ）
    language: 'zh-CN',
    minView: 4,           //从月开始选择  3（分：0，  时：1 ，日：2，月：3 ，年：4 ）Number, String类型
    initialDate: new Date()       //默认值本月 （根据format的值，确定是 本日还是本月）
});

2.datetimepicker用法总结（详细，参考官网）

目录

    目录
    简述
    官方文档
    选项属性
        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 pickerReferer : 不建议使用
        17 pickerPosition 选择框位置
        18 viewSelect
        19 showMeridian 是否显示上下午
        20 initialDate 初始化日期时间

1. 简述

最近因为项目，在用Bootsrapt写一些前台，遇到datetimepicker时，在使用方面出现了一些问题，索性记录下来，能用到看看，用不到留着自己参考。

2. 官方文档

附上官方文档链接，官网地址。

官方文档大部分都是中文，已经不错了，但是还是在很多问题上没有给出例子。博主，把一些常用的在后文附上，有错误请不吝赐教。

3. 选项（属性）

总体调用格式为：

html中：

<div class="input-group date" id="datetimepicker" data-date-format="yyyy-mm-dd">
       <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
       <input type="text" size="16" class="form-control" value="" />
   </div>

js代码中：

<script type="text/javascript">

$(document).ready(function () {

    ////日期选择控件
    $("#datetimepicker").datetimepicker({
        todayBtn: "linked",              //选择器 今天按钮是否能点击 跳转到当天日期
        keyboardNavigation: false,      //
        forceParse: false,              //
        calendarWeeks: true,            //
        autoclose: true,                //
        format: "yyyy-mm-dd",           //设置日期格式
        //startDate: new Date(),        //今天以前的日期不能选
        language: 'zh-CN',              //
        minView : 2,                    //最小能选择到 天
        initialDate: new Date()         //
        
    });
</script>

3.1 format — 格式

String类型
默认值: ‘mm/dd/yyyy’
这个是最重要最常用的属性之一了。控制显示格式就是固定值得个性化搭配。
比如，显示 2016-04-21 19：21

$("#datetimepicker").datetimepicker({
        format: 'yyyy-mm-dd hh:ii'
        });

又比如，你就是喜欢反人类的格式，那你可以这样：

$("#datetimepicker").datetimepicker({
        format: 'hh-yyyy-ii mm:dd'
        });

这个是扯淡的，就是个意思，你可以自己设计样式，但是里面的字母都代表不同属性：

3.2 weekStart — 一周从哪一天开始

Integer类型 默认值：0
一周从哪一天开始。0（星期日）到6（星期六）
例如：

$("#datetimepicker").datetimepicker({
        weekStart: 3
});

效果：

3.3 startDate — 开始时间

Date类型 默认值：开始时间

之前的日期都不能选择，这个时间之后的时间才能选择。

咱们做一个常用的Demo，就是只能选现在之后的时间：

例如：

var date = new Date();
$("#datetimepicker").datetimepicker({
        startDate: date 
 });

效果卡件上图中的灰色部分：

3.4 endDate— 结束时间

Date类型 ，默认值：结束时间

这个时间后面的不能再选择。 用法同上，不再赘述。

3.5 daysOfWeekDisabled — 一周的周几不能选

String, Array类型 默认值：”, []

0（星期日）到6（星期六）
可以有多个。

例如：

$("#datetimepicker").datetimepicker({
        daysOfWeekDisabled: [0,4,6]
        });

或者：

$("#datetimepicker").datetimepicker({
        daysOfWeekDisabled: '0,4,6'
        });

效果：

3.6 autoclose — 选完时间后是否自动关闭

Boolean类型 默认值：false

当选择一个日期之后是否立即关闭此日期时间选择器。

3.7 startView — 选完时间首先显示的视图

Number, String类型 默认值：2, ‘month’

日期时间选择器打开之后首先显示的视图。可接受的值：

3.8 minView — 最精确的时间

Number, String类型 默认值：0, ‘hour’

日期时间选择器所能够提供的最精确的时间选择视图。可接受的值：

例如：

$("#datetimepicker").datetimepicker({
        minView : 2
 });

上例中选完日后，不在出现下级时间选择。

3.9 maxView — 最高能展示的时间

Number, String类型 默认值：4, ‘decade’

日期时间选择器最高能展示的选择范围视图。用法同上，不在赘述。

3.10 todayBtn — 当天日期按钮

Boolean, “linked”类型
默认值：false’

如果此值为true 或 “linked”，则在日期时间选择器组件的底部显示一个 “Today” 按钮用以选择当前日期。如果是true的话，”Today” 按钮仅仅将视图转到当天的日期，如果是”linked”，当天日期将会被选中。

例如：

$("#datetimepicker").datetimepicker({
        todayBtn : true
        });

效果：

3.11 todayHighlight — 当天日期高亮

Boolean类型 默认值：false

如果为true, 高亮当前日期。不再举例。

3.12 keyboardNavigation — 方向键改变日期

Boolean类型 默认值：false

是否允许通过方向键改变日期。不再举例。

3.13 language — 语言

String类型 默认值：’en’
中文：’zh-CN’

注意引用顺序：1 css文件 2 min.js 3 zh-CN.js (最后引用语言js文件)

3.14 forceParse — 强制解析

Boolean类型
默认值：true

就是你输入的可能不正规，但是它胡强制尽量解析成你规定的格式（format）
当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。

3.15 minuteStep — 步进值

Number类型 默认值：5
此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。
此数值被当做步进值用于构建小时视图。就是最小的视图是每5分钟可选一次。是以分钟为单位的。

3.16 pickerPosition — 选择框位置

String类型 默认值：’bottom-right’

还支持 : ‘bottom-left’，’top-right’，’top-left’

可以试试看，他拿出位置会发生变化。
此选项当前只在组件实现中提供支持。通过设置选项可以将选择器放到输入框下方。

3.17 pickerReferer : 不建议使用

3.18 viewSelect

Number or String. 默认值: same as minView (supported values are: ‘decade’, ‘year’, ‘month’, ‘day’, ‘hour’)
Number类型 或者 String类型 默认值与minView 相同 （支持的值为：分0 时1 日2 月3 年4）
With this option you can select the view from which the date will be selected. By default it’s the last one, however you can choose the first one, so at each click the date will be updated.
有了这个选项，你可以选择从该日起将被选中的视图。默认情况下它是最后一个，但你可以选择第一个，所以在每次点击的日期将被更新。

3.19 showMeridian — 是否显示上下午

Boolean类型 默认值：false

在日期和小时选择界面，出现上下午的选项

3.20 initialDate — 初始化日期时间

Date or String类型 默认值：new Date()

在打开时默认选当时的时间，显示在View中。也可以设置其他日期

。
。
。

参考于：https://www.cnblogs.com/dazhangli/p/9002329.html