- 浏览: 49211 次
- 性别:
- 来自: 南京
最新评论
-
wuyizhong:
夏末忆逝 写道不兼容其他浏览器 忘记加上了,只在IE下试过。
完整的JSP实现打印预览、打印设置等功能demo -
夏末忆逝:
不兼容其他浏览器
完整的JSP实现打印预览、打印设置等功能demo
此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]--> <!--[if ie=""><mce:script type="text/javascript" src="js/jquery.bgiframe.min.js" mce_src="js/jquery.bgiframe.min.js"></mce: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
发表评论
-
正则表达式 整数
2013-12-01 09:52 723^[1-9]\d*$ //匹配正 ... -
select 循环 attribute id does not accept any expressions
2013-12-01 09:52 799居然这样只写 解决了 <select name=&q ... -
DBeaver (mark一把)
2012-07-03 09:57 1090DBeaver 1.6 开源版本发布。开源许可为GPL(作者说 ... -
java中获取当前系统时间,日期并格式化输出
2012-07-03 09:57 1031一. 获取当前系统时间和日期并格式化输出: import j ... -
android EditText中inputType的属性列表
2012-07-03 09:57 1236android 1.5以后添加了软件虚拟键盘的功能,所以 ... -
Struts2单选按钮标签s:radio的使用及其设置默认值
2012-04-24 13:59 3572首先在页面中引入struts标签库: <%@ t ... -
java环境变量配置
2012-04-20 13:25 775JAVA_HOME指明JDK安装路径,就是刚才安装时所选择的路 ... -
colorbox
2012-04-19 15:39 925使用实例如下:一,使用ColorBox灯箱显示一张图片和 ... -
java caused by:java.sql.SQLException
2010-07-07 13:02 1533java.sql.SQLException: ORA- ... -
js获取浏览器信息
2010-12-20 08:52 697<body> <script type=& ... -
解决eclipse-helios中Errors running builder JavaScript Validator的问题
2011-05-26 10:43 905Web项目在打开的时候,总是在验证的时候弹出错误:Errors ... -
jstl对Map,list的操作
2011-07-19 10:29 838//jstl对Map的操作 /**当forEach 的ite ... -
java 获取 google地址
2011-12-12 11:41 712private String getAddr(Stri ... -
使用方向键切换INPUT焦点之左右键补遗
2012-02-01 14:11 1143使用方向鍵切換INPUT焦點之左右鍵補遺兩年前曾在一個小專案實 ... -
struts2中s:select标签的使用
2012-04-17 14:28 9121.第一个例子:<s:select list=&q ... -
jquery如何实现过几秒消失的标签提示
2012-01-10 17:44 2562<head> <style> ... -
jquery如何实现过几秒消失的标签提示
2012-01-10 17:43 764<head> <style> ... -
jqGrid编辑
2011-08-22 13:38 2142jqGrid的编辑——基础知 ... -
Javascript跳转页面和打开新窗口等方法
2011-07-09 13:36 11891.在原来的窗体中直接跳转用 window.loc ... -
完整的JSP实现打印预览、打印设置等功能demo
2011-07-09 11:41 2423<%--一个完整的JSP实现打印预览、打印设 ...
相关推荐
实用漂亮jQuery网页日历插件datePicker下载
jQuery datepicker 日历插件 使用手册
jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日历表 jquery.datePicker日历控件应用input:text文本框弹出日历表选择日期时间,设置默认显示日历表展示。jquery日历控件下载。
jquery的日期插件Datepicker,这两天正好研究完了,将研究结果分享下,单独的封装汉化版本,都有注释,好修改也好使用,注意保持images里面图片的名称和路径,red-datepicker.css可以定义日期div的样式,我自己在源...
jQuery UI Datepicker 插件和timepicker 共同组成时分秒的日历控件,包含汉化,中文显示日历样式
使用jquery日期控件所需的js文件。 包含 (1)jquery.js (2)jquery.ui.core.js (3)jquery.ui.widget.js (4)jquery.ui.datepicker.js
第一个日历插件的使用实例 首先导入需要的类库文件: <</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script> <</SPAN>scripttype=...
本文实例讲述了jquery日历插件datepicker用法。分享给大家供大家参考,具体如下: 我用过好几种日历插件,有的太花哨,有的太简单,有的浏览器不兼容等等,没有一个能让我感到满意的,后来同事给我推荐了jquery....
更新内容: [新增]全键盘操作,不用鼠标也可以选择日期 [新增]dateFmt可以直接使用%y %M %d %ld等内置常量 [新增]isShowOK属性,可以隐藏确定按钮 [新增]当使用onfocus触发时,焦点在日期控件时,也会弹出日期控件 ...
jQuery datePicker,是一款灰色风格超实用漂亮网页日历组件,在保证外观的基础上,本插件更注重功能的体验,操作很舒服,想使用网页日期选择器的朋友,本款是您不错的选择。
jQuery多功能日期时间选择器datepicker是一款支持多种日历模式的日期时间选择插件,功能已经十分全面。
Datepicker简洁的日历插件,前端导入改成自己想要的样式
jQuery双日历插件daterangepicker,这是一个双日历,可以和bootstrap 配合使用,界面比较简洁,比较适合做时间区域选择的功能
如果使用jQuery UI中的datepicker(日历)插件,这些问题都可以迎刃而解。该插件调用的<span xss=removed><strong>语法格式</strong></span>如下: $(“.selector”).datepicker(options); 其中”.selector”...
jQuery Datepicker Rails插件 这个简单的gem允许您在视图中添加日期选择器字段。入门 Pre Rails 3.1: 添加到您的Gemfile中: gem 'jquery-rails'执行此命令以安装所需的js文件: rails generate jquery:install --...
内容索引:脚本资源,jQuery,JS日历,jQuery日历插件,日期选择器 不一样的jQuery日历组件,datepicker与jQuery的完美配合,可以多种方式调用日历,一次可以单个显示,也可以多个连续显示,如上图示。自带的示例文件...
主要为大家详细介绍了jQuery日历插件datepicker用法,感兴趣的小伙伴们可以参考一下
这是一款非常优秀的jquery日历插件,并附有汉化版。