- 浏览: 207853 次
- 性别:
- 来自: 绍兴
文章分类
最新评论
-
112703013:
你好, 想问个问题 就是我这边上传一个zip文件 大概有100 ...
rails文件上传下载和删除 . -
chen_miao:
qplovechinese 写道 很好!
3q
simple jQuery date-picker plugin 使用 -
qplovechinese:
很好!
simple jQuery date-picker plugin 使用
simple jQuery date-picker plugin
是一款很方便使用的插件日历控件,样式简单,功能强大。现在就说一下在rails 3中使用。
它一共有三个部分,一是jquery 框架,二是就本身cal.js文件,最后一个是样式文件calendar.css.还有页面上jquery代码
<SCRIPT type=text/javascript> jQuery(document).ready(function () { $('input.one').simpleDatepicker(); $('input.two').simpleDatepicker({ startdate: 2008, enddate: 2012 });//时间从 2008--2012 $('input.three').simpleDatepicker({ chosendate: '9/9/2010', startdate: '6/10/2008', enddate: '7/20/2011' }); $('input.four').simpleDatepicker({ x: 45, y: 3 }); }); </SCRIPT>
从上面的代码中得到,它由input html控件来触发。
以下html页面代码且input 类型为text来使用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0039)http://teddevito.com/demos/calendar.php --> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>simple jQuery date-picker plugin</TITLE> <META content="text/html; charset=utf-8" http-equiv=Content-Type> <META name=description content="a simple date-picker built with the jquery library. this is NOT an everything-under-the-kitchen-sink date picker"> <META name=keywords content=datepicker,date-picker,jquery,jqueryplugin,calendar><LINK rel=stylesheet type=text/css href="simple%20jQuery%20date-picker%20plugin_files/calendar.css"> <STYLE type=text/css>P { FONT: 12px/1.3em Arial, Helvetica, sans-serif } UL { FONT: 12px/1.3em Arial, Helvetica, sans-serif } UL LI { FONT: 12px/1.3em Arial, Helvetica, sans-serif } BODY { PADDING-BOTTOM: 2em; PADDING-LEFT: 5em; PADDING-RIGHT: 5em; PADDING-TOP: 2em } </STYLE> <SCRIPT type=text/javascript src="simple%20jQuery%20date-picker%20plugin_files/jquery-1.3.2.min.js"></SCRIPT> <SCRIPT type=text/javascript src="simple%20jQuery%20date-picker%20plugin_files/cal.js"></SCRIPT> <SCRIPT type=text/javascript> jQuery(document).ready(function () { $('input.one').simpleDatepicker(); $('input.two').simpleDatepicker({ startdate: 2008, enddate: 2012 }); $('input.three').simpleDatepicker({ chosendate: '9/9/2010', startdate: '6/10/2008', enddate: '7/20/2011' }); $('input.four').simpleDatepicker({ x: 45, y: 3 }); }); </SCRIPT> <META name=GENERATOR content="MSHTML 8.00.7600.16891"></HEAD> <BODY> <H1>simple jQuery date-picker plugin</H1> <H6>last updated <!-- #BeginDate format:Am2 -->3/12/09<!-- #EndDate --> </H6> <P>Here's a nifty little date picker, but it's not complete. In fact, it may need YOUR help.</P> <P>All the code here is original. I have to thank Mike Alsup for suggesting the development pattern that helped this go from one-off simple script to ready-to-use jQuery plugin.</P> <P>You're welcome to use anything here as often as you like, even to include it as part of commercially release products. Please don't package and sell it as a standalone application.</P> <P>Please send comments and suggestions (complete with any code changes/updates) to:</P><IMG title="low-tech contact button" alt=images/contact.png src="simple%20jQuery%20date-picker%20plugin_files/contact.png"> <HR> <P>Some test inputs, each with a different setup:</P> <P><INPUT class=one type=text name=date> <INPUT class=two type=text name=date> <INPUT class=three type=text name=date></P> <P>Some more test inputs, each with the same setup:</P> <P><INPUT class=four type=text name=date> <INPUT class=four type=text name=date> <INPUT class=four type=text name=date></P> <H4>What is does:</H4> <UL> <LI>works on one or more text input elements (<CODE><input type="text" ... /></CODE>)</LI> <LI>highlights a preset date (first looking for a value in the input, then a passed option / default, then just selects today)</LI> <LI>closes when either a date is picked, the "today" button is hit, or the "close" button is hit</LI> <LI>allows fast navigation using a <select> field for months and years</LI> <LI>advances and reverses months with a hit of the <STRONG>«</STRONG> or <STRONG>»</STRONG> buttons</LI> <LI>automatically hides the <STRONG>«</STRONG> or <STRONG>»</STRONG> buttons when either the start or end of the date range is reached</LI> <LI>allows input for a year range and/or a date range</LI> <LI>adjusts for leap years</LI> <LI>allows you to set the x and y offset from the top left corner of the input elements</LI> <LI>allows you to easily change the output format (look for "<CODE>jQuery.fn.simpleDatepicker.formatOutput = function (dateObj) {...</CODE>")</LI> <LI>is easily styled via CSS</LI> <LI>works in IE 6, FF 3 (probably earlier) and Chrome 1.0 (and probably others... just don't have them here on my laptop)</LI></UL> <P>It is meant to NOT be an "everything-under-the-kitchen-sink" date picker. Just there to help a user pick a date.</P> <H4>How to use it:</H4> <P>Simply call <CODE>$('input').simpleDatepicker();</CODE> on the set of elements you would like to work with.</P> <H4>Options</H4> <P>You can pass an object literal with some options that will be applied to all the datepickers setup with that call to <CODE>simpleDatepicker()</CODE></P> <P><CODE>$('input').simpleDatepicker({chosendate: , startdate: , enddate: , x: , y: });</CODE></P> <TABLE> <THEAD> <TR> <TH>options</TH> <TH>values</TH></TR></THEAD> <TBODY> <TR> <TD class=code>[chosendate]</TD> <TD>date string matching <CODE>mm/dd/yyyy</CODE> or <CODE>m/d/yyyy</CODE></TD></TR> <TR> <TD class=code>[startdate]</TD> <TD>4 digit year or date string matching <CODE>mm/dd/yyyy</CODE> or <CODE>m/d/yyyy</CODE></TD></TR> <TR> <TD class=code>[enddate]</TD> <TD>4 digit year or date string matching <CODE>mm/dd/yyyy</CODE> or <CODE>m/d/yyyy</CODE></TD></TR> <TR> <TD class=code>[x]</TD> <TD></TD>an integer, without quotes is fine, like so: <CODE>{ x: 6, y: 10 }</CODE></TR> <TR> <TD class=code>[y]</TD> <TD></TD>an integer, without quotes is fine, like so: <CODE>{ x: 6, y: 10 }</CODE></TR></TBODY></TABLE></BODY></HTML>
rails3中使用, 个人是把cal.js文件放在asset下的js文件夹下,calendar.css 放入样式文件夹下,把页面上的话放在rail asset下的js文件夹下,也就下面这断
<SCRIPT type=text/javascript> jQuery(document).ready(function () { $('input.one').simpleDatepicker(); $('input.two').simpleDatepicker({ startdate: 2008, enddate: 2012 }); $('input.three').simpleDatepicker({ chosendate: '9/9/2010', startdate: '6/10/2008', enddate: '7/20/2011' }); $('input.four').simpleDatepicker({ x: 45, y: 3 }); }); </SCRIPT>
再用页面中html标签引有
<P><INPUT class=one type=text name=date> <INPUT class=two type=text name=date> <INPUT class=three type=text name=date></P> <P>Some more test inputs, each with the same setup:</P> <P><INPUT class=four type=text name=date> <INPUT class=four type=text name=date> <INPUT class=four type=text name=date></P>
引用方式主要是class与类型为text来使用,要不然失败的,
在rails中,写成
<%=text_field_tag '****' ,{},:class=>'one',%>
这样就可以在点击文本框时,日历就会出现,但是英文显示
改下面代码可以中文显示
var today = new Date(); // used in defaults var months = 'January,February,March,April,May,June,July,August,September,October,November,December'.split(','); var monthlengths = '31,28,31,30,31,30,31,31,30,31,30,31'.split(','); var dateRegEx = /^\d{1,2}\/\d{1,2}\/\d{2}|\d{4}$/; var yearRegEx = /^\d{4,4}$/;
把上面的months后的值换成一月,二月……………………十二月,就行
显示在下面代码中改
jQuery.fn.simpleDatepicker.formatOutput = function (dateObj) { return (dateObj.getMonth() + 1) + "/" + dateObj.getDate() + "/" + dateObj.getFullYear(); };
把上面的return中的值位置换换就行了
注意得的是,因为rails中因为有自己带的jquery框架,所以不用把jquery-1.3.2.min框架文件放进去,引用。
希望能给像我一样的初学者带来帮助。
现带个官方文件,用来演示
今天突然发现,有个bug,默认年份是现在的加上明年。所以在下面加上有关时间的内容。
<script language="javascript"> var d = new Date() var vYear = d.getFullYear() var vMon = d.getMonth() + 1 var vDay = d.getDate() var h = d.getHours(); var m = d.getMinutes(); var se = d.getSeconds(); s=vYear+(vMon<10 ? "0" + vMon : vMon)+(vDay<10 ? "0"+ vDay : vDay)+(h<10 ? "0"+ h : h)+(m<10 ? "0" + m : m)+(se<10 ? "0" +se : se); document.write(s);//输出时间 </script>
- simple_jQuery_date-picker_plugin.rar (31.9 KB)
- 下载次数: 123
发表评论
-
淘宝开源编辑器KISSY Editor
2013-01-04 16:46 2294KISSY Editor 是开源项目 KISSY ... -
jquery获得select option的值 和对select option的操作
2012-09-25 21:19 1187jQuery获取Select元素,并选择的Te ... -
js 彷excel 键盘上下左右移动
2012-09-03 19:11 2959思路假设初始坐标为(0,0)首先要算出表格的最大最小坐标 即( ... -
jquery 图表插件highcharts & highstock
2012-08-23 14:43 11079Highcharts是纯JavaScript编写的图表库,提 ... -
jquery jConfirm
2012-06-09 08:57 2979这个Jquery插件的目的是替代JavaScript的标准函数 ... -
jQuery Confirm 确认提示框插件
2012-06-08 19:50 9187jQuery Confirm是一个用于显示confirm确认提 ... -
jQuery操作checkbox选择
2012-06-07 14:05 891<!DOCTYPE ... -
jQuery获取元素位置以及高度与宽度
2012-04-28 14:05 3891form:http://apps.hi.baidu.com/s ... -
jquery 预加载图片
2012-04-24 14:39 1493from:http://dreamerslab.com/blo ... -
jquery 表格排序插件
2012-04-12 19:52 1520jquery 表格内容排序插件,插件来源:http://www ... -
jquery如何获得页面元素的坐标值
2012-04-10 21:15 1131jquery如何获得页面元素的坐标值 jquery如何获 ... -
ruby(rails)+jquery.ajax 登录和注册
2012-03-31 18:02 3345写一个简单ajax登录和注册方法,缩简写法 以注册为例!!! ... -
jquery 鼠标经过显示大图
2012-03-27 21:17 2969以下推存一下代码 <!DOCTYPE html PUB ... -
ruby js 导出表格为excel,word
2012-02-25 11:53 1364因为项目需要,所以在 ... -
jquery 条形码插件
2012-01-13 14:34 3859因为工作需求,项目简单化,所以rails3中使用jquery ...
相关推荐
将jQuery 日历控件simple jQuery date-picker plugin进行了一些修改。支持中文;支持点击div也显示控件;支持回调函数。
上次已经传过一个,这次修改更加彻底,更加方便,更加符合国内开发者使用。具体修改如下: 1、修改星期几为中文显示 2、修改日期显示,由之前的月/日/年,改为年/月/日 3、新增参数sign,可修改中间的间隔符。如sign...
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图,方便没有vip的小伙伴下载
date-picker 基本jquery的时间插件 , 多种模式, 非常好用
主要介绍了vue element-ui el-date-picker如何限制选择时间为当天之前,文中给大家提供了代码段和截图,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
element UI el-date-picker组件样式更改 popper-class="down-time" 原码是body下的弹出器
修改后的增加时间步长
时间选择器,可以选择时间段内的时间,有效提高jsp代码
jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制它的皮肤。它的兼容性非常好,支持IE6+的IE浏览器。
jQuery Date Range ...g npm安装gulp v3.9.1(全局安装) npm install -g gulp@3.9.1克隆此项目git clone https://github.com/longbill/jquery-date-range-picker.gitcd jquery-date-range-picker安装本地依赖项npm
前端项目-tiny-date-picker,一个小型的、无依赖关系的日期选取器
jQuery省市区三级联动插件city-picker,省市区三级联动demo
查找v1文档暗模式演示版安装纱yarn add vue-ctk-date-time-picker NPM npm i --save vue-ctk-date-time-picker用法ES6模块/ CommonJS import VueCtkDateTimePicker from 'vue-ctk-date-time-picker' ;import 'vue-...
Unobtrusive JavaScript date-picker widgit汉化版,date-picker汉化版
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制,如果屏幕显示不全,顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
React本机日期选择器 这是一个具有以下主要功能的React Native Date Picker: ...npm install react-native-date-picker或yarn add react-native-date-picker (cd ios && pod install) (如果您使用的是CocoaPod
react-native-image-picker 使用demo 详见:https://github.com/pheromone/mycamera
date-picker, 梯度依赖
react-native-modal-datetime-picker, 针对Android和iOS的本地日期时间选取器 react-native-modal-datetime-picker 声明性交叉平台响应本地日期时间选取器。描述这个库公开了一个跨平台接口,用于显示本机日期选取器...