jQ datetimepicker插件时间格式化、限制开始和结束日期

罗科斯

已于 2024-07-03 15:50:46 修改

阅读量865

点赞数

文章标签：前端 linux javascript

于 2023-07-10 16:16:00 首次发布

本文链接：https://blog.csdn.net/qq_42034594/article/details/131641571

版权

这段代码展示了如何使用JavaScript的datetimepicker插件，分别配置选择年月日、年月和年的不同选项，包括语言设定、日期格式、起始视图和最小视图等参数。

摘要由CSDN通过智能技术生成

1、年月日

$('.date-picker1').datetimepicker({
	language: 'zh-CN',
	format: 'yyyy-mm-dd',
	weekStart: 1,
	todayBtn: 1,
	autoclose: 1,
	todayHighlight: 1,
	startView: 2,
	minView: 2,
	clearBtn:true
});

2、年月

$('.date-picker2').datetimepicker({
	language: 'zh-CN',
	format: 'yyyy-mm',
	weekStart: 1,
	todayBtn: 1,
	autoclose: 1,
	todayHighlight: 1,
	startView: 3,
	minView: 3,
	clearBtn:true
});

3、年

$('.date-picker3').datetimepicker({
	language: 'zh-CN',
    format: 'yyyy',
    weekStart: 1,
    todayBtn: 1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 4,
    minView: 4,
    clearBtn:true
});

4、限制开始和结束日期

<input type="text" id="start_time" readonly />
<input type="text" id="end_time" readonly />


// 限制开始和结束日期
$('#start_time').on('changeDate', function(ev){
	var startTime = $('#start_time').val();
	$('#end_time').datetimepicker('setStartDate', startTime);
});
$('#end_time').on('changeDate', function(ev){
	var endTime = $('#end_time').val();
	$('#start_time').datetimepicker('setEndDate', endTime);
});