使用这个插件要下载两个东西,一个是date-picker.js,一个是style.css文件。其中style.css你要选取一下,因为它还包括整体的一些css设定,与date-picker.js关系不大。style.css中的 a.date-picker 需要一个图片,感觉 date-picker 中的不好看(这个你要单独下载,通过图片另存为),所以我使用了 django 中的图片,并且根据 shareplat 进行了修改。
使用 date-picker 很简单。分为以下几步(以SharePlat为例):
1. 在Html的head中加入js和css的引用
<script type="text/javascript" src="/site_media/js/calendar.js"></script>
<link href="/site_media/css/date-picker.css" rel="stylesheet" type="text/css" />
2. 在$(document).ready()中加入如下代码:
<script type="text/javascript">
$(document).ready(function(){
$.datePicker.setDateFormat('ymd','-');
$.datePicker.setLanguageStrings(['日', '一', '二', '三', '四', '五', '六'],
['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十-月', '十二月'],
{p:'上一月', n:'下一月', c:'关闭', b:'选择日期'}
);
$('#date').datePicker();
});
date-picker 可以有一些配置。
setDateFormat可以定年月日的显示和分隔符
setLanguageStrings可以设定日历的语言
各种属性如下:
constrainInput:如果为true表示输入框必须为当前的时间格式
dateFormat:表示时间的格式
dayNames:表示星期的时间格式
dayNamsMin:表示星期的名称的简称
然后$('#date').datePicker()就可以自动在一个input元素后面生成一个链接(它显示为一个图标),当点击这个链接时,会弹出日期选择窗口,然后就可以选择了。
3. 设定对应的元素
<input id="date" type="text" name="date"/>
这里id的值是与上面的$('#date')是匹配的。
常用的形式在文本框的右边显示一个图片,点击图片时弹出时间选择器,选择后自动格式化到文本框中。
html内容如下:
<%@taglib prefix="s" uri="/WEB-INF/tld/struts-tags.tld" %>
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
<script type="text/javascript">
jQuery(function($){
//JQuery的日历控件汉化
$.datepicker.regional['zh-CN'] =
{
clearText: '清除',
clearStatus: '清除已选日期',
closeText: '关闭',
closeStatus: '不改变当前选择',
prevText: '<上月',
prevStatus: '显示上月',
nextText: '下月>',
nextStatus: '显示下月',
currentText: '今天',
currentStatus: '显示本月',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一','二','三','四','五','六',
'七','八','九','十','十一','十二'],
monthStatus: '选择月份', yearStatus: '选择年份',
weekHeader: '周', weekStatus: '年内周次',
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
dayStatus: '设置 DD 为一周起始',
dateStatus: '选择 m月 d日, DD',
dateFormat: 'yy-mm-dd', //日期格式化形式
firstDay: 1,
initStatus: '请选择日期',
isRTL: false
};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
//设置绑定的开始结束时间
//在jQuery中绑定的id名称前必须使用#,如果为样式class必须使用 . 表示
$("#tripStartTime").datepicker({showOn: 'button', buttonImage: '/images/calendar.gif', buttonImageOnly: true});
$("#tripEndTime").datepicker({showOn: 'button', buttonImage: '/images/calendar.gif', buttonImageOnly: true});
});
</script>
</head>
<body style="font-size:62.5%;">
<strong>计划时间:</strong>
<!--绑定的文本框中的标签的id的名称的信息-->
<s:textfield name="entity.tripStartTime" id="tripStartTime" />至
<s:textfield name="entity.tripEndTime" id="tripEndTime" />
</body>
</html>
分享到:
相关推荐
jquery datepicker 的中文包 调用方法 <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-...
jQuery UI Datepicker 插件和timepicker 共同组成时分秒的日历控件,包含汉化,中文显示日历样式
NULL 博文链接:https://free0007.iteye.com/blog/2080588
datepicker 是 jQuery 日期选择插件。在线演示 标签:jQuery
简要修改Jquery UI DatePicker,可以选择时间(小时,分),有需要的朋友可以参考一下。 补充说明:上面的代码做好后,没怎么测试,选择的时间是有问题的:问题1:选择的月份比当前月份少1,问题2:当选择的月份和...
日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用
jQuery UI Datepicker IE8 使用的基本解决方法:解决:IE8无法响应其中jquery.ui.datepicker部分标签a(无href)的onclick事件,和td由于放入标签a href="#",无法响应自身onclick事件,只验证了icon-trigger模式,...
jquery.datePicker日历控件应用input:text文本框弹出日历表选择日期时间,设置默认显示日历表展示。jquery日历控件下载。
jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
这几天使用jqueryui的datepicker感觉不错,所以下载整理了各种jqueryui的datepicker文件(包括样式),整理再次,供大家使用!
jquery 日期选择 datepicker 可以直接使用
jquery.datepicker 日期控件,有示例,输入框的形式。
jquery datepicker
jquery datepicker 能跑通的小例子
個人在使用過程中拓展了 其屬性。 onselectCallBack : null,callBackId : null。
NULL 博文链接:https://flyer0126.iteye.com/blog/946177
jquery datePicker插件jquery datePicker插件jquery datePicker插件jquery datePicker插件
jquery datepicker today clear 扩展实现,全网惟一资源。 当时项目要用,在网上没找到现成的,找到的都是需要修改源代码的,自己最后看源码实现的扩展,没有污染源码,如果项目有需要,拿去直接用就行了。 而且日期...