jqueryui datepicker 时间控件实践教程

最新推荐文章于 2023-04-10 08:49:28 发布

dms20

最新推荐文章于 2023-04-10 08:49:28 发布

阅读量496

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/u011982967/article/details/65445026

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

官网地址：http://jqueryui.com/datepicker/

介绍：datepicker 简单易用，在jquery基础上再引入两个文件(jquery-ui.js jquery-ui.css)，调用里面的一个方法即可使用，重要的是可以自由定制！

在官网上下载需要的两个文件后，编写简单实例：

index.html

<html>
<meta charset="UTF-8"> 
<head>
	<link rel="stylesheet" type="text/css" href="./jquery-ui.min.css"><!--带min的是已经压缩过的，如果本地调试可以使用不带min的 上线时用带min的文件-->

	<script type="text/javascript" src='./jquery.js'></script>
	<script type="text/javascript" src="./jquery-ui.min.js"></script>
	<script type="text/javascript" src='./common.js'></script>
</head>

开始日期：<input type="text" name="startDate" id="startDate">
结束日期：<input type="text" name="endDate" id="endDate">
</html>

common.js

$(function(){
	$('#startDate,#endDate').datepicker();
})

效果：

简单吧！一个大致的时间控件就出来，只是里面的格式不方便我们看，这时候就用到了datapickper提供的对外接口了。

官方api提供了说明

左边都是可配置的属性：只需要在datepicker 中添加即可：

修改common.js

$(function(){
	 var currentYear = new Date().getFullYear();
	$('#startDate,#endDate').datepicker({
	     changeMonth: true,
	     changeYear: true,
	     yearRange:""+currentYear-80+":"+currentYear,
	     prevText:"上一月",
	     nextText:"下一月",
	     inline: true,
	     dateFormat:"yy-mm-dd", // 日期格式
	     monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
	     dayNamesMin:["日","一","二","三","四","五","六"],
	     dayNames:["周日","周一","周二","周三","周四","周五","周六"]
	});
})

效果：