jquery日历之昨天--今天--明天
本人菜鸟一枚,昨天被老大追着要一个含有前一天后一天的弹窗日历,而且还要显示当前的默认时间,这对于小白来说,无异于比长胖十斤更晴天霹雳。奈何我搜肠刮肚,绞尽脑汁,翻箱倒柜但还是没能找到一个合适的jquery日历插件,本着不抛弃不放弃的原则,我还是进行了最后的垂死挣扎,终于,根据mobiscroll 这个jquery改出来一个,(不要嘲笑菜鸟的无知,之前真的是以为插件就是直接拿来用的,感谢无所不能的百度和一个大神的指点,让我知道每个jquery库原来都是有API可寻的)废话不多说,直接上代码,希望能够对那些和我一样正在以龟速往前爬的小伙伴们以指引。
html代码:
<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"><title>Mobiscroll日期时间中文精简实例</title><script src="js/jquery.1.7.2.min.js"></script><script src="js/mobiscroll_002.js" type="text/javascript"></script><script src="js/mobiscroll.js" type="text/javascript"></script> <link href="css/mobiscroll_002.css" rel="stylesheet" type="text/css"></head><body><label for="appDate">日期</label><input class="appDate" readonly="readonly" name="appDate" id="appDate" type="text" style="width: 200px; font-size: 18px;color: #E87633;border: none; font-weight:bold;"><script type="text/javascript">$(function () {var currYear = (new Date()).getFullYear(); var opt={};opt.date = {preset : 'date',};opt.datetime = {preset : 'datetime'};opt.time = {preset : 'time'};opt.default = {theme: 'android-ics light', //皮肤样式 display: 'modal', //显示方式 mode: 'scroller', //日期选择模式 dateFormat: 'yyyy-mm-dd', lang: 'zh',showYesterday:true, //默认前一天存在 showNow: true, //默认今天存在 showToworrow:true, //默认后一天存在 yesToday:"前一天",nowText: "今天",tomorrowData:"后一天",startYear: currYear - 100, //开始年份 endYear: currYear + 100, //结束年份 }; $("#appDate").mobiscroll($.extend(opt['date'], opt['default'])); });</script> </body> </html>
mobiscroll.js里面的代码我会重点选出一部分,主要是我做的改动的部分,其余的整个会以包的形式展现给大家,当然mobiscroll——002.js也一样:
mobiscroll.js改动部分:
mobiscroll——002.js改动部分:
//默认点击之前显示日期为当天日期 $("#appDate").val(date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate()); 这个老扎心了,之前都整不出来,默认显示当前日期,原来一句话的事儿。
//前一天 button1Text: s.showYesterday ? s.yesToday : undefined,button1: s.showYesterday ? function () { inst.setDate(new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1),false , 0.3,false); } : undefined, //今天 button3Text: s.showNow ? s.nowText : undefined,button3: s.showNow ? function () { inst.setDate(new Date(), false, 0.3, true); } : undefined,//后一天 button4Text: s.showToworrow ? s.tomorrowData : undefined,button4: s.showToworrow ? function () { inst.setDate(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1), true, 0.3, false); } : undefined,
//因为mobiscroll插件库是全英文的,(so这部分是给出中文翻译部分)但是我们都是中国人好吗?(其实只是因为看不懂英文,累觉不爱。。。)
$.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh, {yesToday:"前一天",tomorrowData:"后一天",setText: '确定',cancelText: '取消' });
//这句代码需要超级注意,这句代码需要超级注意,这句代码需要超级注意,它决定你的昨天今天和明天有没有用(虽然至今不懂为啥)
html += (s.display != 'inline' ? '<div class="dwbc' + (s.button1 ? ' dwbc-p' : '') + '">' +(s.button1 ? '<span class="dwbw md-yesterday"><span class="dwb">' + s.button1Text + '</span></span>' : '') + (s.button3 ? '<span class="dwbw dwb-n"><span class="dwb">' + s.button3Text + '</span></span>' : '') + (s.button4 ? '<span class="dwbw dwb-n md-tomorrow"><span class="dwb">' + s.button4Text + '</span></span>' : '')+'<span class="dwbw dwb-s"><span class="dwb">' + s.setText + '</span></span>' +'<span class="dwbw dwb-c"><span class="dwb">' + s.cancelText + '</span></span></div></div>' : '<div class="dwcc"></div>') + '</div></div></div>';
好了,主要的东西都在这了,祝你好运奥
jquery日历之昨天--今天--明天相关推荐
- 记录-JQuery日历插件My97DatePicker日期范围限制
对于日期控件,有时会有不能选择今天以前的日期这种需求..... My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 & ...
- 9款精致HTML5/jQuery日历时钟控件源码下载(源码请见百度云) 链接:http://pan.baidu.com/s/1geIXe75 密码:7m4a...
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...
- python代码获取今天、昨天、明天的日期
python代码获取今天.昨天.明天的日期 #python代码获取今天.昨天.明天的日期 # Python program to find yesterday, # today and tomorro ...
- php时间戳 今天昨天,php求今天、昨天、明天时间戳的简单实现方法
搜索热词 本文实例讲述了PHP求今天.昨天.明天时间戳的简单实现方法.分享给大家供大家参考,具体如下: PHP;"> echo strtotime('now'),' ';//现在 ec ...
- html中字段是日期控件,jQuery日历插件datepicker用法详解
jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端, ...
- Jquery 日历控件
非常好的Jquery日历控件 http://keith-wood.name/datepick.html 转载于:https://www.cnblogs.com/hubj/archive/2011/04 ...
- 给开发者准备的 10 款最好的 jQuery 日历插件
1. CLNDR.js CLNDR.js 是一个日历插件,用来创建日历,允许用户随意的按照自己的想法去自定义日历.这个插件不会生成任何的标记,但是可以使用数据来填 充 Underscore.js HT ...
- 11个实用jQuery日历插件
1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
最新文章
- 实现Excel数据导入到SQL2005中的方法(回顾)
- 菜鸟学习笔记3——jQuery 选择器
- 【微信小程序】根据当前运行环境调用不同的接口地址的一些方法
- 点击弹出窗口外任意地方关闭弹出窗口
- 高级数据结构与算法 | 并查集(Union-Find)
- CRM order lock will trigger product read API
- android 浏览器 原理,android 浏览器原理原码
- STM32工作笔记0055---认识pcbdoc文件Schdoc文件
- ExcelToHtmlTable转换算法:将Excel转换成Html表格并展示(项目源码+详细注释+项目截图)...
- 疯狂python讲义这本书怎么样_疯狂Python讲义(读书笔记)
- DRM in Android
- SQL语句 按年龄段分组统计人数
- 内存换CPU CPU换内存例子
- [ARC120E]1D Party
- 基于python的自媒体和官媒数据爬取、可视化分析及云词图制作
- 0x3f3f3f3f 和0x3f3f3f3f3f3f3f3f
- 允许网页打开android应用程序,通过浏览器直接打开Android应用程序
- 第四天:关看门狗、设置栈、控制icache、重定位、链接脚本
- tp6 openid获取 JWT中间件
- (中篇)中高级前端大厂面试秘籍,寒冬中为您保驾护航,直通大厂
热门文章
- 基于MATLAB的室内可见光调制解调通信系统
- 题解 洛谷 P4169 [Violet]天使玩偶/SJY摆棋子【CDQ分治】
- Testin云测试:联想K900热卖 完美兼容10000款主流App
- oracle秘钥到期,大佬们,关于甲骨文云重置SSH密钥方法,求指点
- 【C++】按字母表的顺序,从字母A到Z顺序打印输出。
- 德国技术工人工资高吗
- 如何理解self attention中的QKV矩阵
- Mac关闭iCloud云盘,桌面和文稿文件丢失
- 2021-08-19 网银互联
- python做游戏服务器_浅谈如何做一个游戏服务器