位置: 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遥感图像变化检测 论文附代码

  • 计算机网络由哪几个部份组成(计算机网络由哪些硬件组成)

    计算机网络由哪几个部份组成(计算机网络由哪些硬件组成)

  • ios无法下载app请重试(iphone提示无法下载应用)

    ios无法下载app请重试(iphone提示无法下载应用)

  • 18款和19款的macbook区别(18款和19款的奥德赛导航通用吗)

    18款和19款的macbook区别(18款和19款的奥德赛导航通用吗)

  • 苹果11怎么设置热点(苹果11怎么设置双卡双待)

    苹果11怎么设置热点(苹果11怎么设置双卡双待)

  • 荣耀30s权益版什么意思(荣耀30权益查询在哪个地方)

    荣耀30s权益版什么意思(荣耀30权益查询在哪个地方)

  • wps office闪退怎么办(wps office闪退咋回事)

    wps office闪退怎么办(wps office闪退咋回事)

  • 充电头滋滋响解决办法(充电头 滋滋响)

    充电头滋滋响解决办法(充电头 滋滋响)

  • 钉钉老师能看到谁点赞吗(钉钉老师能看到作业提交记录吗)

    钉钉老师能看到谁点赞吗(钉钉老师能看到作业提交记录吗)

  • 知乎闪退怎么回事(知乎闪退怎么回复)

    知乎闪退怎么回事(知乎闪退怎么回复)

  • 动圈式话筒与扬声器工作原理(动圈话筒的区别)

    动圈式话筒与扬声器工作原理(动圈话筒的区别)

  • jsnalooa是什么型号(js nan是什么类型)

    jsnalooa是什么型号(js nan是什么类型)

  • 苹果手机充电接触不稳定怎么弄(苹果手机充电接触不良,断断续续)

    苹果手机充电接触不稳定怎么弄(苹果手机充电接触不良,断断续续)

  • 微博怎么查看离线缓存(微博离线在哪看)

    微博怎么查看离线缓存(微博离线在哪看)

  • 金立多任务界面在哪(金立多任务键怎么设置)

    金立多任务界面在哪(金立多任务键怎么设置)

  • 荣耀7x可以放内存卡吗(华为荣耀7x可以放内存卡吗)

    荣耀7x可以放内存卡吗(华为荣耀7x可以放内存卡吗)

  • 苹果回收站在哪里(今日苹果回收价格表)

    苹果回收站在哪里(今日苹果回收价格表)

  • oppor17长多少厘米(oppor17长宽厚是多少)

    oppor17长多少厘米(oppor17长宽厚是多少)

  • 微信如何多方视频(怎样微信多方视频)

    微信如何多方视频(怎样微信多方视频)

  • 关掉定位还能定位我吗(关掉定位还能定位行程吗)

    关掉定位还能定位我吗(关掉定位还能定位行程吗)

  • vivo手机里的照片怎么转移到U盘(vivo手机里的照片怎么传到华为手机里)

    vivo手机里的照片怎么转移到U盘(vivo手机里的照片怎么传到华为手机里)

  • 华为p30怎样设置24小时制(华为P30怎样设置关机后显示时间?)

    华为p30怎样设置24小时制(华为P30怎样设置关机后显示时间?)

  • 苹果删除照片最近删除里没有(删除照片iphone)

    苹果删除照片最近删除里没有(删除照片iphone)

  • 从购买服务器到网站搭建成功保姆级教程~超详细(购买完服务器之后要怎么做)

    从购买服务器到网站搭建成功保姆级教程~超详细(购买完服务器之后要怎么做)

  • 水电怎么开票
  • 库存暂估入账
  • 劳务发票可以抵扣多少
  • 办公家具可以一次性税前扣除吗
  • 合同上怎么注明开具6%的含税普通发票
  • 增值税小规模纳税人优惠政策
  • 取得虚开发票所得税分录如何处理?
  • 卖二手车
  • 预交税费怎么做分录
  • 财务费用过多有什么影响
  • 募集资金怎么算
  • 企业为什么用银行承兑汇票
  • 出口贸易没有进口贸易
  • 代扣代缴的增值税怎么做账
  • 仓储费专用发票可以抵扣吗?
  • 现金流量表中现金流量净额怎么算
  • 金蝶年结后发现错误怎么办
  • 企业所得税哪些不可以税前扣除
  • 民间非营利组织会计制度及操作实务
  • 货物分批付款会计处理
  • 专票当普票入帐有问题吗
  • 员工出差买的保险怎么入账
  • 本年固定资产投资额与不良贷款的关系
  • 库存商品成本变动率
  • 生产车间的费用会计分录
  • 财务报表包括哪几个表
  • 反映企业在一定会计期间经营成果的会计报表
  • 腾讯手游助手玩不了金铲铲
  • 购入嵌入式软件能一次性扣除吗
  • 如何快速判断
  • 苹果mac双系统按住哪个键
  • 免费投放资产收益的平台
  • 上季度的亏损可以弥补下季度的企业所得税
  • 发票其他服务费包括哪些
  • js数组常用方法有哪几种
  • yolov5l
  • php基本语句
  • 商业企业常用会计科目
  • java transactional
  • 分公司和总公司的税务和财务关系
  • 为什么增值税申报表保存不了
  • 焊材领用发放管理
  • 金税盘v2.0.41怎么扫码开票
  • ps怎么移动某个图案
  • 带附件的目录
  • 出差飞机票会计分录
  • 工业生产的含义
  • 工会建账需要建几本账
  • 企业自查补税怎么报税
  • 金融企业有
  • 资本公积转为实收资本会计科目
  • 滴滴打车老板起源故事
  • 出口收汇核销单的作用
  • 债权资产包括哪些科目内容
  • 会计中为什么要用黑色笔写
  • 年末净利润为负说明什么
  • 使用 GUID 值来作为数据库行标识讲解
  • boxjs
  • ubuntu18虚拟机
  • centos 安装
  • win7修改系统版本
  • win8.1 开始
  • win7系统无法创建分区也无法定位
  • win10qq经常卡
  • perl 删除文件
  • unity判断点击ui
  • js设置iframe隐藏
  • Python统计代码
  • cocos lua调试
  • 访问网页显示脚本错误
  • android系统启动流程
  • doctype报错
  • ios反编译源代码
  • substrate框架原理
  • 北京税务局地税电话
  • 长春国税局科员工资是多少
  • 四川国税总局官网
  • 现在哪个保险公司车险好
  • 资源税什么意思
  • 2021年房产税收新政
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设