第一步:
1.jquery UI是构建在jquery的基础上的,提供很多漂亮的插件.使用jquery UI首先要去jquery的官网去下载它,下载地址为:
http://jqueryui.com/
2.下载的时候可以选择适合自己项目的主题下载.
第二步:
1.解压下载好的包,将js包中的jquery-1.7.2.min.js和jquery-ui-1.8.22.custom.min.js文件和css包中的css文件和image文件添加到你的项目中去.
2.在你需要的页面中添加上面的文件.如下图所示:
3.下面我用时间插件举例用法:
html代码:
<span>起止时间:</span><input type="text" name="startDate" id="startDate"/>
<span>结束时间:</span><input type="text" name="endDate" id="endDate"/>
js代码:
$("#startDate").datepicker({
onSelect:function(dateText,inst){
$("#endDate").datepicker("option","minDate",dateText);
},
showButtonPanel:true,
dateFormat:"yy-mm-dd"
});
$("#endDate").datepicker({
onSelect:function(dateText,inst){
$("#startDate").datepicker("option","maxDate",dateText);
},
showButtonPanel:true,
dateFormat:"yy-mm-dd"
});
4. 浏览页面,可以看到如下效果: