jQuery.datePicker日历插件

转载 2011年01月10日 19:00:00

此datePicker应非jQuery ui中的datepicker插件,名称上虽然只差一个字母的大小写。

jQuery ui中的datepicker嵌在整个ui里不太好用,本人系懒人一个,也不善于做剥离代码,说实话,我也不喜欢他收缩显示隐藏的方式,对这些效果真是感觉厌倦了,实用才是第一需要的,所以在网上搜搜寻寻,找到这个插件。

插件源地址:http://www.kelvinluck.com/assets/jquery/datePicker/

原网站给出的datePicker,其实包括两个js文件:datePicker.js与date.js,这个具体的看他原给出的示例就明白,我觉得影响调用,干脆就把2个合成一个(如果你自己从原网站上下要注意和我示例中的不同)。

然后把日历中的英文称改成中文(在函数的最上面,原脚本在date.js中设置),又将Date.firstDayOfWeek=1改成0,把一周第一天为周一,改成周日,再稍微改改其他细节(相信有些脚本基础的都会改改)。

最后压缩了一下,由于源代码注解比较多,一压,原来2个文件加起来50多k,只剩下18k左右,哈哈。还有一个bgiframe脚本,由于日历插件在表单上应用比较多,就非常有可能有下拉菜单, 不用说,ie6的下拉菜单层级无人能敌问题是远近闻名。所以这里又附了一个 jquery.bgiframe.min.js 如示例中的源码:

 

<!--[if IE]><script type="text/javascript" src="js/jquery.bgiframe.min.js"></script><![endif]-->

 

如果有下拉菜单在日历控件下,这样再调用一行就ok了。

原网站上的日历外观灰土土的,实在不适合网站上广泛使用,我根据需要改了下,淡蓝色感觉,希望大家喜欢,呵呵,如果个人有需求,直接可以改datePicker.css样式, datePicker在具体示例中的调用:

html:

< input type="text" name="it" class="date-pick it" />

js:

$(window).ready(function(){$('.date-pick').datePicker({clickInput:true});});

 

我写的:

js:

$(document).ready(init);

 

$('#strJcsj').DatePicker({

date: $('#strJcsj').val(),

current: $('#strJcsj').val(),

position: 'bottom',

onBeforeShow: function(){

if($('#strJcsj').val() == "" || $('#strJcsj').val() == null){

beforeDate = strNowDate;

}else{

beforeDate = $('#strJcsj').val();

}

$('#strJcsj').DatePickerSetDate(beforeDate, true);

},

onChange: function(formated, dates){

$('#strJcsj').val(formated);

if(beforeDate != $('#strJcsj').val()){

beforeDate = $('#strJcsj').val();

$('#strJcsj').DatePickerHide();

}

$("#strJcsj").valid();

}

});

 

jsp:

<s:textfield id="strJcsj" name="strJcsj" readonly="true" theme="simple" customFunction="checkJcsj"/>

 

clickInput 为选择参数,表示点击input框时,是否显示日历控件, 其他更多参数,和更多调用方法(双日历,或者博客日历模式以及日期选择范围)大家可看原网站上的说明,地址为: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

 

附:有一个小bug:当单选框里的日期为非法时,页面会报错,当然这是人有意测试脚本时才会去手动输入非法日期,一般浏览者都以方便直观的选择日期为主,也期待完美吧。(设置为readonly?)

点击下载此文件 :http://www.cssrain.cn/attachments/month_0906/k2009629144950.rar

66推荐---

my97日历控件:my97主页:http://www.my97.net/dp/index.aspmy97

皮肤:http://www.cssrain.cn/article.asp?id=1343

 

转自: http://www.cnblogs.com/skyaspnet/archive/2010/07/21/1669675.html

相关文章推荐

JQuery日历插件My97DatePicker日期范围限制

JQuery日历插件My97DatePicker日期范围限制 作者:Cfans_gpl 时间:2012-12-4 22:40 Tuesday 分类: WEB开发  #坐上电梯直达评论...

JQuery日历插件My97DatePicker日期范围限制

My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制。 常规的调用比较简单,如下所示: 1 input class="Wdate" id=...

JQUERY日历插件MY97DatePicker

My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制。 常规的调用比较简单,如下所示: 1 input class=...

jquery DatePicker 日历插件

  • 2011年03月30日 16:29
  • 371KB
  • 下载

jQuery datepicker 日历插件

  • 2012年02月10日 11:07
  • 208KB
  • 下载

jQueryUI中Datepicker(日历)插件的介绍和使用(10级学员 郞志课堂笔记)

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 说明 ...

如何使用日历插件datepicker

演示地址:http://jqueryui.com/datepicker/ 下载地址:http://jqueryui.com/download/ 使用jQuery ui首先需要引入jQuery类库,jQ...

JqueryUI datepicker(日历)插件--实例选择日期

JqueryUI  datepicker(日历)插件--实例选择日期 今天我们主要的学习了jqueryUI交互性插件的日历。在页面开发中,经常会遇到需要用户输入日期的操作。今天我们不用一般的方法来实...

日期/日历插件My97Datepicker功能介绍

一. 简介1. 简介 目前的版本是:4.0 正式版 发布于2008-05-302. 注意事项My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 ...

jQueryUI中Datepicker(日历)插件的介绍和使用

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery.datePicker日历插件
举报原因:
原因补充:

(最多只允许输入30个字)