使用jquery做datepicker

最新推荐文章于 2024-12-06 10:39:54 发布

小犀牛_

最新推荐文章于 2024-12-06 10:39:54 发布

阅读量719

点赞数

CC 4.0 BY-SA版权

分类专栏： java开发

本文链接：https://blog.youkuaiyun.com/ssrrxx111/article/details/21299079

java开发专栏收录该内容

72 篇文章

订阅专栏

本文详细介绍了如何在JavaScript中使用jQuery UI日期时间选择器，并且强调了样式文件的重要性。通过导入特定的CSS文件和JavaScript库，确保时间选择器组件能够正常显示样式。同时，提供了一个实例代码，展示如何自定义日期时间选择器的显示文本和格式，包括月份名称的短形式应用，以及如何调整其行为特性，如日期范围、月份切换等功能。

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

1、使用版本1.10.4

2、需要导入的js及css

	<link rel="stylesheet" href="css/jquery.ui.all.css" type="text/css">
	<link rel="stylesheet" href="css/jquery.ui.datepicker.css" type="text/css">
	<script src="javascript/jquery.js"></script>
	<script src="javascript/jquery.ui.core.js"></script>
	<script src="javascript/jquery.ui.widget.js"></script>
	<script src="javascript/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="css/demos.css" type="text/css">

这里要特别注意ui.datepicker. css，如果不导入它，那么出现时间选择器的时候将会没有样式。而且其他的样式文件，如ui.core.css，等都要导入进来，他们之间相互有关联。智能说很蛋疼。想单导入这几个文件然后实现，将会没有样式或不全

3、以下是他的一些属性

	this.regional[""] = { // Default regional settings
		closeText: "Done", // Display text for close link
		prevText: "Prev", // Display text for previous month link
		nextText: "Next", // Display text for next month link
		currentText: "Today", // Display text for current month link
		monthNames: ["January","February","March","April","May","June",
			"July","August","September","October","November","December"], // Names of months for drop-down and formatting
		monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], // For formatting
		dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], // For formatting
		dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], // For formatting
		dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"], // Column headings for days starting at Sunday
		weekHeader: "Wk", // Column header for week of the year
		dateFormat: "mm/dd/yy", // See format options on parseDate
		firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
		isRTL: false, // True if right-to-left language, false if left-to-right
		showMonthAfterYear: false, // True if the year select precedes month, false for month then year
		yearSuffix: "" // Additional text to append to the year in the month headers
	};

以下是我的代码

	$('#datepicker').datepicker({  
	      dateFormat: 'yy-mm-dd',  //日期格式，自己设置
	      yearRange: '1990:2008',//年份范围
	      monthNamesShort: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], // For formatting
	      changeMonth: true,
	      changeYear: true
	  });

这里monthNamesShort改为说明的monthNames好像用不了。