`
ftj20003
  • 浏览: 132364 次
  • 性别: 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日期插件

    **jQuery日期插件详解** 在Web开发中,处理日期输入和显示经常是一项挑战,尤其是在需要用户友好和交互性的情况下。jQuery作为一个强大的JavaScript库,提供了许多方便的插件来简化这一过程。本文将深入探讨一款名...

    jQuery部分插件整理及教程

    3. **实践应用**: 在自己的项目中尝试使用插件,根据需求调整参数和行为。 4. **调试和优化**: 遇到问题时,使用浏览器的开发者工具进行调试,优化性能和兼容性。 总的来说,jQuery插件是提高开发效率、丰富用户...

    jquery ui插件以及示例

    **jQuery UI插件详解及示例** jQuery UI是基于JavaScript库jQuery的一款强大的用户界面插件集,它提供了丰富的交互效果、可自定义的主题以及多种功能组件。这些组件包括但不限于日期选择器、对话框、拖放功能、...

    兼容IE8的简单jQuery日期选择器插件

    DCalendar是一款专为jQuery设计的日期选择器插件,特别适合那些需要在老旧浏览器环境中运行的项目。它提供了日历视图,用户可以通过点击或滑动来选择日期,大大提升了用户体验。DCalendar的主要特点如下: 1. **...

    jQuery表单插件下载

    通过这个插件,开发者可以利用正则表达式定义自己的验证规则,如自定义日期格式、邮政编码规则等,增强了插件的灵活性和适应性。 在实际使用过程中,该插件的使用方法可能如下: 1. 引入jQuery库和插件文件:在...

    jquery日历插件

    《jQuery日历插件深度解析》 在网页开发中,日期选择器是一个常见的功能,它为用户提供...记住,实践是检验真理的唯一标准,动手尝试并根据实际需求进行调整,你会发现jQuery日历插件能为你的网页开发带来极大的便利。

    Jquery周历插件weekCalendar汉化并实现单日显示

    2. **修改配置**:在初始化插件时,可以尝试寻找相关的配置项来控制视图范围。如果没有现成的选项,可能需要直接修改源码。 3. **自定义渲染**:如果需要完全自定义视图,可以重写`render`方法,使其仅渲染当前日期...

    jQuery日期选择器DateSelecter(错误,不能用)

    jQuery日期选择器DateSelector是jQuery插件的一种,通常用于网页表单中,帮助用户方便地选择日期,常见于日历预订系统、在线表单或任何需要输入日期的场景。 然而,根据提供的标题和描述,似乎这个特定的jQuery日期...

    jquery ui 日历插件(换色+类型)

    jQuery UI是基于jQuery库构建的一套用户界面组件,其日历插件提供了一种交互式的日期选择界面,可以方便地集成到网页中。通过简单的JavaScript代码,就可以轻松实现日历的展示和交互。 颜色变换是提升用户界面视觉...

    jQuery双日历选择插件double-date.zip

    如果用户尝试设置结束日期在开始日期之前,插件会通过改变文本框的颜色(变为红色)来提醒用户,以保持数据的正确性。这种实时验证提高了用户体验,减少了用户输入错误的可能性。 “double-date”插件的实现基于...

    表格排序插件jquery.tableSort.js

    《表格排序插件jquery.tableSort.js的深度解析与应用》 在网页开发中,数据的展示和处理是一项基础且重要的任务。特别是在大数据量的情况下,如何有效地对表格数据进行排序,提高用户交互体验,成为了开发者关注的...

    jquery筛选并控制图片排序插件

    同时,你还可以尝试自定义参数,调试插件,以满足特定项目的需求。 总的来说,"jquery筛选并控制图片排序插件"是前端开发中的一个重要工具,它通过jQuery的强大功能,使得图片的管理和展示变得更加灵活和便捷。熟练...

    Jquery常用的插件.pdf

    - **jQuery UI**:官方提供的UI组件库,包括对话框、拖放、排序、日期选择器等,可以根据需要选择使用。 - **jQuery EasyUI**:基于jQuery的轻量级框架,提供一系列易于使用的UI组件,如表格、表单、菜单等。 - *...

    jquery实现的日期选择框带节假日提醒的日期特效源码.zip

    该资源是一个基于jQuery库开发的日期选择框插件,它具备了显示节假日提醒的特殊功能,为用户在网页上选择日期时提供了便利。这个插件主要用于网页应用中,提升用户体验,尤其是在预订、日程安排或者填写表单时,能够...

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

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

    jquery下载大全(文档,api,版本,分页,说明文档,插件)下载

    这些插件扩展了jQuery的功能,涵盖了表单验证、图像滑动、模态对话框、轮播图、时间日期选择器等各种常见需求。通过使用插件,开发者可以节省大量编写自定义代码的时间,提高开发效率。 在开始使用这些资源之前,...

    Jquery日历插件制作简单日历

    jQuery日历插件是网页开发中用于方便用户选择日期的工具,它极大地提升了用户体验,尤其在需要用户输入日期的场景下。jQuery UI 提供的 `datepicker` 插件是广泛使用的日历组件,其功能强大且易于定制。下面将详细...

    jquery倒计时插件多个倒计时同时计时代码

    本文将详细讲解如何使用jQuery实现多个倒计时插件同时计时的功能,这对于创建如考试倒计时、活动倒计时等多种场景都非常有用。 首先,我们需要一个基础的jQuery倒计时插件。这个插件通常包含以下核心功能: 1. **...

    JQuery.Datepick

    **jQuery.Datepick** 是一个基于JavaScript库jQuery的插件,专为网页应用设计的一个功能丰富的日期选择器。这个插件提供了多种日期选择模式,包括单个日期选择、日期范围选择以及多个日期选择,大大增强了用户在网页...

Global site tag (gtag.js) - Google Analytics