位置: 编程技术 - 正文

jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载(jquery日期控件onchange事件)

编辑:rootadmin

推荐整理分享jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载(jquery日期控件onchange事件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery日期控件 datepicker,jquery时间格式,jquery 日期时间控件,jquery日期控件 datepicker,jquery日期控件onchange事件,jquery日期控件onchange事件,jquery 日期时间控件,jquery 日期时间控件,内容如对您有帮助,希望把文章链接给更多的朋友!

我们经常会应用到日期和时间选择器,之前我们使用最多的是jQuery UI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期选择器datedropper以及时间选择器timedropper,他们俩尤其适合在移动端上应用。

在线演示 源码下载

日期选择器datedropper

使用非常简单,分三步,

1、引入相关js和css文件。注意datedropper和timedropper都是基于jQuery的插件,所以也要引入jQuery库文件。

2、布置body中的html。

3、调用datedropper

然后,就是可以根据需要适当配置一些选项。datedropper提供了如下基本选项设置:

animate:展示动画效果,当设置为true时,选择器面板中的日期会做动画滚动到当前日期,默认是true。

init_animation:点击弹出面板时的动画效果,有fadeIn(默认), bounce, dropDown三种效果。

format:格式化日期,我已经将默认的格式改成了Y-m-d。

lang:语言,我已经将插件默认的月份和星期翻译成中文语言了。

maxYear:最大年份,默认当前年份。

jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载(jquery日期控件onchange事件)

minYear:最小年份,默认。

yearsRange:年份范围,默认年。

dateDropper还提供了皮肤样式的设置。

时间选择器timedropper

和日期选择器一样,使用也简单。

1、引入js和css文件。

2、布置body中的html。

3、调用timedropper

timeDropper提供了如下基本选项设置:

meridians:是否小时制,默认是小时制,设置为false则为小时制。

format:格式化,HH:mm如:。

init_animation:动画形式,fadeIn(默认), dropDown。

setCurrentTime:自动设置当前时间。

timeDropper也提供了皮肤样式的设置。

jQuery移动端日期(datedropper)和时间(timedropper)选择器的内容就给大家介绍这么多,感兴趣的朋友可以查看效果演示,下载源码哦!

jQuery实现选项联动轮播效果【附实例】 !doctypehtmlhtmllang="en"headmetacharset="UTF-8"metaname="Generator"content="EditPlus"metaname="Author"content=""metaname="Keywords"content=""metaname="Description"content=""linkrel="stylesheet"href="

Jquery实现的简单轮播效果【附实例】 Jquery实现的简单轮播效果【附实例】!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlelinkrel="stylesheet"href="css/index.css"scriptsrc="js/jquery-1..3.js"/scriptscriptsrc=

jquery使用Cookie和JSON记录用户最近浏览历史 在一些电商网站,有商品浏览历史记录这一功能,一些视频类、小说类的网站也能记录用户最近的浏览历史。本文将使用Cookie以及JSON来讲解如何实现这

本文链接地址:https://www.jiuchutong.com/biancheng/384965.html 转载请保留说明!

上一篇:简单讲解jQuery中的子元素过滤选择器(jquery详解)

下一篇:jQuery实现选项联动轮播效果【附实例】(jquery选项卡)

免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

鄂ICP备2023003026号

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

友情链接: 武汉网站建设 电脑维修 湖南楚通运网络