bootstrap日历插件（bootstrap-datetimepicker）

最新推荐文章于 2025-05-20 10:35:20 发布

良言SE

最新推荐文章于 2025-05-20 10:35:20 发布

阅读量380

点赞数

CC 4.0 BY-SA版权

分类专栏： ui 组件库

本文链接：https://blog.youkuaiyun.com/qq_32265719/article/details/84727957

ui 组件库专栏收录该内容

13 篇文章 ¥19.90 ¥99.00

订阅专栏

本文介绍如何利用bootstrap-datetimepicker为网页添加交互式日期选择功能，包括安装、配置和自定义样式，让你轻松实现日期时间输入框的高效管理。

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

initDate('datetimeStart').onclick = function(ev){
	// $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())

	if(ev.date){
	  $("#datetimeEnd").datetimepicker('setStartDate', new Date(ev.date.valueOf()));
	}else{
	  $("#datetimeEnd").datetimepicker('setStartDate',null);
	}
}
initDate('datetimeEnd').onclick = function(ev){
	// $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart").val())
	if(ev.date){
	  $("#datetimeEnd").datetimepicker('setStartDate', new Date(ev.date.valueOf()));
	}else{
	  $("#datetimeEnd").datetimepicker('setStartDate',null);
	}
}

function initDate(id){
	return $('#'+id).datetimepicker({
		language: 'zh-cn',
		minView:2,
		autoclose:true,//选择完成后自动关闭弹框
		startDate:new Date(),//选择开始日期，结束日期
		format: 'yyyy-mm-dd'
	});
}