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

![endif]-->!--[if>

实用插件(九)手机日历插件——Mobiscroll

1、点我下载2、使用方法:
  • qq_39198420
  • qq_39198420
  • 2017年12月28日 16:22
  • 191

两款超好用js日历插件(fullcalendar和zabuto_calendar)

这两款插件特别类似,其实用其中一款即可。 先展示一下我用这两款插件制作的排班系统 这个是fullcalendar插件制作的排班页面,左边新建一系列组和组员,可以将人员直接拖拽至右边的日历上,不...
  • cc_blog
  • cc_blog
  • 2016年12月15日 13:15
  • 8817

实用插件(六)手机日历插件——LCalendar

1、点我下载2、使用方法:
  • qq_39198420
  • qq_39198420
  • 2017年09月01日 10:46
  • 1811

Html5添加带备忘录功能的简单的日期选择器插件教程

KeyMob移动端广告平台,为广告主提供精准的效果营销和品牌推广服务,为应用开发者在游戏、应用端提供移动广告植入业务,创造更高的广告收益。...
  • Angel19951012
  • Angel19951012
  • 2016年01月08日 11:12
  • 1567

从零开始写一个jquery日历插件(一)

简单来说,jquery插件为扩展jquery原型对象的一个方法。编写jquery插件其实就是给jquery原型添加一个自定义的方法。我们先来看一个最简单的例子:$(“a”).attr(“href”,”...
  • a379402005
  • a379402005
  • 2017年08月01日 23:14
  • 946

实用的签到、日程表日历控件(可扩展)

当初写这个控件主要是为了每日签到。当然你也可以改成事件(日程表)的日历控件,所有代码和样式都会分享给你。javascript代码极其简单,详细请下载demo文件(最下方有下载链接)。其实网上能搜索到很...
  • xj447698556
  • xj447698556
  • 2015年11月28日 20:27
  • 6744

JS PC端时间日历插件 功能齐全 无依赖

时间日历插件,网上有很多版本,功能强大的,功能简单的数不尽数,那为什么我还要写一个日历插件呢? 很认真的告诉你: 就是闲下来随便敲敲。 开发一个功能齐全的日期选择插件根据自己的业务需求不断优化更新...
  • wangweianger
  • wangweianger
  • 2017年12月27日 18:41
  • 426

基于jquery实现日历签到功能

使用Jquery实现每日签到功能 基于jquery实现日历签到功能 jquery记事日历插件e-calendar   思路: 1、获取当月第一天是周几 2、获取当月共几天 通过获取下月的...
  • cbjcry
  • cbjcry
  • 2017年04月13日 11:13
  • 3250

bootstrap日历插件的使用

bootstrap日历插件的使用 1、插件引用                               2、html代码 开始日期: 结束日期: 3、js代码 /** *...
  • dunegao
  • dunegao
  • 2017年09月04日 14:29
  • 334

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

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

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