jquery年月日时分秒控件_jQuery DateTimePicker 日期和时间插件示例

最新推荐文章于 2025-05-10 13:10:30 发布

weixin_39938522

最新推荐文章于 2025-05-10 13:10:30 发布

阅读量1.9k

点赞数

文章标签： jquery年月日时分秒控件

本文链接：https://blog.youkuaiyun.com/weixin_39938522/article/details/111758891

版权

这篇博客介绍了如何使用jQuery UI的DateTimePicker插件来创建年月日时分秒控件。内容包括默认设置、精确到时分秒、只选择年月日、设置日期区间以及时间区间选择的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

日期选择插件是一个配置灵活的插件，你可以定义它的展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等

文档和下载地址：

4、JQuery下载地址：

下面先看效果图：

引入js文件：

1、默认的效果：

关键代码：

$("#defult").datetimepicker();

2、控制到时分秒：

关键代码：

$('#date').prop("readonly", true).datetimepicker({

timeText: '时间',

hourText: '小时',

minuteText: '分钟',

secondText: '秒',

currentText: '现在',

closeText: '完成',

showSecond: true, //显示秒

timeFormat: 'HH:mm:ss' //格式化时间

});

3、控制到年月日

关键代码：

$("#date_yy-mm-dd").prop("readonly", true).datepicker({

changeMonth: true,

dateFormat: "yy-mm-dd",

onClose: function(selectedDate) {

}

});

4、开始结束区间

关键代码：

$("#date_start").prop("readonly", true).datepicker({

changeMonth: true,

dateFormat: "yy-mm-dd",

onClose: function(selectedDate) {

$("#date_end").datepicker("option", "minDate", selectedDate);

}

});

$("#date_end").prop("readonly", true).datepicker({

changeMonth: true,

dateFormat: "yy-mm-dd",

onClose: function(selectedDate) {

$("#date_start").datepicker("option", "maxDate", selectedDate);

$("#date_end").val($(this).val());

}

});

5、时分秒选择：

关键代码：

$('#date_hhmmss').prop("readonly", true).timepicker({

timeText: '时间',

hourText: '小时',

minuteText: '分钟',

secondText: '秒',

currentText: '现在',

closeText: '完成',

showSecond: true, //显示秒

timeFormat: 'HH:mm:ss' //格式化时间

});

6、开始结束区间(第二种写法)：

关键代码：

$.timepicker.dateRange(

$("#date_start_1"),

$("#date_end_1"), {

minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间

maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间

start: {}, // start picker options

end: {} // end picker options});

}

);

完整代码：

(function($) {

$(function() {

$.datepicker.regional['zh-CN'] = {

changeMonth: true,

changeYear: true,

clearText: '清除',

clearStatus: '清除已选日期',

closeText: '关闭',

closeStatus: '不改变当前选择',

prevText: '

prevStatus: '显示上月',

prevBigText: '<

prevBigStatus: '显示上一年',

nextText: '下月>',

nextStatus: '显示下月',

nextBigText: '>>',

nextBigStatus: '显示下一年',

currentText: '今天',

currentStatus: '显示本月',

monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],

monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],

monthStatus: '选择月份',

yearStatus: '选择年份',

weekHeader: '周',

weekStatus: '年内周次',

dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],

dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],

dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],

dayStatus: '设置 DD 为一周起始',

dateStatus: '选择 m月 d日, DD',

dateFormat: 'yy-mm-dd',

firstDay: 1,

initStatus: '请选择日期',

isRTL: false

};

});

$(function() {

$.datepicker.setDefaults($.datepicker.regional['zh-CN']);

$("#defult").datetimepicker();

$('#date').prop("readonly", true).datetimepicker({

timeText: '时间',

hourText: '小时',

minuteText: '分钟',

secondText: '秒',

currentText: '现在',

closeText: '完成',

showSecond: true, //显示秒

timeFormat: 'HH:mm:ss' //格式化时间

});

$("#date_yy-mm-dd").prop("readonly", true).datepicker({

changeMonth: true,

dateFormat: "yy-mm-dd",

onClose: function(selectedDate) {

}

});

$("#date_start").prop("readonly", true).datepicker({

changeMonth: true,

dateFormat: "yy-mm-dd",

onClose: function(selectedDate) {

$("#date_end").datepicker("option", "minDate", selectedDate);

}

});

$("#date_end").prop("readonly", true).datepicker({

changeMonth: true,

dateFormat: "yy-mm-dd",

onClose: function(selectedDate) {

$("#date_start").datepicker("option", "maxDate", selectedDate);

$("#date_end").val($(this).val());

}

});

$('#date_hhmmss').prop("readonly", true).timepicker({

timeText: '时间',

hourText: '小时',

minuteText: '分钟',

secondText: '秒',

currentText: '现在',

closeText: '完成',

showSecond: true, //显示秒

timeFormat: 'HH:mm:ss' //格式化时间

});

$.timepicker.dateRange(

$("#date_start_1"),

$("#date_end_1"), {

minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间

maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间

start: {}, // start picker options

end: {} // end picker options});

}

);

});

}(jQuery));

默认：

控制到时分秒：

控制到年月日：

开始结束区间：

时分秒选择：

开始结束区间(第二种写法)：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。