关于Jquery实现datepicker实现国际化的应用

longgangbai

浏览: 7325745 次
性别:
来自: 上海

最近访客更多访客>>

sdcharles

paladin1988

ljq867

yuxiangtong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery的开发应用

jQuery CSS JavaScript UI Django

使用这个插件要下载两个东西，一个是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>

<s:textfield name="entity.tripStartTime" id="tripStartTime" />至
<s:textfield name="entity.tripEndTime" id="tripEndTime" />

</body>
</html>

分享到：

JQuery 插件SortTable的学习总结 | 关于Jquery实现tab的局部更新

2009-06-09 11:52
浏览 7142
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论