jQuery UI Datepicker 样例
界面效果:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>日期选择</title>
<script type="text/javascript" src="../public/jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../public/jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"></script>
<link type="text/css" href="../public/jquery-ui-1.7.2.custom/css/redmond/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<!-- date picker 本地化 -->
<script type='text/javascript' src='../public/jquery-ui-1.7.2.custom/js/ui.datepicker-zh-CN.js'></script>
<link type="text/css" href="../public/jquery-ui-1.7.2.custom/css/pack_datepicker.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
$("#sponsorDate").datepicker({
changeMonth: true, changeYear: true,
showOn: 'button',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
minDate: '-2y', maxDate: '+2y'
});
$('#sponsorDate').datepicker('option', {dateFormat: "yy/mm/dd" });
});
</script>
</head>
<body>
<input name="sponsorDate" type="text" id="sponsorDate" value="<% = SponsorDate %>" size="50" maxlength="50" >
</body>
</html>
pack_datepicker.css 是一个修正样式。使用默认的样式,在使用国际化同时启用changeYear和changeMonth后,年份和月份两个select显示为两行,很不好看。
.ui-datepicker .ui-datepicker-title select {font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 40%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; }
/* 控制字体大小
.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {font-size:1.2em}
*/
ui.datepicker-zh-CN.js 汉化脚本:
jQuery(function($){
$.datepicker.regional['zh-CN'] = {
closeText: '关闭',
prevText: '<上月',
nextText: '下月>',
currentText: '今天',
monthNames: ['01月','02月','03月','04月','05月','06月', '07月','08月','09月','10月','11月','12月'],
monthNamesShort: ['01月','02月','03月','04月','05月','06月', '07月','08月','09月','10月','11月','12月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
dateFormat: 'yy/mm/dd', firstDay: 1,
isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});
- 大小: 16.6 KB
分享到:
相关推荐
本文实例为大家分享了jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题。 1.jqueryUI的datepicker的使用 –>首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI...
继续介绍了jquery UI Datepicker时间控件的使用方法,主要关于Datepicker插件的介绍和使用,并分享了第一个日历插件的使用实例,需要的朋友可以参考下
本文为大家分享jquery ui datepicker时间控件的使用方法,通过实例讲解了解ui datepicker时间控件,先给大家看一看效果图: 效果: 常用场合: 1.输入框 2.div 使用方法: 1.限制日期 $("#resultDiv").datepicker...
默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上。...如果选择了一个日期,则反馈显示为 input 的值...jQuery UI 日期选择器(Datepicker) - 默认功能</title> <link rel="stylesheet" h
下面小编就为大家带来一篇jQuery UI 实例讲解 - 日期选择器(Datepicker)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
书名:jQuery权威指南(系统介绍jQuery方方面面,囊括118个实例和2个综合案例,实战性强) 作者:陶国荣 著 书号:978-7-111-32543-7 定价:59.00元 出版社:机械工业出版社华章公司 出版时间:2011年1月 编辑推荐:...
29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....
jquery 超实用的日期选择控件,可自定义开始日期(jquery.ui.datepicker.js onLine 66),defaultDate是默认的日期可随意指定.也可使用脚本 new date(). dateFormat:是日期显示的格式[00/00/0000,0000-00-00....](onLine...
本文用到了jquery ui库的datepicker插件来控制日历以及输入城市提示的插件。 XHTML 出发城市:</label><input type=text name=arrcity class=input id=arrcity /> <div id=suggest class=
6.5.2.26.2 一个较为复杂的应用实例 185 6.5.3 综合实例 191 6.5.3.1 Portal 191 6.5.4 展望 195 7 前端页面的优化工作概论 195 7.1 前端页面优化的策略 196 7.2 网站加速的主要方法 198 7.2.1 Web层 198 7.2.2 应用...
本文实例讲述了Yii框架小部件(Widgets)用法。分享给大家供大家参考,具体如下: 小部件 ¶ 小部件是在 视图 中使用的可...Yii提供许多优秀的小部件,比如active form, menu, jQuery UI widgets, Twitter Bootstrap wi
使用场景及目标:ASP.NET MVC网站实例,用于ASP.NET MVC新手入门 使用说明: 1、在数据库中(SQL SERVER)中建立一个名为demo_mvc的数据库 并执行CreateDemoMvc.sql文件,并手动在Users表中添加一条数据 Name值为...
办公自动化(OA)是面向组织的日常运作和管理,员工及管理者使用频率最高的应用系统,极大提高公司的办公效率。 1.项目介绍 oasys是一个OA办公自动化系统,使用Maven进行项目管理,基于springboot框架开发的项目,...
ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox...
ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome ...