文章目录
一 bootstrap 时间日期日历控件datetimepicker
应用
涉及的样式
图片样式展示
pc
手机
属性及使用示例
可用属性列表
示例1:2017-03-30 上午 09:50
示例2：2017-03-30
示例3：仅选择时间
2.3 weekStart 一周从那一天开始
2.4 startDate 开始时间
2.5 endDate 结束时间
2.6 daysOfWeekDisabled 一周禁用的日期
2.7 autoclose 是否自动关闭日期选择器
2.8 startView 日期时间选择器打开之后首先显示的视图。
2.9 minView 日期时间选择器所能提供的最精确的时间选择视图
2.10 maxView 日期选择器最高能展示的范围视图
2.11 todayBtn 是否显示'today'按钮
2.12 todayHighlight 当天日期高亮
2.13 keyboardNavigation 方向键改变日期
2.14 language 语言
2.15 forceParse 强制解析
2.16 minuteStep 步进值
2.17 pickerPosition 选择框的位置
2.18 showMeridian 是否显示上午/下午
2.19 initialDate 初始化日期时间
3.1绑定输入框，并设置format选项
3.2作为组件使用：
3.3时间范围选择联动
具体属性展示
一 bootstrap 时间日期日历控件datetimepicker
应用
手机
pc
涉及的样式
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="static/js/moment-with-locales.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
1
2
3
4
5
6
7
图片样式展示
pc
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">开始日期</span>
<a class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" id="startDate" readonly/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</a>
<span class="input-group-addon">~</span>
<span class="input-group-addon">结束日期</span>
<a class='input-group date' id='datetimepicker4'>
<input type='text' class="form-control" id="endDate" readonly/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</a>
</div>
</div>
<div class="form-group col-lg-6">
<div class="input-group">
<span class="input-group-addon">活动结束日期</span>
<a class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" id="activityEnd" name="activityEnd"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<span class="input-group-addon" style="color:#F00">*</span>
</a>
</div>
</div>
手机
<div class="form-group">
<div class="input-group date form_date" id="datepicker" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="width:92%;">
<input class="form-control" size="16" type="text" value="${initialDate}" name="PARAM9" readonly="readonly" id="PARAM9">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" />
</div>
1
2
3
4
5
6
7
属性及使用示例
<input type="text" readonly class="date" data-link-field="date" />
<input type="hidden" id="date" />
$('.date').datetimepicker();
1
2
3
选中的日期会被存放在id为date的input里。
//设置日期时间控件
$('#datetimepicker1').datetimepicker({
language: 'zh-CN',//显示中文
format: 'yyyy-mm-dd hh:ii:ss',//显示格式
minView: 0,//设置只显示到月份
initialDate: new Date(),
autoclose: true,//选中自动关闭
todayBtn: true,//显示今日按钮
locale: moment.locale('zh-cn')
});
可用属性列表
format（日期时间格式）
该属性控制日期的显示方式。属性具体说明如下
符号 意义
yyyy 年，全称。如2017
yy 年，简称。只显示后面2位。如17
MM 月，全称。月份显示为英文/中文。如April/四月
M 月，简称。如Apr/四
mm 月，全称。如03
m 月，简称。如3
HH 时，全称，12小时制。前面补0，如05
H 时，简称，12小时制。前面不补0，如5
hh 时，全称，24小时制。前面补0
h 时，全称，24小时制。前面不补0
ii 分，全称，前面补0
i 分，全称，前面不补0
ss 秒，全称，前面补0
s 秒，全称，前面不补0
P 大写的P，12小时制且大写’AM’或’PM’
p 小写的p，12小时制且小写’am’或’pm’
示例1:2017-03-30 上午 09:50
$(’.form_dateTime’).datetimepicker({
format: ‘yyyy-mm-dd p HH:ii’, //年-月-日 上午/下午 时分
});
示例2：2017-03-30
$(’.form_dateTime’).datetimepicker({
format: ‘yyyy-mm-dd’, //年-月-日
});
示例3：仅选择时间
$(’.form_time’).datetimepicker({
format: ‘hh:ii’, //时分 hh:24小时制，HH：12小时制
});
hh:ii 选中的时间是24小时制 HH:ii 选中的时间是12小时制的(如果选中的是17:50,在页面上显示为05:50)
也可以在input里面设置format：
format的格式可以根据表格说明DIY，哈哈。
2.3 weekStart 一周从那一天开始
类型：Integer
默认值：0(0-6表示星期日到星期六)
示例：从星期三开始
$(’.form_dateTime’).datetimepicker({
weekStart: 3,
});
显示截图：
2.4 startDate 开始时间
类型：Date
startDate之前的日期都不能选择。
示例：只能选择当前时间之后的时间
$(’.form_dateTime’).datetimepicker({
startDate:new Date()
});
显示结果： 如下图所示，今天之前的日期都是灰色，并且不可选择。
2.5 endDate 结束时间
类型：Date
endDate之后的时间都不可以选择。
2.6 daysOfWeekDisabled 一周禁用的日期
类型：String,Array
默认值：’’,[]
0-6表示星期日-星期六。
示例:’'格式，星期一、五不能选
$(’.form_date’).datetimepicker({
daysOfWeekDisabled:‘1,5’
});
示例：[]格式，星期一、五不能选
$(’.form_date’).datetimepicker({
daysOfWeekDisabled:[1,5]
});
显示结果：如下图所示，星期一、五的日期呈灰色，不能选中。
2.7 autoclose 是否自动关闭日期选择器
类型：Boolean
默认值：false，不自动关闭。
true：自动关闭
2.8 startView 日期时间选择器打开之后首先显示的视图。
类型：Number,String
默认值：‘2’,‘month’
具体属性说明如下：
值 意义
0 从小时视图开始，选时分
1 从天视图开始，选时
2 从月视图开始，选天
3 从年视图开始，选月
4 从十年视图开始，选年
示例：从小时视图开始
$(’.form_date’).datetimepicker({
startView: 0
});
显示结果：左右按钮变化的是时分。
2.9 minView 日期时间选择器所能提供的最精确的时间选择视图
类型：Number,String
默认值：0,‘hour’
具体属性说明如下：
值 意义
0 从小时视图开始，选时分
1 从天视图开始，选时
2 从月视图开始，选天
3 从年视图开始，选月
4 从十年视图开始，选年
示例：从年视图开始
$(’.form_date’).datetimepicker({
minView: 3
});
选完月后，不再出现下级时间选择面板。
2.10 maxView 日期选择器最高能展示的范围视图
类型：Number, String
默认值：4, ‘decade’
2.11 todayBtn 是否显示’today’按钮
类型：Boolean, “linked”
默认值: false
如果值为true或’linkd’,则日期底部显示’today’按钮，用以选择当前日期。
如果是true的话，‘today’按钮仅仅将视图转到当天的日期，如果是’linked’，当天日期将被选中。
$(’.form_date’).datetimepicker({
todayBtn: true
});
显示结果：
2.12 todayHighlight 当天日期高亮
类型：Boolean
默认值：false
false：不高亮；true：高亮
2.13 keyboardNavigation 方向键改变日期
类型：Boolean
默认值：false
false：方向键不能改变日期；true：方向键可以改变日期
2.14 language 语言
类型：String
默认值：en
en：英文；zh-CN：中文
需要中文显示日历时，可以引入中文包，也可以自己写一段汉化js覆盖。
汉化js代码如下：
$.fn.datetimepicker.dates[‘zh’] = {
days: [“星期日”, “星期一”, “星期二”, “星期三”, “星期四”, “星期五”, “星期六”,“星期日”],
daysShort: [“日”, “一”, “二”, “三”, “四”, “五”, “六”,“日”],
daysMin: [“日”, “一”, “二”, “三”, “四”, “五”, “六”,“日”],
months: [“一月”, “二月”, “三月”, “四月”, “五月”, “六月”, “七月”, “八月”, “九月”, “十月”, “十一月”,“十二月”],
monthsShort: [“一”, “二”, “三”, “四”, “五”, “六”, “七”, “八”, “九”, “十”, “十一”, “十二”],
meridiem: [“上午”, “下午”],
//suffix: [“st”, “nd”, “rd”, “th”],
today: “今天”
};
2.15 forceParse 强制解析
类型：Boolean
默认值：true
在输入的值不是你规定的格式(format)时，会尽量解析成你规定格式
2.16 minuteStep 步进值
类型：Number
默认值：5
步进值用于构建小时视图。以分钟为单位。如下图所示，分钟5分钟为一个值。
2.17 pickerPosition 选择框的位置
类型：String
默认值：bottom-right
其他值：bottom-left,top-right,top-left
2.18 showMeridian 是否显示上午/下午
类型：Boolean
默认值：false
false：不显示；true：显示
在选择时分的界面，是否显示上午/下午
2.19 initialDate 初始化日期时间
类型：Date,String
默认值：new Date()
在打开时默认选择当时的时间，显示在时间日期选择器上。
3.使用
3.1绑定输入框，并设置format选项
使用js设置format属性：
html：
js:
$(’#datetimepicker’).datetimepicker({
format: ‘yyyy-mm-dd hh:ii’
});
或在input里直接设置format属性：
html：
js:
$(’#datetimepicker’).datetimepicker();
选择的时间被存放在id为’date’的input中。
3.2作为组件使用：
html：
DateTime Picking
js：
$(’.form_datetime’).datetimepicker();
显示结果：
说明：
①.通过div的样式’.form_datetime’来初始化时间日期选择器。
②.第一个span样式是关闭按钮，第二个span样式是日历图标。
属性说明：
data-date：日期时间选择器面板上初始选中的值。与initialDate作用相同
data-date-format：设置日期时间格式。
data-link-field：映射值，该属性的只能是另一个标签的id。将选中的日期时间映射到data-link-field的值所在的标签。
如上例中，将选中的日期时间存放在中。
3.3时间范围选择联动
开始日期不能大于结束日期，结束日期不能小于开始日期。
时间:
$(’.startDate’).datetimepicker({
language:‘zh’,
format: ‘yyyy-mm-dd’, //时间显示格式 年-月-日
autoclose:true, //选择完时间后自动关闭，默认false（不关闭）
startView: 2,
minView: 2,
todayBtn:true,
todayHighlight: 1,
pickerPosition:‘bottom-left’,
forceParse: 0
}).on(‘changeDate’,function(ev){
var startTime = $(’#startDate’).val();
$(’.startDate).datetimepicker(‘hide’);
$(’.endDate’).datetimepicker(‘setStartDate’,startTime);
})
$(’.endDate’).datetimepicker({
language:‘zh’,
format: ‘yyyy-mm-dd’, //时间显示格式 年-月-日 时：分
autoclose:true, //选择完时间后自动关闭，默认false（不关闭）
startView: 2,
minView: 2,
todayBtn:true,
todayHighlight: 1,
pickerPosition:‘bottom-left’,
forceParse: 0
}).on(‘changeDate’,function(ev){
//var startTime = $(’#startDate’).val();
var endTime = KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#?endDate').val()…(’.startDate’).datetimepicker(‘setEndDate’,endTime);
$(’.endDate’).datetimepicker(‘hide’);
})
具体属性展示
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#?datetimepicker'….datetimepicker.setLocale(‘ch’)
value: ‘2016-5-19’, // 设置当前datetimepicker的默认值（即input框中默认的日期时间）
rtl: false, // false 默认显示方式 true timepicker和datepicker位置变换 （自己验证没起作用）
format: ‘Y/m/d H:i’, // 设置时间年月日时分的格式 如: 2016/11/15 18:00
formatTime: ‘H:i’, // 设置时间时分的格式
formatDate: ‘Y/m/d’, // 设置时间年月日的格式
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.
/*
监听时间插件显示时的事件
*/
$(’#datetimepicker’).datetimepicker({
onShow: function(dateText, inst) {
console.log("—已打开datetimepicker----");
}
});
/*
监听时间插件关闭时的事件
*/
$(’#datetimepicker’).datetimepicker({
onClose: function(dateText, inst) {
console.log("—已关闭datetimepicker----");
}
});
/*
监听点击日期时的事件
*/
$(’#datetimepicker’).datetimepicker({
onSelectDate: function(dateText, inst) {
console.log(dateText);
}
});
/*
监听点击时分的事件
*/
$(’#datetimepicker’).datetimepicker({
onSelectTime: function(dateText, inst) {
console.log(dateText);
}
});
/*
监听点击datepicker 上一月下一月按钮及选择月份点击事件
/
$(’#datetimepicker’).datetimepicker({
onChangeMonth: function(dateText, inst) {
console.log(dateText);
}
});
/
监听获取当前datetimepicker显示的所有日期信息
*/
$(’#datetimepicker’).datetimepicker({
onGetWeekOfYear: function(dateText, inst) {
console.log(dateText);
}
});
/*
监听选择年份的点击事件
*/
$(’#datetimepicker’).datetimepicker({
onChangeYear: function(dateText, inst) {
console.log(dateText);
}
});
/*
实时监听你选择的日期和时间
*/
$(’#datetimepicker’).datetimepicker({
onChangeDateTime: function(dateText, inst) {
console.log(dateText);
}
});
/*
实时监听datetimepicker上的所有事件
*/
$(’#datetimepicker’).datetimepicker({
onGenerate: function(dateText, inst) {
console.log(dateText);
}
});
本文暂时没有评论，来添加一个吧(●'◡'●)