位置: IT常识 - 正文

日期选择器:jquery datepicker的使用(日期选择器的()属性表示选择器的粒度)

编辑:rootadmin
日期选择器:jquery datepicker的使用

推荐整理分享日期选择器:jquery datepicker的使用(日期选择器的()属性表示选择器的粒度),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:日期选择器样式,日期选择器样式,日期选择器组件起止时间为本月1号至次月15号,日期选择器传给后端的是什么类型,日期选择器的()属性表示选择器的粒度,日期选择器el–date–picker,日期选择器picker怎么调大小,日期选择器的()属性表示选择器的粒度,内容如对您有帮助,希望把文章链接给更多的朋友!

在jquery ui中,提供了一个非常实用的日期选择器:datepicker,使用它能非常方便的展现日历中的日期,灵活配置相关选项,包括日期格式、范围等。我们经常在WEB应用中用到datepicker,比如要求用户输入日期进行相关查询的。我们很早之前就应用datepicker到很多项目中,今天整理成文与大家分享。

demo http://www.helloweba.com/demo/datepicker/

download http://www.helloweba.com/demo/downzip/datepicker.rar

查看演示DEMO下载源码

查看演示DEMO下载源码

准备工作

首先请到jqueryui.com官网下载datepicker插件代码,注意官网提供了整个jquery ui的所有插件下载,但是您可以选择其中几个用到的插件下载,本文中只用到datepicker,所以只选择下载jquery ui核心代码和datepicker代码。你可以直接点击本文上面的Download下载按钮下载demo源码包,其中就包括了datepicker插件源码。

HTML

首先在head之间引入jquery库文件和datepicker插件以及相关css。

 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui-datepicker.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 

然后在body间加入一个输入框。

 <input type="text" id="date_1" /> 日期选择器:jquery datepicker的使用(日期选择器的()属性表示选择器的粒度)

Javscript

调用datepicker非常简单,直接使用以下代码就可以实现:

 $(function(){     $("#date_1").datepicker(); }); 

这样,单击输入框的时候会自动弹出一个日期选择器,选中日期后,自动关闭选择器,并在输入框中显示选中的日期。

选项及事件使用说明

datepicker提供了丰富的选项设置事件方法调用,笔者先将经常用到的相关属性和方法整理成表格,方便查询和使用。

