bootstrap datetimepicker 日期插件详细使用方法 + 24小时 / 年月 示例

在这里插入图片描述
日期时间选择器:

官方详情:
http://www.bootcss.com/p/bootstrap-datetimepicker/


相关的CSS和js文件:

CSS: bootstrap.css 、bootstrap-datetimepicker.css

JS: jquery.min.js (jQuery压缩版)、bootstrap.js、bootstrap-datetimepicker.min.js、bootstrap-datetimepicker.zh-CN.js(中文翻译)


下载文件:
https://github.com/smalot/bootstrap-datetimepicker/archive/master.zip


常用代码示例: 在这里插入图片描述
(官方的都是按国外的格式,弄了几个国内格式的示例)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" media="screen">
    <style>
        #d1{
            position: relative;
            display: block;
            width: 200px;
            margin: 50px auto;
        }
    </style>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-datetimepicker.min.js"></script>
    <script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<body>

<div id="d1">
    <fieldset>

        <div class="control-group">
            <label class="control-label">年月日</label>
            <!--各自通过class名查找下面对应的JS,  这里是form_datetime-->
            <div class="controls input-append date form_datetime" data-date="" data-date-format="yyyy-MM-dd" data-link-field="dtp_input1" data-link-format="yyyy-MM-dd">
                <input size="16" type="text" value="" readonly>
                <span class="add-on"><i class="icon-remove"></i></span>
                <span class="add-on"><i class="icon-th"></i></span>
            </div>
            <input type="hidden" id="dtp_input1" value="" /><br/>
        </div>


        <div class="control-group">
            <label class="control-label">月</label>
            <!--各自通过class名查找下面对应的JS,  这里是form_date-->
            <div class="controls input-append date form_date" data-date="" data-date-format="yyyy-MM" data-link-field="dtp_input2" data-link-format="yyyy-MM">
                <input size="16" type="text" value="" readonly>
                <span class="add-on"><i class="icon-remove"></i></span>
                <span class="add-on"><i class="icon-th"></i></span>
            </div>
            <input type="hidden" id="dtp_input2" value="" /><br/>
        </div>


        <div class="control-group">
            <label class="control-label">年月日时分秒</label>
            <!--各自通过class名查找下面对应的JS,  这里是form_time-->
            <div class="controls input-append date form_time" data-date="" data-date-format="yyyy-mm-dd hh:ii:ss" data-link-field="dtp_input3">
                <input size="16" type="text" value="" readonly>
                <span class="add-on"><i class="icon-remove"></i></span>
                <span class="add-on"><i class="icon-th"></i></span>
            </div>
            <input type="hidden" id="dtp_input3" value="" /><br/>
        </div>
		<div class="control-group">
            <label class="control-label">24小时 ——年月日时分</label>
            <div class="controls input-append date time_new">
                <input size="16" type="text" value="" readonly>
                <span class="add-on"><i class="icon-remove"></i></span>
                <span class="add-on"><i class="icon-th"></i></span>
            </div>
        </div>
    </fieldset>
</div>


<script type="text/javascript">

    //年月日
    $('.form_datetime').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });

    //月
    $('.form_date').datetimepicker({
        format: 'yyyy-mm',
        autoclose: true,
        todayBtn: true,
        startView: 'year',
        minView:'year',
        maxView:'decade',
        language:  'zh-CN'
    });

    //年月日时分秒
    $('.form_time').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        maxView:4,
        forceParse: 0,
        showMeridian: 1
    });

	//24小时 ——年月日时分
	$(".time_new").datetimepicker({
        format: "yyyy-mm-dd hh:ii",
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        maxView:4,
    });
</script>
</body>
</html>


示例图:
在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


其他配置:

