datetimepicker使用

最新推荐文章于 2024-05-11 17:20:35 发布

lilifly123

最新推荐文章于 2024-05-11 17:20:35 发布

阅读量789

点赞数

分类专栏：前端文章标签： bootstrap javascript 前端

原文链接：https://blog.csdn.net/freedomVenly/article/details/84861300?spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-84861300-blog-94666449.pc_relevant_multi_platform_whitelistv3&depth_1-utm_

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

日期时间选择器：

官方详情:
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

常用代码示例：
（官方的都是按国外的格式，弄了几个国内格式的示例）

Title

<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>

    <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>

其他配置:

$(‘#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隐藏
});
————————————————
版权声明：本文为CSDN博主「freedom_文」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/freedomVenly/article/details/84861300