jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
官方地址:http://docs.jquery.com/UI/Datepicker ,官方示例: http://jqueryui.com/demos/datepicker/ 。
一个不错的地址,用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/
DatePicker基本使用方法:
<!
DOCTYPE html
>
< html >
< head >
< link href ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel ="stylesheet" type ="text/css" />
< script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></ script >
< script src ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></ script >
< script >
$(document).ready( function () {
$( " #datepicker " ).datepicker();
});
</ script >
</ head >
< body style ="font-size:62.5%;" >
< div type ="text" id ="datepicker" ></ div >
</ body >
</ html >
< html >
< head >
< link href ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel ="stylesheet" type ="text/css" />
< script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></ script >
< script src ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></ script >
< script >
$(document).ready( function () {
$( " #datepicker " ).datepicker();
});
</ script >
</ head >
< body style ="font-size:62.5%;" >
< div type ="text" id ="datepicker" ></ div >
</ body >
</ html >