diff --git a/js/lib/datepicker/Readme.md b/js/lib/datepicker/Readme.md index e3320a1..bb79f4e 100644 --- a/js/lib/datepicker/Readme.md +++ b/js/lib/datepicker/Readme.md @@ -1,46 +1,6 @@ -# 日历组件文档 +## 更新日志 -## 配置说明 +v1.0.0 (2017-09-11) +============ -```json - { - showTime: false, //对话框上显示时间 - showCalendar: false, //显示日历对话框 - disabled: false, //是否禁用 - exclass: '', //输入框拓展样式, 用于外部调整输入框样式以适配各种场景 - duplex: '', - format: '', // 日期显示格式 - radius: 0, //日历输入框边框圆角半径 - border: 1, //日历输入框边框大小 - btns: { //切换年份/月份的按钮上的字符 - prevYear: '<<', - nextYear: '>>', - prevMonth: '<', - nextMonth: '>' - }, - callback: function(date){/*...*/}, //日期被修改后的回调,参数是被修改后的值 - } - -``` - - -## 用法 - -```html - -
- 示例1: - -
- - - -``` +First Release. \ No newline at end of file diff --git a/js/lib/datepicker/doui.datepicker.css b/js/lib/datepicker/doui.datepicker.css deleted file mode 100644 index 30eeebd..0000000 --- a/js/lib/datepicker/doui.datepicker.css +++ /dev/null @@ -1,40 +0,0 @@ -@charset "UTF-8"; -/** - * - * @authors yutent (yutent@doui.cc) - * @date 2016-02-14 14:00:06 - * - */ -.do-ui-datepicker {position:relative;z-index:65534;width:100%;height:100%;} -.do-ui-datepicker a {text-decoration:none;} -.do-ui-datepicker .date-input {float:left;width:100%;height:100%;border:1px solid #ddd;line-height:18px;padding:0 5px;} - -.do-ui-datepicker .calendar {position:absolute;z-index:65534;left:0;top:98%;width:230px;height:auto;min-height:60px;padding:10px;border:1px solid #ddd;background:#fff;font-size:13px;box-shadow:0 0 5px rgba(0,0,0,.1)} - -.do-ui-datepicker .calendar-hd {width:100%;height:30px;line-height:30px;background:#f3f3f3;color:#666;text-align:center;} -.do-ui-datepicker .calendar-contrl {position:relative;width:90%;height:30px;margin:0 5%;line-height:30px;border-bottom:1px solid #eee;color:#09f;text-align:center;} -.do-ui-datepicker .calendar-contrl a {position:absolute;top:0;left:0;width:30px;color:#09f;} -.do-ui-datepicker .calendar-contrl .prev-month {left:30px;} -.do-ui-datepicker .calendar-contrl .next-month {left:auto;right:30px;} -.do-ui-datepicker .calendar-contrl .next-year {left:auto;right:0;} - -.do-ui-datepicker .calendar-table {position:relative;width:90%;height:auto;margin:0 5%;line-height:25px;color:#888;text-align:center;} -.do-ui-datepicker .calendar-table .tr {width:100%;height:auto;min-height:25px;} -.do-ui-datepicker .calendar-table .tr.tr-hd {border-bottom:1px solid #eee;margin-bottom:3px;} -.do-ui-datepicker .calendar-table .tr .td {float:left;width:14.28%;height:25px;} -.do-ui-datepicker .calendar-table .tr .do-st-hand:hover {background:#b6def9;} -.do-ui-datepicker .calendar-table .tr .td.weeken {color:#f30;} -.do-ui-datepicker .calendar-table .tr .td.selected {background:#09f;color:#fff;} -.do-ui-datepicker .calendar-table .tr .td.disabled {color:#ddd;cursor:default;} - -.do-ui-datepicker .time-contrl {position:relative;width:90%;height:30px;margin:5px 5%;line-height:30px;border-top:1px solid #eee;color:#888;} -.do-ui-datepicker .time-contrl label {float:left;height:20px;margin:5px 5px 5px 0;} -.do-ui-datepicker .time-contrl input {float:left;width:25px;height:20px;padding:0 3px;line-height:17px;outline:none;} -.do-ui-datepicker .time-contrl label:after {float:right;height:20px;line-height:20px;font-size:12px;} -.do-ui-datepicker .time-contrl .hours:after {content:"时"} -.do-ui-datepicker .time-contrl .minutes:after {content:"分"} -.do-ui-datepicker .time-contrl .seconds:after {content:"秒"} -.do-ui-datepicker .time-contrl .now {float:right;width:40px;height:20px;margin:5px;border:1px solid #ddd;border-radius:3px;line-height:20px;background:#f7f7f7;color:#888;text-align:center;} -.do-ui-datepicker .time-contrl .now:hover {background:#eee;} -.do-ui-datepicker .time-contrl .now:active {background:#e7e7e7;} -.do-ui-datepicker .calendar-tips {position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;text-align:center;} \ No newline at end of file diff --git a/js/lib/datepicker/doui.datepicker.js b/js/lib/datepicker/doui.datepicker.js deleted file mode 100644 index ec6b2b6..0000000 --- a/js/lib/datepicker/doui.datepicker.js +++ /dev/null @@ -1,375 +0,0 @@ -/** - * - * @authors yutent (yutent@doui.cc) - * @date 2016-02-14 13:58:39 - * - */ -"use strict"; - -define(['avalon', - 'css!./doui.datepicker.min' - ], - function(av){ - //父级vm - var parentVm = null - - av.component('do:datepicker', { - $replace: true, - $template: '
请选择日期
{{btns.prevYear}}{{btns.prevMonth}}{{btns.nextMonth}}{{btns.nextYear}}{{calendar.year + \'-\' + calendar.month}}
现在
{{tips}}
', - $construct: function(opts, b, c){ - var vm = av.mix(b, c) - /********** 获取上一级vm ***********/ - var pctrl = vm.duplex.slice(0, vm.duplex.indexOf('.')) - parentVm = av.vmodels[pctrl] - /**********************************/ - //获取初始值 - vm.duplex = vm.duplex.slice(vm.duplex.indexOf('.') + 1) - var defaultVal = (new Function('v', 'return v.' + vm.duplex))(parentVm) - - //日期格式化, 默认会调用过滤器的格式'Y-m-d H:i:s' - if(!vm.showTime && !vm.format){ - vm.format = 'Y-m-d'; - } - - if(defaultVal === undefined){ - if(vm.minDate){ - defaultVal = vm.minDate, vm.format; - }else if(opts.maxDate){ - defaultVal = vm.maxDate, vm.format; - } - } - opts.dateVal = defaultVal && av.filters.date(defaultVal, vm.format) - opts.calendar = { - list: [], - year: av.filters.date(opts.dateVal, 'Y'), - month: av.filters.date(opts.dateVal, 'm'), - day: av.filters.date(opts.dateVal, 'd') || 0, - hour: av.filters.date(opts.dateVal, 'H') || 0, - minute: av.filters.date(opts.dateVal, 'i') || 0, - second: av.filters.date(opts.dateVal, 's') || 0, - minYear: vm.minDate && av.filters.date(vm.minDate, 'Y') >> 0, - minMonth: vm.minDate && av.filters.date(vm.minDate, 'm') >> 0, - minDay: vm.minDate && av.filters.date(vm.minDate, 'd') >> 0 || 1, - maxYear: vm.maxDate && av.filters.date(vm.maxDate, 'Y') >> 0, - maxMonth: vm.maxDate && av.filters.date(vm.maxDate, 'm') >> 0, - maxDay: vm.maxDate && av.filters.date(vm.maxDate, 'd') >> 0 - } - //移除部分属性 - delete vm.minDate; - delete vm.maxDate; - - return av.mix(opts, vm) - }, - $init: function(vm, ele){ - // av.log(vm) - var lastDate = { - year: vm.calendar.year >> 0, - month: vm.calendar.month >> 0, - day: vm.calendar.day >> 0 - } - var timer - - getCalendar() //初始化日历显示 - - //日历按钮,未超出限制时切换日历 - vm.$turn = function(type, step){ - var year = vm.calendar.year >> 0, - month = vm.calendar.month >> 0; - - if(type === 1){ - year += step; - }else{ - month += step; - if(month < 1){ - month = 12; - year-- - } - if(month > 12){ - month = 1; - year++ - } - } - if(isLimited(year, month) === true){ - vm.tips = '日期超出限制'; - return; - } - vm.calendar.year = year; - vm.calendar.month = numberFormat(month, 2); - } - - //选择日期 - vm.$getDate = function(disabled, day){ - if(disabled) - return; - - vm.calendar.day = day; - - changeStyle(day); - updateTime(); - vm.showCalendar = !1; - } - - //输入框获取焦点时，显示日历 - vm.$focus = function(){ - vm.showCalendar = !0; - } - - //获取当前时间 - vm.$now = function(){ - var year = av.filters.date(null, 'Y') >> 0, - month = av.filters.date(null, 'm') >> 0, - day = av.filters.date(null, 'd') >> 0; - - var isLimitYM = isLimited(year, month), - disabled = disabledDay(day, isLimitYM); - - if(disabled){ - vm.tips = '今天超出了限制日期'; - return; - } - - vm.calendar.year = year; - vm.calendar.month = month; - vm.calendar.day = day; - vm.calendar.hour = av.filters.date(null, 'H'); - vm.calendar.minute = av.filters.date(null, 'i'); - vm.calendar.second = av.filters.date(null, 's'); - - changeStyle(day); - updateTime(); - - vm.showCalendar = !1; - } - - - - /******************************************************************************/ - //计算日历数组 - function getCalendar(){ - var year = vm.calendar.year >> 0 - var month = vm.calendar.month >> 0 - var nums = getNumsOfYearMonth(year, month) - var numsFixed = -getDayByYearMonth(year, month) + 1 - var isLimitYM = isLimited(year, month) - - vm.calendar.list.clear(); - - for(var i = numsFixed; i <= nums; i++){ - - var day = { - weeken: !1, - day: '', - selected: !1, - disable: !0 - } - if(i > 0){ - var d = getDayByYearMonth(year, month, i) - day = { - weeken: d == 0 || d == 6, - day: i, - selected: isSelected(i), - disable: disabledDay(i, isLimitYM) - } - } - vm.calendar.list.push(day) - } - } - - //判断当前年/月是否超出限制 - function isLimited(year, month){ - var limit = { - Y: vm.calendar.minYear, - M: vm.calendar.minMonth, - mY: vm.calendar.maxYear, - mM: vm.calendar.maxMonth, - } - var res = '' - - if((!limit.Y && !limit.mY) || (!limit.M && !limit.mM)) - return false - - if(year){ - if((limit.Y && year < limit.Y) || (limit.mY && year > limit.mY)) - return true - }else{ - return false - } - - if(month){ - if(year === limit.Y){ - if(limit.M && month < limit.M) - return true - - if(month == limit.M) - res += '-' - } - - if(year === limit.mY){ - if(limit.mM && month > limit.mM) - return true - - if(month == limit.mM) - res += '+' - } - } - return res - } - - //判断指定天数是否有效 - function disabledDay(day, limitedYM){ - var minD = vm.calendar.minDay - var maxD = vm.calendar.maxDay - - if(limitedYM === '-') - return day < minD - - if(limitedYM === '+') - return maxD && day > maxD - - if(limitedYM === '-+') - return day < minD || (maxD && day > maxD) - - return limitedYM - } - - //判断指定天数是否被选中 - function isSelected(day){ - var year = vm.calendar.year >> 0 - var month = vm.calendar.month >> 0 - - return !(lastDate.year !== year || lastDate.month !== month || lastDate.day !== day) - } - - //修改当前选中日期的样式 - function changeStyle(day){ - vm.calendar.list.forEach(function(item){ - if(item.day != day){ - item.selected = !1 - }else{ - item.selected = !0 - } - }) - } - - //更新时间 - function updateTime(){ - var cal = vm.calendar - var year = cal.year - var month = cal.month - var day = cal.day - var hour = cal.hour - var minute = cal.minute - var second = cal.second - var date = year + '-' + month + '-' + day - - if(vm.showTime){ - date += ' ' + hour + ':' + minute + ':' + second - } - lastDate = { - year: year >> 0, - month: month >> 0, - day: day >> 0 - } - vm.dateVal = av.filters.date(date, vm.format) - } - - /******************************************************************************/ - - vm.$watch('calendar.year', function(){ - getCalendar(); - }) - - vm.$watch('calendar.month', function(){ - getCalendar(); - }) - vm.$watch('calendar.hour', function(v){ - vm.calendar.hour = v - updateTime() - }) - vm.$watch('calendar.minute', function(v){ - vm.calendar.minute = v - updateTime() - }) - vm.$watch('calendar.second', function(v){ - vm.calendar.second = v - updateTime() - }) - - vm.$watch('showCalendar', function(v){ - if(v || !vm.duplex) - return; - - eval('parentVm.' + vm.duplex + ' = "' + vm.dateVal + '"'); - vm.callback && vm.callback(vm.dateVal); - }) - - vm.$watch('tips', function(v){ - if(!v) - return; - clearTimeout(timer); - timer = setTimeout(function(){ - vm.tips = ''; - }, 1500) - }) - - document.addEventListener('click', function(){ - vm.showCalendar = !1; - }) - - }, - showTime: false, //对话框上显示时间 - showCalendar: false, //显示日历对话框 - disabled: false, //是否禁用 - exclass: '', //输入框拓展样式, 用于外部调整输入框样式以适配各种场景 - tips: '', - duplex: '', - format: '', // 日期显示格式 - dateVal: '', - radius: 0, //日历输入框边框圆角半径 - border: 1, //日历输入框边框大小 - btns: { //切换年份/月份的按钮上的字符 - prevYear: '<<', - nextYear: '>>', - prevMonth: '<', - nextMonth: '>' - }, - $focus: av.noop, - $turn: av.noop, - $getDate: av.noop, - $now: av.noop, - $cancelBubble: function(event){ - event.stopPropagation && event.stopPropagation() || (event.cancelBubble = true); - }, - callback: null, //日期被修改后的回调 - }) - - - //获取今年的年份/月份，返回的是数组 - function getThisYearMonth(){ - var oDate = new Date() - return [oDate.getFullYear(), oDate.getMonth() + 1] - } - - //根据年份获取指定月份天数 - function getNumsOfYearMonth(year, month){ - return new Date(year, month, 0).getDate() - } - - //判断指定年月第一天是星期几 - function getDayByYearMonth(year, month, day){ - day = day || 1 - return new Date(year, month - 1, day).getDay() - } - //数字长度补全（前面加0） - function numberFormat(num, len){ - num += '' - if(num.length === len) - return num - - while(num.length < len) - num = '0' + num - return num - } - - return av -}) \ No newline at end of file diff --git a/js/lib/datepicker/doui.datepicker.min.css b/js/lib/datepicker/doui.datepicker.min.css deleted file mode 100644 index 99cffb9..0000000 --- a/js/lib/datepicker/doui.datepicker.min.css +++ /dev/null @@ -1 +0,0 @@ -@charset "UTF-8";.do-ui-datepicker{position:relative;z-index:65534;width:100%;height:100%}.do-ui-datepicker a{text-decoration:none}.do-ui-datepicker .date-input{float:left;width:100%;height:100%;border:1px solid #ddd;line-height:18px;padding:0 5px}.do-ui-datepicker .calendar{position:absolute;z-index:65534;left:0;top:98%;width:230px;height:auto;min-height:60px;padding:10px;border:1px solid #ddd;background:#fff;font-size:13px;box-shadow:0 0 5px rgba(0,0,0,.1)}.do-ui-datepicker .calendar-hd{width:100%;height:30px;line-height:30px;background:#f3f3f3;color:#666;text-align:center}.do-ui-datepicker .calendar-contrl{position:relative;width:90%;height:30px;margin:0 5%;line-height:30px;border-bottom:1px solid #eee;color:#09f;text-align:center}.do-ui-datepicker .calendar-contrl a{position:absolute;top:0;left:0;width:30px;color:#09f}.do-ui-datepicker .calendar-contrl .prev-month{left:30px}.do-ui-datepicker .calendar-contrl .next-month{left:auto;right:30px}.do-ui-datepicker .calendar-contrl .next-year{left:auto;right:0}.do-ui-datepicker .calendar-table{position:relative;width:90%;height:auto;margin:0 5%;line-height:25px;color:#888;text-align:center}.do-ui-datepicker .calendar-table .tr{width:100%;height:auto;min-height:25px}.do-ui-datepicker .calendar-table .tr.tr-hd{border-bottom:1px solid #eee;margin-bottom:3px}.do-ui-datepicker .calendar-table .tr .td{float:left;width:14.28%;height:25px}.do-ui-datepicker .calendar-table .tr .do-st-hand:hover{background:#b6def9}.do-ui-datepicker .calendar-table .tr .td.weeken{color:#f30}.do-ui-datepicker .calendar-table .tr .td.selected{background:#09f;color:#fff}.do-ui-datepicker .calendar-table .tr .td.disabled{color:#ddd;cursor:default}.do-ui-datepicker .time-contrl{position:relative;width:90%;height:30px;margin:5px 5%;line-height:30px;border-top:1px solid #eee;color:#888}.do-ui-datepicker .time-contrl label{float:left;height:20px;margin:5px 5px 5px 0}.do-ui-datepicker .time-contrl input{float:left;width:25px;height:20px;padding:0 3px;line-height:17px;outline:0}.do-ui-datepicker .time-contrl label:after{float:right;height:20px;line-height:20px;font-size:12px}.do-ui-datepicker .time-contrl .hours:after{content:"时"}.do-ui-datepicker .time-contrl .minutes:after{content:"分"}.do-ui-datepicker .time-contrl .seconds:after{content:"秒"}.do-ui-datepicker .time-contrl .now{float:right;width:40px;height:20px;margin:5px;border:1px solid #ddd;border-radius:3px;line-height:20px;background:#f7f7f7;color:#888;text-align:center}.do-ui-datepicker .time-contrl .now:hover{background:#eee}.do-ui-datepicker .time-contrl .now:active{background:#e7e7e7}.do-ui-datepicker .calendar-tips{position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;text-align:center} \ No newline at end of file diff --git a/js/lib/datepicker/doui.datepicker.min.js b/js/lib/datepicker/doui.datepicker.min.js deleted file mode 100644 index 7380e41..0000000 --- a/js/lib/datepicker/doui.datepicker.min.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";define(["avalon","css!./doui.datepicker.min"],function(av){function getThisYearMonth(){var a=new Date;return[a.getFullYear(),a.getMonth()+1]}function getNumsOfYearMonth(a,e){return new Date(a,e,0).getDate()}function getDayByYearMonth(a,e,t){return t=t||1,new Date(a,e-1,t).getDay()}function numberFormat(a,e){if(a+="",a.length===e)return a;for(;a.length
请选择日期
{{btns.prevYear}}{{btns.prevMonth}}{{btns.nextMonth}}{{btns.nextYear}}{{calendar.year + \'-\' + calendar.month}}
现在
{{tips}}
',$construct:function(a,e,t){var n=av.mix(e,t),l=n.duplex.slice(0,n.duplex.indexOf("."));parentVm=av.vmodels[l],n.duplex=n.duplex.slice(n.duplex.indexOf(".")+1);var r=new Function("v","return v."+n.duplex)(parentVm);return n.showTime||n.format||(n.format="Y-m-d"),void 0===r&&(n.minDate?(r=n.minDate,n.format):a.maxDate&&(r=n.maxDate,n.format)),a.dateVal=r&&av.filters.date(r,n.format),a.calendar={list:[],year:av.filters.date(a.dateVal,"Y"),month:av.filters.date(a.dateVal,"m"),day:av.filters.date(a.dateVal,"d")||0,hour:av.filters.date(a.dateVal,"H")||0,minute:av.filters.date(a.dateVal,"i")||0,second:av.filters.date(a.dateVal,"s")||0,minYear:n.minDate&&av.filters.date(n.minDate,"Y")>>0,minMonth:n.minDate&&av.filters.date(n.minDate,"m")>>0,minDay:n.minDate&&av.filters.date(n.minDate,"d")>>0||1,maxYear:n.maxDate&&av.filters.date(n.maxDate,"Y")>>0,maxMonth:n.maxDate&&av.filters.date(n.maxDate,"m")>>0,maxDay:n.maxDate&&av.filters.date(n.maxDate,"d")>>0},delete n.minDate,delete n.maxDate,av.mix(a,n)},$init:function(vm,ele){function getCalendar(){var a=vm.calendar.year>>0,e=vm.calendar.month>>0,t=getNumsOfYearMonth(a,e),n=-getDayByYearMonth(a,e)+1,l=isLimited(a,e);vm.calendar.list.clear();for(var r=n;t>=r;r++){var s={weeken:!1,day:"",selected:!1,disable:!0};if(r>0){var d=getDayByYearMonth(a,e,r);s={weeken:0==d||6==d,day:r,selected:isSelected(r),disable:disabledDay(r,l)}}vm.calendar.list.push(s)}}function isLimited(a,e){var t={Y:vm.calendar.minYear,M:vm.calendar.minMonth,mY:vm.calendar.maxYear,mM:vm.calendar.maxMonth},n="";if(!t.Y&&!t.mY||!t.M&&!t.mM)return!1;if(!a)return!1;if(t.Y&&at.mY)return!0;if(e){if(a===t.Y){if(t.M&&et.mM)return!0;e==t.mM&&(n+="+")}}return n}function disabledDay(a,e){var t=vm.calendar.minDay,n=vm.calendar.maxDay;return"-"===e?t>a:"+"===e?n&&a>n:"-+"===e?t>a||n&&a>n:e}function isSelected(a){var e=vm.calendar.year>>0,t=vm.calendar.month>>0;return!(lastDate.year!==e||lastDate.month!==t||lastDate.day!==a)}function changeStyle(a){vm.calendar.list.forEach(function(e){e.selected=e.day!=a?!1:!0})}function updateTime(){var a=vm.calendar,e=a.year,t=a.month,n=a.day,l=a.hour,r=a.minute,s=a.second,d=e+"-"+t+"-"+n;vm.showTime&&(d+=" "+l+":"+r+":"+s),lastDate={year:e>>0,month:t>>0,day:n>>0},vm.dateVal=av.filters.date(d,vm.format)}var lastDate={year:vm.calendar.year>>0,month:vm.calendar.month>>0,day:vm.calendar.day>>0},timer;getCalendar(),vm.$turn=function(a,e){var t=vm.calendar.year>>0,n=vm.calendar.month>>0;return 1===a?t+=e:(n+=e,1>n&&(n=12,t--),n>12&&(n=1,t++)),isLimited(t,n)===!0?void(vm.tips="日期超出限制"):(vm.calendar.year=t,void(vm.calendar.month=numberFormat(n,2)))},vm.$getDate=function(a,e){a||(vm.calendar.day=e,changeStyle(e),updateTime(),vm.showCalendar=!1)},vm.$focus=function(){vm.showCalendar=!0},vm.$now=function(){var a=av.filters.date(null,"Y")>>0,e=av.filters.date(null,"m")>>0,t=av.filters.date(null,"d")>>0,n=isLimited(a,e),l=disabledDay(t,n);return l?void(vm.tips="今天超出了限制日期"):(vm.calendar.year=a,vm.calendar.month=e,vm.calendar.day=t,vm.calendar.hour=av.filters.date(null,"H"),vm.calendar.minute=av.filters.date(null,"i"),vm.calendar.second=av.filters.date(null,"s"),changeStyle(t),updateTime(),void(vm.showCalendar=!1))},vm.$watch("calendar.year",function(){getCalendar()}),vm.$watch("calendar.month",function(){getCalendar()}),vm.$watch("calendar.hour",function(a){vm.calendar.hour=a,updateTime()}),vm.$watch("calendar.minute",function(a){vm.calendar.minute=a,updateTime()}),vm.$watch("calendar.second",function(a){vm.calendar.second=a,updateTime()}),vm.$watch("showCalendar",function(v){!v&&vm.duplex&&(eval("parentVm."+vm.duplex+' = "'+vm.dateVal+'"'),vm.callback&&vm.callback(vm.dateVal))}),vm.$watch("tips",function(a){a&&(clearTimeout(timer),timer=setTimeout(function(){vm.tips=""},1500))}),document.addEventListener("click",function(){vm.showCalendar=!1})},showTime:!1,showCalendar:!1,disabled:!1,exclass:"",tips:"",duplex:"",format:"",dateVal:"",radius:0,border:1,btns:{prevYear:"<<",nextYear:">>",prevMonth:"<",nextMonth:">"},$focus:av.noop,$turn:av.noop,$getDate:av.noop,$now:av.noop,$cancelBubble:function(a){a.stopPropagation&&a.stopPropagation()||(a.cancelBubble=!0)},callback:null}),av}); \ No newline at end of file diff --git a/js/lib/datepicker/main.htm b/js/lib/datepicker/main.htm new file mode 100644 index 0000000..3ea6a6d --- /dev/null +++ b/js/lib/datepicker/main.htm @@ -0,0 +1,50 @@ +
+ + +
+ +
请选择日期
+
+ + + + + +
+
+
日一二三四五六
+
+ +
+
+
+ + + + 现在 +
+
+
+
\ No newline at end of file diff --git a/js/lib/datepicker/main.js b/js/lib/datepicker/main.js new file mode 100644 index 0000000..d715422 --- /dev/null +++ b/js/lib/datepicker/main.js @@ -0,0 +1,391 @@ +/** + * + * @authors yutent (yutent@doui.cc) + * @date 2016-02-14 13:58:39 + * + */ +"use strict"; + +define([ + 'text!./main.htm', + 'css!./style.css', +], function(tpl){ + + yua.ui.datepicker = '1.0.0' + yua.component('datepicker', { + $template: tpl, + $construct: function(sys, option, attr){ + + // 先合并config的配置及元素的属性 + var opts = Object.assign({}, option, attr), + defVal; + + if(!opts.value){ + return yua.error('日历组件必须设置value属性') + } + + //获取初始值 + defVal = sys.$up[opts.value] + + //日期格式化, 默认会调用过滤器的格式'Y-m-d H:i:s' + if(!opts.showTime && !opts.format){ + opts.format = 'Y-m-d'; + } + + // 修正默认值, 如果不是Date对象, 则转为Date对象 + if(!defVal){ + if(opts.minDate){ + defVal = opts.minDate; + }else if(opts.maxDate){ + defVal = opts.maxDate; + }else{ + defVal = new Date() + } + } + if(!Date.isDate(defVal)){ + defVal = new Date(defVal) + } + + opts.update_value = opts.value + opts.value = defVal.format(opts.format) + + opts.calendar = { + list: [1], + year: defVal.format('Y'), + month: defVal.format('m'), + day: defVal.format('d'), + hour: defVal.format('H'), + minute: defVal.format('i'), + second: defVal.format('s'), + minYear: 0, + minMonth: 0, + minDay: 0, + maxYear: 0, + maxMonth: 0, + maxDay: 0 + } + + if(opts.minDate){ + if(!Date.isDate(opts.minDate)){ + opts.minDate = new Date(opts.minDate) + } + opts.calendar.minYear = opts.minDate.format('Y') + opts.calendar.minMonth = opts.minDate.format('m') + opts.calendar.minDay = opts.minDate.format('d') + } + + if(opts.maxDate){ + if(!Date.isDate(opts.maxDate)){ + opts.maxDate = new Date(opts.maxDate) + } + opts.calendar.maxYear = opts.maxDate.format('Y') + opts.calendar.maxMonth = opts.maxDate.format('m') + opts.calendar.maxDay = opts.maxDate.format('d') + } + log(opts) + //移除部分属性 + delete opts.minDate; + delete opts.maxDate; + return yua.mix(sys, opts) + }, + $ready: function(vm, ele){ + var last = { + year: +vm.calendar.year, + month: +vm.calendar.month, + day: +vm.calendar.day + }, + timer; + + getCalendar(vm, last) //初始化日历显示 + + //日历按钮,未超出限制时切换日历 + vm.$turn = function(type, step){ + var year = +vm.calendar.year, + month = +vm.calendar.month; + + if(type === 1){ + year += step; + }else{ + month += step; + if(month < 1){ + month = 12; + year-- + } + if(month > 12){ + month = 1; + year++ + } + } + if(isLimited(vm.calendar, year, month) === true){ + vm.tips = '日期超出限制'; + return; + } + vm.calendar.year = year; + vm.calendar.month = numberFormat(month, 2); + } + + //选择日期 + vm.$getDate = function(disabled, day){ + if(disabled) + return; + + vm.calendar.day = day; + + changeStyle(vm.calendar, day); + updateTime(vm, last); + vm.showCalendar = !1; + } + + //输入框获取焦点时，显示日历 + vm.$focus = function(){ + vm.showCalendar = !0; + } + + //获取当前时间 + vm.$now = function(){ + var now = new Date(), + year = now.format('Y'), + month = now.format('m'), + day = now.format('d'); + + var isLimitYM = isLimited(year, month), + disabled = disabledDay(day, isLimitYM); + + if(disabled){ + vm.tips = '今天超出了限制日期'; + return; + } + + vm.calendar.year = year; + vm.calendar.month = month; + vm.calendar.day = day; + vm.calendar.hour = now.format('H'); + vm.calendar.minute = now.format('i'); + vm.calendar.second = now.format('s'); + + changeStyle(vm.calendar, day); + updateTime(vm, last); + + vm.showCalendar = !1; + } + + + /************************************************************/ + + vm.$watch('calendar.year', function(){ + getCalendar(vm, last); + }) + + vm.$watch('calendar.month', function(){ + getCalendar(vm, last); + }) + vm.$watch('calendar.hour', function(v){ + vm.calendar.hour = v + updateTime(vm, last) + }) + vm.$watch('calendar.minute', function(v){ + vm.calendar.minute = v + updateTime(vm, last) + }) + vm.$watch('calendar.second', function(v){ + vm.calendar.second = v + updateTime(vm, last) + }) + + vm.$watch('showCalendar', function(v){ + if(v || !vm.value) + return; + + vm.$up[vm.update_value] = vm.value + vm.$onUpdate(vm.value); + }) + + vm.$watch('tips', function(v){ + if(!v) + return; + clearTimeout(timer); + timer = setTimeout(function(){ + vm.tips = ''; + }, 1500) + }) + + document.addEventListener('click', function(){ + vm.showCalendar = !1; + }) + + }, + showTime: false, //对话框上显示时间 + showCalendar: false, //显示日历对话框 + disabled: false, //是否禁用 + tips: '', + format: '', // 日期显示格式 + value: '', // 用于显示在输入框里的日期变量 + btns: { //切换年份/月份的按钮上的字符 + prevYear: '<<', + nextYear: '>>', + prevMonth: '<', + nextMonth: '>' + }, + $focus: yua.noop, + $turn: yua.noop, + $getDate: yua.noop, + $now: yua.noop, + $cancelBubble: function(event){ + event.stopPropagation && event.stopPropagation() || (event.cancelBubble = true); + }, + $onUpdate: yua.noop, //日期被修改后的回调 + }) + +/**************** 公共函数 *****************/ + //计算日历数组 + function getCalendar(vm, last){ + var year = +vm.calendar.year, + month = +vm.calendar.month, + nums = getTotalDays(year, month), + numsFixed = -getFirstDay(year, month) + 1, + isLimitYM = isLimited(vm.calendar, year, month); + + vm.calendar.list.clear(); + + for(var i = numsFixed; i <= nums; i++){ + + var day = { + weeken: !1, + day: '', + selected: !1, + disable: !0 + } + if(i > 0){ + var d = getFirstDay(year, month, i) + day = { + weeken: d == 0 || d == 6, + day: i, + selected: isSelected(vm.calendar, last, i), + disable: disabledDay(vm.calendar, i, isLimitYM) + } + } + vm.calendar.list.push(day) + } + } + + //判断当前年/月是否超出限制 + function isLimited(calendar, year, month){ + var limit = { + Y: +calendar.minYear, + M: +calendar.minMonth, + mY: +calendar.maxYear, + mM: +calendar.maxMonth, + }, + res = ''; + + if((!limit.Y && !limit.mY) || (!limit.M && !limit.mM) || !year){ + return false + } + + + if((limit.Y && year < limit.Y) || (limit.mY && year > limit.mY)){ + return true + } + + if(month){ + if(year === limit.Y){ + if(limit.M && month < limit.M) + return true + + if(month == limit.M) + res += '-' + } + + if(year === limit.mY){ + if(limit.mM && month > limit.mM) + return true + + if(month == limit.mM) + res += '+' + } + } + return res + } + + //判断指定天数是否有效 + function disabledDay(calendar, day, limitedYM){ + var minD = calendar.minDay, + maxD = calendar.maxDay; + + if(limitedYM === '-') + return day < minD + + if(limitedYM === '+') + return maxD && day > maxD + + if(limitedYM === '-+') + return day < minD || (maxD && day > maxD) + + return limitedYM + } + + //判断指定天数是否被选中 + function isSelected(calendar, last, day){ + var year = +calendar.year, + month = +calendar.month; + + return !(last.year !== year || last.month !== month || last.day !== day) + } + + //修改当前选中日期的样式 + function changeStyle(calendar, day){ + calendar.list.forEach(function(item){ + if(item.day != day){ + item.selected = !1 + }else{ + item.selected = !0 + } + }) + } + + //更新时间 + function updateTime(vm, last){ + var hour = minute = second = 0; + last = { + year: +vm.calendar.year, + month: +vm.calendar.month, + day: +vm.calendar.day + } + + if(vm.showTime){ + hour = vm.calendar.hour + minute = vm.calendar.minute + second = vm.calendar.second + } + vm.value = new Date(last.year, last.month - 1, last.day, hour, minute, second).format(vm.format) + } + + + //获取今年的年份/月份，返回的是数组 + function getThisYearMonth(){ + var oDate = new Date() + return [oDate.getFullYear(), oDate.getMonth() + 1] + } + + //根据年份获取指定月份天数 + function getTotalDays(year, month){ + return new Date(year, month, 0).getDate() + } + + //判断指定年月第一天是星期几 + function getFirstDay(year, month, day){ + return new Date(year, month - 1, day || 1).getDay() + } + //数字长度补全（前面加0） + function numberFormat(num, len){ + num += '' + if(num.length === len) + return num + + while(num.length < len) + num = '0' + num + return num + } + + return yua +}) \ No newline at end of file diff --git a/js/lib/datepicker/style.css b/js/lib/datepicker/style.css new file mode 100644 index 0000000..522493c --- /dev/null +++ b/js/lib/datepicker/style.css @@ -0,0 +1 @@ +.do-datepicker{position:relative;z-index:65534;width:100%;height:100%}.do-datepicker a{text-decoration:none}.do-datepicker .date-input{display:block;width:100%;height:100%;padding:0 5px;line-height:18px;border:1px solid #e7e8eb;transition:all .1s ease-in-out}.do-datepicker .date-input:focus{border-color:#1abc9c}.do-datepicker .calendar-box{position:absolute;left:0;top:100%;width:267px;height:auto;min-height:60px;padding:10px;line-height:35px;border:1px solid #ddd;background:#fff;font-size:14px;color:#34495e;text-align:center;box-shadow:0 1px 5px rgba(0,0,0,0.1)}.do-datepicker .calendar-box dt.title{width:100%;height:35px;background:#e7e8eb}.do-datepicker .calendar-box dd.contrl{position:relative;width:90%;height:35px;margin:0 5%}.do-datepicker .calendar-box dd.contrl a{position:absolute;left:0;top:0;width:35px;height:35px;color:#34495e;font-weight:bold}.do-datepicker .calendar-box dd.contrl a:hover{color:#1abc9c}.do-datepicker .calendar-box dd.contrl a.prev-month{left:35px}.do-datepicker .calendar-box dd.contrl a.next-month{left:auto;right:35px}.do-datepicker .calendar-box dd.contrl a.next-year{left:auto;right:0}.do-datepicker .calendar-box dd.calendar{width:100%;height:auto}.do-datepicker .calendar-box dd.calendar .week{width:100%;height:35px;margin-bottom:5px;border-bottom:1px solid #eee}.do-datepicker .calendar-box dd.calendar span.td{float:left;width:35px}.do-datepicker .calendar-box dd.calendar .list span.td{height:30px;line-height:30px;cursor:pointer;transition:all .1s ease-in-out}.do-datepicker .calendar-box dd.calendar .list span.td:hover{background:#e7e8eb}.do-datepicker .calendar-box dd.calendar .list span.td.weeken{color:#e74c3c}.do-datepicker .calendar-box dd.calendar .list span.td.selected{background:#48c9b0;color:#fff}.do-datepicker .calendar-box dd.calendar .list span.td.disabled{color:#bdc3c7;cursor:default}.do-datepicker .calendar-box dd.calendar .list span.td.disabled:hover{background:none}.do-datepicker .calendar-box dd.time{position:relative;width:100%;height:41px;padding:5px 0;margin-top:5px;line-height:30px;border-top:1px solid #eee}.do-datepicker .calendar-box dd.time label{float:left;width:60px;height:30px}.do-datepicker .calendar-box dd.time label input{width:30px;height:30px;border:1px solid #e7e8eb;text-align:center}.do-datepicker .calendar-box dd.time .now{float:right;width:50px;height:30px;border-radius:3px;background:#1abc9c;color:#fff;text-align:center}.do-datepicker .calendar-box dd.time .now:hover{background:#48c9b0}.do-datepicker .calendar-box dd.time .now:active{background:#16a085}.do-datepicker .calendar-box dd.tips{position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,0.7);color:#fff;font-size:12px;text-align:center} diff --git a/js/lib/datepicker/style.scss b/js/lib/datepicker/style.scss new file mode 100644 index 0000000..d65e2b1 --- /dev/null +++ b/js/lib/datepicker/style.scss @@ -0,0 +1,56 @@ +@charset "UTF-8"; +/** + * + * @authors yutent (yutent@doui.cc) + * @date 2016-02-14 14:00:06 + * + */ +@import "../../../css/var.scss"; +.do-datepicker {position:relative;z-index:65534;width:100%;height:100%; + + a {text-decoration:none;} + .date-input {display:block;width:100%;height:100%;padding:0 5px;line-height:18px;border:1px solid nth($cp, 1);@include ts(); + + &:focus {border-color:nth($cg, 1)} + } + + .calendar-box {position:absolute;left:0;top:100%;width:267px;height:auto;min-height:60px;padding:10px;line-height:35px;border:1px solid #ddd;background:#fff;font-size:14px;color:nth($cgr, 1);text-align:center;box-shadow:0 1px 5px rgba(0,0,0,.1); + + dt.title {width:100%;height:35px;background:#e7e8eb;} + dd.contrl {position:relative;width:90%;height:35px;margin:0 5%; + + a {position:absolute;left:0;top:0;width:35px;height:35px;color:nth($cgr, 1);font-weight:bold;} + a:hover {color:nth($cg, 1)} + a.prev-month {left:35px;} + a.next-month {left:auto;right:35px;} + a.next-year {left:auto;right:0;} + } + + dd.calendar {width:100%;height:auto; + + .week {width:100%;height:35px;margin-bottom:5px;border-bottom:1px solid #eee;} + span.td {float:left;width:35px;} + .list span.td {height:30px;line-height:30px;cursor:pointer;@include ts(); + + &:hover {background:nth($cp, 1);} + &.weeken {color:nth($cr, 1)} + &.selected {background:nth($cg, 2);color:#fff} + &.disabled {color:nth($cp, 3);cursor:default;} + &.disabled:hover {background:none;} + } + } + dd.time {position:relative;width:100%;height:41px;padding:5px 0;margin-top:5px;line-height:30px;border-top:1px solid #eee; + + label {float:left;width:60px;height:30px; + input {width:30px;height:30px;border:1px solid nth($cp, 1);text-align:center;} + } + .now {float:right;width:50px;height:30px;border-radius:3px;background:nth($cg, 1);color:#fff;text-align:center; + + &:hover {background:nth($cg, 2);} + &:active {background:nth($cg, 3);} + } + } + dd.tips {position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;text-align:center;} + } + +} \ No newline at end of file diff --git a/js/yua-touch.js b/js/yua-touch.js index 4c01231..d1a79bb 100644 --- a/js/yua-touch.js +++ b/js/yua-touch.js @@ -1178,7 +1178,7 @@ function $emit(key, args) { var path = p + "." + key; arr = path.split("."); - args = args.concat([path, key]) + args = args && args.concat([path, key]) || [path, key] if (arr.indexOf("*") === -1) { $emit.call(parent, path, args)//以确切的值往上冒泡 diff --git a/js/yua.js b/js/yua.js index 3f2c166..aa36cbe 100644 --- a/js/yua.js +++ b/js/yua.js @@ -1177,7 +1177,7 @@ function $emit(key, args) { var path = p + "." + key; arr = path.split("."); - args = args.concat([path, key]) + args = args && args.concat([path, key]) || [path, key] if (arr.indexOf("*") === -1) { $emit.call(parent, path, args)//以确切的值往上冒泡 @@ -1711,7 +1711,6 @@ var newProto = { }, clear: function () { this.removeAll() - return this } }