这篇博客介绍了如何在移动端使用日期时间选择器组件，包括设置初始值、自定义日期时间格式、多选日期、时间定制等功能。示例代码展示了onChange事件的处理以及不同时间格式的配置方法。
$("#date").calendar({
onChange: function (p, values, displayValues) {
console.log(values, displayValues);
}
});
$("#date2").calendar({
value: ['2016-12-12'],
dateFormat: 'yyyy年mm月dd日', // 自定义格式的时候，不能通过 input 的value属性赋值 '2016年12月12日' 来定义初始值，这样会导致无法解析初始值而报错。只能通过js中设置 value 的形式来赋值，并且需要按标准形式赋值(yyyy-mm-dd 或者时间戳)
onChange: function (p, values, displayValues) {
console.log(values, displayValues);
}
});
$("#date-multiple").calendar({
multiple: true,
onChange: function (p, values, displayValues) {
console.log(values, displayValues);
}
});
$("#time5").datetimePicker({
times: function () {},
onChange: function (picker, values, displayValues) {
console.log(values);
},
});
$("#time").datetimePicker({
title: '出发时间',
min: "1990-12-12",
max: "2022-12-12 12:12",
onChange: function (picker, values, displayValues) {
console.log(values);
}
});
$("#time2").datetimePicker({
times: function () {
return [
{
values: (function () {
var hours = [];
for (var i=0; i<24; i++) hours.push(i > 9 ? i : '0'+i);
return hours;
})()
},
{
divider: true, // 这是一个分隔符
content: '时'
}
];
},
onChange: function (picker, values, displayValues) {
console.log(values);
},
});
$("#time3").datetimePicker({
times: function () {
return [
{
values: ['上午', '下午']
}
];
},
value: '2012-12-12 上午',
onChange: function (picker, values, displayValues) {
console.log(values);
}
});
$("#time4").datetimePicker({
times: function () {
return [
{
values: ['上午8点', '下午2点', '晚上8点']
}
];
},
max: '2013-12-12',
onChange: function (picker, values, displayValues) {
console.log(values);
}
});
$("#time-format").datetimePicker({
title: '自定义格式',
yearSplit: '年',
monthSplit: '月',
dateSplit: '日',
times: function () {
return [ // 自定义的时间
{
values: (function () {
var hours = [];
for (var i=0; i<24; i++) hours.push(i > 9 ? i : '0'+i);
return hours;
})()
},
{
divider: true, // 这是一个分隔符
content: '时'
},
{
values: (function () {
var minutes = [];
for (var i=0; i<59; i++) minutes.push(i > 9 ? i : '0'+i);
return minutes;
})()
},
{
divider: true, // 这是一个分隔符
content: '分'
}
];
},
onChange: function (picker, values, displayValues) {
console.log(values);
}
});
$("#time-inline").datetimePicker({
container: '#time-container',
onChange: function (picker, values, displayValues) {
console.log(values);
}
})
$(function() {
FastClick.attach(document.body);
});
一键复制
编辑
Web IDE
原始数据
标准视图
历史
扫一扫
8441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