选项描述默认值altField将选择的日期同步到另一个域中,配合altFormat可以显示不同格式的日期字符串。demo''altFormat当设置了altField的情况下,显示在另一个域中的日期格式。''appendText在日期插件的所属域后面添加指定的字符串。''buttonImage设置可以用来点击弹出日历的按钮图片,如果非空,则按钮的文本将成为alt属性,不直接显示。demo''buttonImageOnly设置为true时,图片将作为按钮可以点击触发弹出日历falsebuttonText设置触发按钮的文本内容。...changeMonth设置是否允许通过下拉框列表选取月份。falsechangeYear设置是否允许通过下拉框列表选取年份。falsecloseText设置关闭按钮的文本内容,此按钮需要通过showButtonPanel参数的设置才显示。'Done'constrainInput如果设置为true,则约束当前输入的日期格式。truecurrentText设置当天按钮的文本内容,此按钮需要通过showButtonPanel参数的设置才显示。'Today'dateFormat设置日期字符串的显示格式。demo'mm/dd/yy'dayNames设置一星期中每天的名称,从星期天开始。此内容用于dateFormat时显示,以及日历中当鼠标移至行头时显示。['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']dayNamesMin设置一星期中每天的缩语,从星期天开始,此内容用于dateFormat时显示,以前日历中的行头显示。['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']dayNamesShort设置一星期中每天的缩语,从星期天开始,此内容用于dateFormat时显示,以前日历中的行头显示。['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']defaultDate设置默认加载完后第一次显示时选中的日期。可以是Date对象,或者是数字(从今天算起,例如+7),或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如:'+1m +7d')。nullduration设置日期控件展开动画的显示时间,可选是"slow", "normal", "fast",''代表立刻,数字代表毫秒数。'normal'firstDay设置一周中的第一天。星期天为0,星期一为1,以此类推。0gotoCurrent如果设置为true,则点击当天按钮时,将移至当前已选中的日期,而不是今天。falsehideIfNoPrevNext设置当没有上一个/下一个可选择的情况下,隐藏掉相应的按钮。falseisRTL如果设置为true,则所有文字是从右自左。falsemaxDate设置一个最大的可选日期。可以是Date对象,或者是数字(从今天算起,例如+7),或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如:'+1m +7d')。demonullminDate设置一个最小的可选日期。可以是Date对象,或者是数字(从今天算起,例如+7),或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如:'+1m +7d')。nullmonthNames设置所有月份的名称。['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']monthNamesShort设置所有月份的缩写。['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']navigationAsDateFormat如果设置为true,则formatDate函数将应用到 prevText,nextText和currentText的值中显示,例如显示为月份名称。falsenextText设置“下个月”链接的显示文字。'Next'numberOfMonths设置一次要显示多少个月份。如果为整数则是显示月份的数量,如果是数组,则是显示的行与列的数量。demo1prevText设置“上个月”链接的显示文字。'Prev'shortYearCutoff设置截止年份的值。如果是(0-99)的数字则以当前年份开始算起,如果为字符串,则相应的转为数字后再与当前年份相加。当超过截止年份时,则被认为是上个世纪。'+10'showAnim设置显示、隐藏日期插件的动画的名称。'show'showButtonPanel设置是否在面板上显示相关的按钮。falseshowCurrentAtPos设置当多月份显示的情况下,当前月份显示的位置。自顶部/左边开始第x位。0showMonthAfterYear是否在面板的头部年份后面显示月份。falseshowOn设置什么事件触发显示日期插件的面板,可选值:focus, button, both'focus'showOptions如果使用showAnim来显示动画效果的话,可以通过此参数来增加一些附加的参数设置。{}showOtherMonths是否在当前面板显示上、下两个月的一些日期数(不可选)。falsestepMonths当点击上/下一月时,一次翻几个月。1yearRange控制年份的下拉列表中显示的年份数量,可以是相对当前年(-nn:+nn),也可以是绝对值 (-nnnn:+nnnn)'-10:+10'beforeShow在日期控件显示面板之前,触发此事件,并返回当前触发事件的控件的实例对象。function(input)beforeShowDay在日期控件显示面板之前,每个面板上的日期绑定时都触发此事件,参数为触发事件的日期。调用函数后,必须返回一个数组:[0]此日期是否可选(true/false),[1]此日期的CSS样式名称(""表示默认),[2]当鼠标移至上面出现一段提示的内容。function(date)onChangeMonthYear当年份或月份改变时触发此事件,参数为改变后的年份月份和当前日期插件的实例。function(year, month, inst)onClose当日期面板关闭后触发此事件(无论是否有选择日期),参数为选择的日期和当前日期插件的实例。demofunction(dateText, inst)onSelect当在日期面板选中一个日期后触发此事件,参数为选择的日期和当前日期插件的实例。function(dateText, inst)

http://www.jb51.net/article/27184.htm

   jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件。     一般MIS系统的前端,尤其是用户注册页面,都会有诸如“出身年月”的日期输入框,最简单的做法就是使用一个<input type="text"/>标签,这样做的弊端有很多:首先是与数据库字段类型的匹配、其次是输入日期的合法性如“13月”或者闰年等等问题,如果深入下去还有非常多的地方值得推敲。当前比较流行的做法是使用下拉菜单<select><option></option></select>来构造,但是这样做无论交互性、复杂度和可移植性都不尽如人意,因为至少需要构建3个联动的下拉菜单,需要自己编写大量的脚本处理日期合法性。     datepicker带来了美好的春天,先看看使用默认样式时它的样子:

        完全GUI般的用户体验,炫目的动态展现效果,精确的日期控制和高度的灵活的参数配置,这一切使得datepicker受到众多开发者的青睐,其中包括大名鼎鼎的google,在其google calendar项目中就使用了这个脚本,有兴趣可以去看看。顺便啰嗦一句,上图的默认效果,在javascript中,用户只需写一句话就可以实现了,怎么样,心动了吧,follow me:     1.下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后下载datepicker(内含jQuery1.2.6_min),您也可以到官方网站下载:http://marcgrabanski.com/pages/code/jquery-ui-datepicker。     2.在HTML中引用下载下来的两个js:

<script language="javascript" src="js/jquery-1.2.6.min.js"></script><script language="javascript" src="js/ui.datepicker.js"></script>

    3.在HTML中引入默认样式表文件,这个文件也在刚刚的压缩包中,如果在官网下载,首页就有这个CSS文件下载,也可选择其他皮肤的CSS:

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />

    4.在HTML中插入文本域,最好设置成只读,不接受用户的手动输入,防止格式混乱,以id标记好。