$('#datetimepicker').datetimepicker({
     value: ''                      // 设置当前datetimepicker的值
     rtl: false,                    // false   默认显示方式   true timepicker和datepicker位置变换
     format:    'Y/m/d H:i',        // 设置时间年月日时分的格式 如: 2016/11/15 18:00
     formatTime:    'H:i',          // 设置时间时分的格式
     formatDate:    'Y/m/d',        // 设置时间年月日的格式
     pickerPosition:'top-right',   //设置弹框的位置
     startDate:    false,           // new Date(), '1986/12/08', '-1970/01/05','-1970/01/05',
     step: 10,                      // 设置时间时分的间隔
     closeOnDateSelect: false,      // true 设置datepicker可点击   false 设置datepicker不可点击 实际上可以双击
     closeOnTimeSelect: true,       // true 设置timepicker可点击   false 设置timepicker不可点击 
     closeOnWithoutClick: true,     // true 设置点击input可以隐藏datetimepicker   false 设置点击input不可以隐藏datetimepicker  
     closeOnInputClick: true,       // true 设置点击input可以隐藏datetimepicker   false 设置点击input不可以隐藏datetimepicker  (会有闪动 先隐藏 再显示)
     timepicker: true,              // true 显示timepicker   false 隐藏timepicker
     datepicker: true,              // true 显示datepicker   false 隐藏datepicker
     weeks: false,                  // true 显示周数   false 隐藏周数
     defaultTime: false,            // 如果输入值为空 可用来设置默认显示时间 use formatTime format (ex. '10:00' for formatTime:    'H:i') 
     defaultDate: false,            // 如果输入值为空 可用来设置默认显示日期 use formatDate format (ex new Date() or '1986/12/08' or '-1970/01/05' or '-1970/01/05')
     minDate: false,                // 设置datepicker最小的限制日期   如:2016/08/15
     maxDate: false,                // 设置datepicker最大的限制日期   如:2016/11/15
     minTime: false,                // 设置timepicker最小的限制时间   如:08:00
     maxTime: false,                // 设置timepicker最大的限制时间   如:18:00
     allowTimes: [],                // 设置timepicker显示的时间   如:allowTimes:['09:00','11:00','12:00','21:00']
     opened: false,                 // false默认打开datetimepicker可关闭  true打开datetimepicker后不可关闭
     initTime: true,                // 设置timepicker默认时间   如:08:00
     inline: false,                 // ture设置datetimepicker一直显示
     theme: '',                     // ture设置datetimepicker显示样式 如: 'dark'
     withoutCopyright: true,        // ture默认隐藏左下角'xdsoft.net'链接  false 显示左下角'xdsoft.net'链接 
     inverseButton: false,          // false 默认   true datepicker的上一月和下一月功能互换  timepicker的上下可点击按钮功能互换
     hours12: false,                // true设置12小时格式  false设置24小时格式
     next: 'xdsoft_next',           // 设置datepicker上一月按钮的样式
     prev : 'xdsoft_prev',          // 设置datepicker下一月按钮的样式
     dayOfWeekStart: 0,             // 设置默认第-列为周几 如:0 周日  1 周一
     parentID: 'body',              // 设置父级选择器
     timeHeightInTimePicker: 25,    // 设置timepicker的行高
     timepickerScrollbar: true,     // ture设置timepicker显示滑动条  false设置timepicker不显示滑动条
     todayButton: true,             // ture显示今天按钮  false不显示今天按钮   位置在datepicker左上角
     prevButton: true,              // ture显示上一月按钮  false不显示上一月按钮   位置在datepicker左上角
     nextButton: true,              // ture显示下一月按钮  false不显示下一月按钮   位置在datepicker又上角
     scrollMonth: true,             // ture 设置datepicker的月份可以滑动  false设置datepicker的月份不可以滑动
     lazyInit: false,               // 翻译: 初始化插件发生只有当用户交互。大大加速插件与大量的领域的工作
     mask: false,                   // 使用输入掩码。真正的-自动生成一个字段的“格式”的面具,从0到9的数字,设置为值的最高可能的数字。例如:第一个小时的数字不能大于2,而第一位数字不能大于5  如:{mask:'9999/19/39 29:59',format:'Y/m/d H:i'}
     validateOnBlur: true,          // 失去焦点时验证datetime值输入,。如果值是无效的datetime,然后插入当前日期时间值
     yearStart: 1950,               // 设置最小的年份   
     yearEnd: 2050,                 // 设置最大的年份
     monthStart: 0,                 // 设置最小的月份
     monthEnd: 11,                  // 设置最大的月份
     roundTime: 'round',            // 设置timepicker的计算方式  round四舍五入 ceil向上取整 floor向下取整
     allowDateRe : null,            // 设置正则表达式检查日期 如:{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }
     disabledDates : [],            // 设置不可点击的日期  如:disabledDates: ['21.11.2016','22.11.2016','23.11.2016','24.11.2016','25.11.2016','26.11.2016']
     disabledWeekDays: [],          // 设置不可点击的星期  如:disabledWeekDays:[0,3,4]
     yearOffset: 0,                 // 设置偏移年份  如:2 代表当前年份加2  -2  代表当前年份减2
     beforeShowDay: null,           // 显示datetimepicker之前可调用的方法  {beforeShowDay:function(d) {console.log("bsd"); } }
     enterLikeTab: true,            // tab按键均可使datetimepicker关闭  true点击回车键可使datetimepicker关闭 false点击回车键不可使datetimepicker关闭 
     showApplyButton: false         // 相当于确定按钮  true显示  false隐藏
});
  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: bootstrap-datetimepicker是一个可定制的日期选择器插件,可以帮助我们在网页中添加日期选择功能。它使用Bootstrap风格的样式,并提供了丰富的选项和配置来满足不同的需求。 通过bootstrap-datetimepicker,我们可以轻松地自定义日期样式。首先,我们可以选择不同的主题来改变整体的样式,例如light主题和dark主题。其次,我们可以设置日期选择框的大小和位置,以适应不同的布局。还可以设置日期的格式,包括日、时分秒等不同精度。此外,我们还可以设置各个部分的颜色和字体样式,以满足个性化的需求。 除了基本的样式设置外,bootstrap-datetimepicker还提供了其他一些高级功能来增强用户体验。例如,我们可以设置日期范围限制,禁止选择过去的日期或将来的日期。还可以设置起始日期和结束日期,限制用户只能在指定的时间段选择日期。此外,我们可以使用快速选择按钮,让用户可以一键选择最近几天、最近几个或最近几日期。 总之,bootstrap-datetimepicker通过提供丰富的选项和配置,可以帮助我们设计出符合我们需求的日期样式。无论是简单的日期选择功能还是复杂的日期范围限制,bootstrap-datetimepicker都能满足我们的需求,并且具有良好的用户体验。 ### 回答2: bootstrap-datetimepicker是一个基于Bootstrap框架的日期选择器插件。它提供了丰富的日期样式供用户选择。 首先,bootstrap-datetimepicker支持多种日期格式。你可以通过配置选项来指定日期显示格式,例如:"yyyy-mm-dd"表示日期--日的形式显示,"dd/mm/yyyy"则表示日期以日//的形式显示。 其次,该插件还支持时间的选择。你可以选择是否显示时间,以及时间的显示格式。比如,你可以使用"hh:ii"来显示小时和分钟,或者使用"hh:ii:ss"来显示小时、分钟和秒。 此外,bootstrap-datetimepicker还具有一些其他的日期样式设置。其中包括: 1. 可以设置日期的起始和结束范围,限定用户只能选择某个范围内的日期。 2. 可以设置日期的禁用状态,禁止用户选择某些特定日期。 3. 可以设置日期的选择模式,包括单个日期选择、多个日期选择以及范围选择等。 最后,bootstrap-datetimepicker还提供了丰富的自定义选项,你可以根据自己的需求来定义日期的样式。比如,你可以修改日期选择器的主题颜色、字体样式、边框样式等。 总的来说,bootstrap-datetimepicker提供了许多灵活的日期样式设置,可以满足不同用户的需求,使日期选择更加方便、美观。 ### 回答3: bootstrap-datetimepicker是一个基于Bootstrap框架的日期选择插件,可以方便地在网页中添加日期选择功能。 在使用bootstrap-datetimepicker时,可以通过设置不同的样式来定制日期选择器的外观。以下是一些常用的日期样式说明: 1. 格式:可以通过设置format属性来定义日期显示格式。例如,format: 'yyyy-mm-dd'将日期--日的形式显示。 2. 语言:可以通过设置language属性来指定日期选择器的语言。例如,language: 'zh-CN'将日期选择器的语言设置为简体中文。 3. 星期显示:可以通过设置weekStart属性来定义星期的起始日。例如,weekStart: 1将星期的起始日设置为周一。 4. 默认日期:可以通过设置initialDate属性来指定日期选择器的默认日期。例如,initialDate: '2022-01-01'将默认日期设置为202211日。 5. 最小日期和最大日期:可以通过设置minDate和maxDate属性来限制可选择的日期范围。例如,minDate: '2022-01-01'和maxDate: '2022-12-31'将日期范围限制在2022内。 6. 显示周数:可以通过设置calendarWeeks属性来决定是否显示周数。例如,calendarWeeks: true将显示每周的周数。 以上仅为一些常用的日期样式设置,bootstrap-datetimepicker还有许多其他样式设置参数,通过灵活使用这些参数,可以根据需要定制出符合自己网页风格的日期选择器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值