您的位置：首页 > Web前端 > JQuery

jqueryui datepicker 时间控件实践教程

2017-03-23 17:08 645 查看

官网地址：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">

<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:["周日","周一","周二","周三","周四","周五","周六"]
});
})

效果：

这个基本能用了，关于其他属性的用法，还是根据文档说明自己尝试修改。

符：如果需要控制日期范围可参考：点击打开链接

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

jqueryui datepicker 时间控件 实践教程

jqueryui datepicker 时间控件实践教程