<input id="dateinput" type="text" readonly="readonly"/>

    5.编写js代码,实现最终效果。

<script language="javascript">$(document).ready(function() {         $('#dateinput').datepicker();     });  </script>

这样就基本完成一个日期输入文本域了,但是是英文的,根据不同的MIS系统,有的目标人群是上了年级的用户,建议将界面改成中文,可以如此操作,稍微改动一下刚刚的函数,like this:

<script language="javascript">$(document).ready(function() {         $('#dateinput').datepicker({             dateFormat: 'yy-mm-dd',  //日期格式,自己设置           buttonImage: 'calendar.gif',  //按钮的图片路径,自己设置           buttonImageOnly: true,  //Show an image trigger without any button.           showOn: 'both',//触发条件,both表示点击文本域和图片按钮都生效       yearRange: '1990:2008',//年份范围       clearText:'清除',//下面的就不用详细写注释了吧,呵呵,都是些文本设置       closeText:'关闭',       prevText:'前一月',       nextText:'后一月',       currentText:' ',       monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],       });     });  </script>

OK,大功告成,我根据自己的要求,写的页面的代码如下,仅供参考,自己尝试一下吧:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" /><script language="javascript" src="js/jquery-1.2.6.min.js"></script><script language="javascript" src="js/ui.datepicker.js"></script><script language="javascript">$(document).ready(function() {          var yearFrom=new Date().getYear()-60+1900;        var yearTo=new Date().getYear()-18+1900;             $('#dateinput').datepicker({         dateFormat: 'yy-mm-dd',         buttonImage: 'calendar.gif',         buttonImageOnly: true,         showOn: 'both',       yearRange: yearFrom+':'+yearTo,       clearText:'清除',       closeText:'关闭',       prevText:'前一月',       nextText:'后一月',       currentText:' ',       monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],       });     });  </script></head><body><input id="dateinput" type="text" readonly="readonly"/></body></html>
本文链接地址:https://www.jiuchutong.com/zhishi/298995.html 转载请保留说明!

上一篇:expdp/impdp oracle数据泵导入导出

下一篇:2022年 change detection遥感图像变化检测 论文附代码

  • 腾讯会议怎么看别人云录制(腾讯会议怎么看回放?)

    腾讯会议怎么看别人云录制(腾讯会议怎么看回放?)

  • 微信卡包怎么看(微信卡包怎么看发票)

    微信卡包怎么看(微信卡包怎么看发票)

  • 为什么关联qq看不到别人发的信息给他(为什么关联qq看不到对方聊天记录都是撤回)

    为什么关联qq看不到别人发的信息给他(为什么关联qq看不到对方聊天记录都是撤回)

  • 华为p40怎么设置铃声(华为p40怎么设置24小时)

    华为p40怎么设置铃声(华为p40怎么设置24小时)

  • 计算机操作系统是管理计算机硬件和软件的什么(计算机操作系统期末题库)

    计算机操作系统是管理计算机硬件和软件的什么(计算机操作系统期末题库)

  • 苹果手机外音没声音什么原因(苹果手机外音没有了,耳机可以是怎么回事)

    苹果手机外音没声音什么原因(苹果手机外音没有了,耳机可以是怎么回事)

  • 苹果电脑一直转圈圈(苹果电脑一直转圈怎么办)

    苹果电脑一直转圈圈(苹果电脑一直转圈怎么办)

  • 键盘颜色怎么切换(键盘颜色怎么切换deil)

    键盘颜色怎么切换(键盘颜色怎么切换deil)

  • 企业微信怎么申请(企业微信怎么申请注销)

    企业微信怎么申请(企业微信怎么申请注销)

  • 设置个人来电专属铃声(设置个人来电铃声)

    设置个人来电专属铃声(设置个人来电铃声)

  • 手机淘宝1元秒杀在哪里(手机淘宝1元秒杀在哪里找)

    手机淘宝1元秒杀在哪里(手机淘宝1元秒杀在哪里找)

  • 怎么调路灯自动定时器(路灯怎么调定时)

    怎么调路灯自动定时器(路灯怎么调定时)

  • 拼多多购买如何备注(拼多多购买如何选择多个)

    拼多多购买如何备注(拼多多购买如何选择多个)

  • 拼多多销量是累积的吗(拼多多销量是累计销量吗)

    拼多多销量是累积的吗(拼多多销量是累计销量吗)

  • 华为p30拍视频带美颜吗(p30拍照视频)

    华为p30拍视频带美颜吗(p30拍照视频)

  • vivox27怎么打开微信美颜(vivox27怎么打开卡槽)

    vivox27怎么打开微信美颜(vivox27怎么打开卡槽)

  • 小猿搜题可以搜大学题目吗(小猿搜题可以搜日语题目吗)

    小猿搜题可以搜大学题目吗(小猿搜题可以搜日语题目吗)

  • jawa是什么(jawa是什么轮毂)

    jawa是什么(jawa是什么轮毂)

  • 《少有人走的路》好在哪里(《少有人走的路1:心智成熟的旅程》)

    《少有人走的路》好在哪里(《少有人走的路1:心智成熟的旅程》)

  • ns1112y压缩机多少瓦(ns112y压缩机多少瓦)

    ns1112y压缩机多少瓦(ns112y压缩机多少瓦)

  • 苹果手机锁屏时间位置怎么移动(苹果手机锁屏时微信视频来电不显示)

    苹果手机锁屏时间位置怎么移动(苹果手机锁屏时微信视频来电不显示)

  • 拼接图怎么做(字幕拼接图怎么做)

    拼接图怎么做(字幕拼接图怎么做)

  • 艾草的功效与作用(艾草图片)(艾草的功效与作用洗头)

    艾草的功效与作用(艾草图片)(艾草的功效与作用洗头)

  • 帝国cms如何做移动端适配(帝国cms视频教程)

    帝国cms如何做移动端适配(帝国cms视频教程)

  • 小规模纳税人第一次网上报税
  • 煤矿企业维简费税务规定
  • 2021留美学生签证
  • 购销行为的帐务处理如何做?
  • 收到政府土地收回的短信
  • 小企业营业外收入明细
  • 所得税汇算清缴分录怎么做
  • 出纳如何登账
  • 房地产开发企业销售自行开发的房地产项目
  • 核定征收小微企业
  • 固定资产备案怎么备案
  • 税局定额的标准
  • 增值普通发票税率怎么算
  • 专项维修基金和契税有什么区别
  • 小型微利企业普惠性
  • 对境外支付佣金的规定
  • 劳务派遣公司支付劳务费怎么做账
  • 银行承兑汇票贴现
  • 有进项没有销项会计处理
  • 存货跌价准备的金额
  • Mac怎么更改锁屏密码
  • 房产的评估增值属于土地增值税征税范围对吗
  • 信用证保证金账户
  • 新买的电脑如何激活windows
  • 如何防止win10自动重启
  • phpstudy如何查看错误日志
  • 咨询公司流程完整
  • win11怎么双击直接打开程序
  • Linux系统中怎么定位到java代码的方法级
  • 借股东现金会计分录
  • php中strstr
  • 资产负债表申报怎么填
  • php单例模式的简写是什么
  • php获取文本内容
  • php sha1加密 解密
  • 工程项目成本核算的依据主要有
  • 实现自己的http server loop_in_codes C++博客
  • 纳税人异地预缴所得税
  • 怎么能开公司
  • 财政拨款结转的核算
  • js中的对象种类有哪些
  • mysql清空缓存
  • 电商会计如何做账
  • 确认收入时还没交税
  • 应交税费在会计科目的借贷方向
  • 购买服务费用
  • 金税四期视频
  • 印花税啥样
  • 工会经费如何支出
  • 坏账准备贷方余额期末如何处理
  • 差旅费记入应付职工薪酬吗
  • 进口免税产品如何开票
  • 公司账户可以转个人支付宝吗
  • 划转税务的非税收入包括
  • 旅游业开具的是什么证明
  • 通行费发票电子化 机场路
  • 销售自产农产品怎么核算成本
  • 应收账款转让会计分录 未实际收到对价
  • 研发费用占销售的比例
  • 新税法和新准则的关系
  • mysql数据库备份和恢复
  • 不重装系统怎么修复
  • slmgr.vbs /dli
  • nhaspx.exe是什么
  • macbook系统怎么用
  • 内存运行linux
  • centos7 本地yum
  • win7 显示日期
  • Nodejs Express4.x开发框架随手笔记
  • node.js cookie-parser之parser.js
  • unity手机游戏开发教程
  • python标准库os中的方法
  • unity调用c++封装的dll
  • 安卓版影音播放器哪个好用
  • jqueryui
  • 北京车辆过户办理
  • 广东国家电子税务全电发票
  • 加计扣除为什么是税收优惠
  • 办公电话怎么设置铃声
  • 个人所得税优惠政策最新2023年度
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设