`
ftj20003
  • 浏览: 130588 次
  • 性别: Icon_minigender_1
  • 来自: ...
社区版块
存档分类
最新评论

尝试JQuery的日期插件

阅读更多
    新年伊始,折腾了一把x61。农历年一过又回头清理了一把t61,把ssd+硬盘托架又换到了t61上。顶着显卡门的隐患重新启用t61作为主力机器,相比之下还是小T比较快啊,写代码心理感觉更爽了一点,哈哈。JQuery用的不能说熟练,但是简单的东西还是会用。之前struts2的日期标签用着很不爽,所以想到了JQuery的UI插件里面的日期插件就拿来尝试一下,感觉灰常的好。按照附带的demo稍微改了一下,先看看效果吧:


<script type="text/javascript">
	function datePicker(pickerName,locale) {
		$(pickerName).datepicker($.datepicker.regional[locale]);
		$(pickerName).datepicker('option', 'changeMonth', true);//月份可调
		$(pickerName).datepicker('option', 'changeYear', true);//年份可调
	}
	
	$(function() {
		//var locale = "<s:property value='#request.locale'/>";//struts2取语言环境
		//var locale = "<%=request.getLocale()%>"; //jsp取浏览器语言环境
		//datePicker('#dateDemo',locale);//根据语言环境切换日期控件语言
		datePicker('#dateDemo','zh_CN');
		//datePicker('#dateDemo',''); //''默认的样式在ui.datepicker.js内已定义为英文样式,与附件内的ui.datepicker-en_US.js相同
	});
</script>
...
<div>
	<p>日期: <input type="text" id="dateDemo"/>&nbsp;
</div>

   
    datePicker(...)是主要调用日期插件的方法,其中的option是插件的微调选项,日期格式等等都可以通过修改相应的属性值调整。
$(function(){...});完整形式为$(document).ready(function(){...});即为在DOM加载完毕后执行了ready()方法。这里传递id为dateDemo的input和表示中文的zh_CN给datePicker()初始化日期控件。第二个参数可以通过注释的两种或者其他的方式获取客户端的语言环境进行设置。附件内的ui.datepicker-zh_CN.js和ui.datepicker-en_US.js分别单独定义了不同语言环境的样式。

    这样简单的效果就基本上实现了,值得注意的是如果出现了乱码的情况则要检查ui.datepicker-locale.js文件的编码是否正确。个人感觉JQuery不仅仅兼容主流浏览器提高开发的效率,而且对于像我这样JS不怎么好的开发人员来说提供了缩小差距的机会。灰常符合其"write less, do more"的指导方针。
  • 大小: 7.3 KB
  • 大小: 6.7 KB
0
0
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jQuery-Pulgins:我的日常工作 jQuery 插件

    jQuery 插件我的日常工作 jQuery 插件==== star.js ==== 描述:明星的jQuery插件注意:我第一次尝试编写 jQuery 插件。 ====滑块.js ==== 描述:滑块的jQuery插件版本:1.0 日期 : 2013-10-15 14:00:09 版本:1.0.1 ...

    jQuery带时间的日期控件代码分享

    带时间的jQuery日期控件代码是一款基于jQueryUI实现的,可自定义日期插件语言,这个日期控件的亮点就在于选择的时间可精确到分钟。 运行效果图: ——————-查看效果 下载源码——————- 小提示:浏览器中...

    tecDatePicker:jQuery Mobile Date Picker插件

    tecDatePicker一个用于jQuery mobile的js插件,用于创建日期字段 尝试一下!! 用法 在html页面中添加 CSS-CSS / main.css 语言js文件lng / ru.js 核心文件tecDatePicker.min.js 在输入元素中添加date-role属性 ...

    jquery实现多条件筛选特效代码分享

    jquery实现的多条件搜索表单带日期选择表格表单效果源码,是一段实现了多个条件筛选搜索的特效代码,多条件拥有时间、地点、酒店位置及酒店名称等选项,同时在时间的输入表格中拥有时间选择功能,是一款非常实用的...

    jquery网页日历显示控件calendar3.1使用详解

    关于日历控件,我做了好多次尝试,一直致力于开发一款简单易用的日历控件。我的想法是争取在引用这个控件后,用一行js代码就能做出一个日历,若在加点参数,就能自定义外观和功能丰富多彩的日历。Calendar 3.1是我...

    搜索日期转换器「Search Date Changer」-crx插件

    如果您选中“为任何搜索强制设置用户”复选框,并且Google搜索结果日期范围与您选择为“启用”的日期范围不匹配,则SDC会尝试重新搜索您选择为“启用”的搜索结果日期范围自动地。 要为此自动选择选择搜索结果日期...

    JavaScript实战

    9.4.1 jQuery Validation插件 267 9.4.2 基本验证 269 9.4.3 高级验证 271 9.4.4 样式化错误消息 277 9.5 验证教程 278 9.5.1 基本验证 278 9.5.2 高级验证 280 9.5.3 验证复选框和单选按钮 283 9.5.4 格式化错误...

    直接货币转换器「Direct Currency Converter」-crx插件

    尝试重新加载浏览器(F5按钮)并检查互联网连接。此外,通过从设置选项卡切换到“货币”强制重新加载,保存并重新加载网页。 如果雅虎为货币提供转换报价,您可以将其转换为任何现有的ISO 4217定义的货币代码,包括...

    sir的matlab代码-Hoosk:HooskCodeigniterCMS

    先生的matlab代码霍斯克 ...jQuery日期选择器- 可嵌套- 引导程序- CodeIgniter- Fontawesome- sb-admin- Hoosk已使用BrowserStack经过跨浏览器测试。 BrowserStack提供对多个桌面和移动浏览器的即时访问,请查看! --

    LinkedNotes-crx插件

    0.23版:选项中的“重设上次同步日期”按钮允许同步而不删除上次删除的注释。 仅合并。 0.22版:在同步过程中将制表符保留在注释中。 版本0.21:在选项中启用“链接的上下文菜单”时,现在也可以在注释中添加页地址...

    JAVA上百实例源码以及开源项目

    本规范尝试满足大型主机、微型主机、个人工作站、和TACs 的不同需求。例如,容易实现协议的设计。 Java EJB中有、无状态SessionBean的两个例子 两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取...

    JAVA上百实例源码以及开源项目源代码

    本规范尝试满足大型主机、微型主机、个人工作站、和TACs 的不同需求。例如,容易实现协议的设计。 Java EJB中有、无状态SessionBean的两个例子 两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取...

    ExtAspNet_v2.3.2_dll

    ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    ExtAspNet v2.2.1 ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, ...

Global site tag (gtag.js) - Google Analytics