jquery日历之昨天--今天--明天
来源:互联网 发布:mac上好用的画图软件 编辑:程序博客网 时间:2024/05/21 02:50
本人菜鸟一枚,昨天被老大追着要一个含有前一天后一天的弹窗日历,而且还要显示当前的默认时间,这对于小白来说,无异于比长胖十斤更晴天霹雳。奈何我搜肠刮肚,绞尽脑汁,翻箱倒柜但还是没能找到一个合适的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改动部分:
//默认点击之前显示日期为当天日期$("#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: '取消'});mobiscroll——002.js改动部分:
//这句代码需要超级注意,这句代码需要超级注意,这句代码需要超级注意,它决定你的昨天今天和明天有没有用(虽然至今不懂为啥)
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>';好了,主要的东西都在这了,祝你好运奥
阅读全文
1 0
- jquery日历之昨天--今天--明天
- 昨天-今天-明天
- NSString 转NSDate 之昨天、今天、明天
- 春夏秋冬,昨天明天今天
- DirectX--昨天、今天、明天
- 昨天、今天、明天
- 昨天,今天,明天
- 昨天今天明天
- 昨天 今天 明天
- 昨天 今天 明天
- 昨天,今天,明天
- 昨天,今天,明天
- 昨天,今天,明天
- 昨天,今天,明天
- 昨天,今天,明天790
- 昨天,今天,明天1048
- 昨天,今天,明天830
- 今天 明天 昨天时间
- 三极管详细学习一
- POJ 3176
- 深入理解python之self
- 汉诺塔(递归)
- 剑指offer——50.数组中重复数字
- jquery日历之昨天--今天--明天
- 作业.hello world
- 9.20第一次作业
- Python 画立方体
- 微信小程序开发整理
- Android——OnFocuChangeListener焦点事件
- 机架感知(Rack Awareness)机制浅述
- Mysql数据库在unity中的打开方式
- 133. Clone Graph