391 lines
11 KiB
JavaScript
391 lines
11 KiB
JavaScript
/**
|
||
*
|
||
* @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
|
||
}) |
JavaScript
95.2%
CSS
4.8%