github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

laydate calendarLinkage属性改名为rangeLinked，改进auto模式的初始化判定，如果空值初始化面板为联动的并且不会有一个默认的区间，去掉相互独立面板的选中范围标识，保持跟之前相互独立面板的效果一致，让两者的特性更加明显容易辨别不会搞混

pull/1172/head
sunxiaobin89 2022-12-03 18:40:07 +08:00
parent 8fbea1ab6a
commit 370f56c24c
2 changed files with 47 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/css/modules/laydate.css
View File

@ -113,8 +113,8 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
.layui-laydate-content{border-top: none 0; border-bottom: none 0;} .layui-laydate-content{border-top: none 0; border-bottom: none 0;}
.layui-laydate-content th{color: #333;} .layui-laydate-content th{color: #333;}
.layui-laydate-content td{color: #666;} .layui-laydate-content td{color: #666;}
.layui-laydate-content td.laydate-selected>div{background-color: #00F7DE;} .layui-laydate-linkage .layui-laydate-content td.laydate-selected>div{background-color: #00F7DE;}
.laydate-selected:hover>div{background-color: #00F7DE !important;} .layui-laydate-linkage .laydate-selected:hover>div{background-color: #00F7DE !important;}
.layui-laydate-content td>div:hover, .layui-laydate-content td>div:hover,
.layui-laydate-list li:hover, .layui-laydate-list li:hover,
.layui-laydate-shortcut>li:hover{background-color: #eee; color: #333;} .layui-laydate-shortcut>li:hover{background-color: #eee; color: #333;}
@ -123,8 +123,8 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
.laydate-time-list>li:hover{background: none;} .laydate-time-list>li:hover{background: none;}
.layui-laydate-content .laydate-day-prev, .layui-laydate-content .laydate-day-prev,
.layui-laydate-content .laydate-day-next{color: #d2d2d2;} .layui-laydate-content .laydate-day-next{color: #d2d2d2;}
.laydate-selected.laydate-day-prev>div, .layui-laydate-linkage .laydate-selected.laydate-day-prev>div,
.laydate-selected.laydate-day-next>div{background-color: #f8f8f8 !important;} .layui-laydate-linkage .laydate-selected.laydate-day-next>div{background-color: #f8f8f8 !important;}
.layui-laydate-footer{border-top: 1px solid #e2e2e2;} .layui-laydate-footer{border-top: 1px solid #e2e2e2;}
.layui-laydate-hint{color: #FF5722;} .layui-laydate-hint{color: #FF5722;}
.laydate-day-mark::after{background-color: #5FB878;} .laydate-day-mark::after{background-color: #5FB878;}
@ -153,10 +153,10 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
.laydate-theme-grid .layui-laydate-content thead, .laydate-theme-grid .layui-laydate-content thead,
.laydate-theme-grid .laydate-year-list>li, .laydate-theme-grid .laydate-year-list>li,
.laydate-theme-grid .laydate-month-list>li{border: 1px solid #e2e2e2;} .laydate-theme-grid .laydate-month-list>li{border: 1px solid #e2e2e2;}
.laydate-theme-grid .laydate-selected, .layui-laydate-linkage.laydate-theme-grid .laydate-selected,
.laydate-theme-grid .laydate-selected:hover{background-color: #f2f2f2 !important; color: #009688 !important;} .layui-laydate-linkage.laydate-theme-grid .laydate-selected:hover{background-color: #f2f2f2 !important; color: #009688 !important;}
.laydate-theme-grid .laydate-selected.laydate-day-prev, .layui-laydate-linkage.laydate-theme-grid .laydate-selected.laydate-day-prev,
.laydate-theme-grid .laydate-selected.laydate-day-next{color: #d2d2d2 !important;} .layui-laydate-linkage.laydate-theme-grid .laydate-selected.laydate-day-next{color: #d2d2d2 !important;}
.laydate-theme-grid .laydate-year-list, .laydate-theme-grid .laydate-year-list,
.laydate-theme-grid .laydate-month-list{margin: 1px 0 0 1px;} .laydate-theme-grid .laydate-month-list{margin: 1px 0 0 1px;}
.laydate-theme-grid .laydate-year-list>li, .laydate-theme-grid .laydate-year-list>li,

85
src/modules/laydate.js
View File

@ -27,6 +27,7 @@
v: '5.4.0' // layDate 版本号 v: '5.4.0' // layDate 版本号
,config: { ,config: {
weekStart: 0, // 默认周日一周的开始 weekStart: 0, // 默认周日一周的开始
// rangeLinked: true // 日历面板默认为联动的方式
} // 全局配置项 } // 全局配置项
,index: (window.laydate && window.laydate.v) ? 100000 : 0 ,index: (window.laydate && window.laydate.v) ? 100000 : 0
,path: GLOBAL.laydate_dir || ready.getPath ,path: GLOBAL.laydate_dir || ready.getPath
@ -247,19 +248,19 @@
) : ''; ) : '';
//日期范围的日历面板是否联动 //日期范围的日历面板是否联动
that.calendarLinkage = !!(options.range && options.calendarLinkage && (options.type === 'date' || options.type === 'datetime')) that.rangeLinked = !!(options.range && options.rangeLinked && (options.type === 'date' || options.type === 'datetime'))
//切换日历联动方式 //切换日历联动方式
that.autoCalendarModel = function () { that.autoCalendarModel = function () {
var state = that.calendarLinkage; var state = that.rangeLinked;
that.calendarLinkage = (options.range && (options.type === 'date' || options.type === 'datetime')) that.rangeLinked = (options.range && (options.type === 'date' || options.type === 'datetime'))
&& that.startDate && that.endDate && that.startDate.year === that.endDate.year && that.startDate.month === that.endDate.month; && ((!that.startDate || !that.endDate) || (that.startDate && that.endDate && that.startDate.year === that.endDate.year && that.startDate.month === that.endDate.month));
lay(that.elem)[that.calendarLinkage ? 'addClass' : 'removeClass']('layui-laydate-linkage'); lay(that.elem)[that.rangeLinked ? 'addClass' : 'removeClass']('layui-laydate-linkage');
return that.calendarLinkage != state; // 返回发生了变化 return that.rangeLinked != state; // 返回发生了变化
}; };
//是否自动切换 //是否自动切换
that.autoCalendarModel.auto = that.calendarLinkage && options.calendarLinkage === 'auto'; that.autoCalendarModel.auto = that.rangeLinked && options.rangeLinked === 'auto';
//若 range 参数为数组，则表示为开始日期和结束日期的 input 对象 //若 range 参数为数组，则表示为开始日期和结束日期的 input 对象
if(layui.type(options.range) === 'array'){ if(layui.type(options.range) === 'array'){
@ -409,7 +410,7 @@
,"class": [ ,"class": [
'layui-laydate' 'layui-laydate'
,options.range ? ' layui-laydate-range' : '' ,options.range ? ' layui-laydate-range' : ''
,that.calendarLinkage ? ' layui-laydate-linkage' : '' ,that.rangeLinked ? ' layui-laydate-linkage' : ''
,isStatic ? (' '+ ELEM_STATIC) : '' ,isStatic ? (' '+ ELEM_STATIC) : ''
,options.fullPanel ? ' laydate-theme-fullpanel' : '' // 全面版 ,options.fullPanel ? ' laydate-theme-fullpanel' : '' // 全面版
// ,options.theme && options.theme !== 'default' && !/^#/.test(options.theme) ? (' laydate-theme-' + options.theme) : '' // ,options.theme && options.theme !== 'default' && !/^#/.test(options.theme) ? (' laydate-theme-' + options.theme) : ''
@ -582,14 +583,15 @@
seconds: dateTime.seconds, seconds: dateTime.seconds,
} }
} }
if (i === 0) { // 第一个值作为startDate
that.startDate = lay.extend({}, dateTime);
} else {
that.endState = true;
}
if (type === 'year' || type === 'month' || type === 'time') { if (type === 'year' || type === 'month' || type === 'time') {
that.listYM[i] = [dateTime.year, dateTime.month + 1]; that.listYM[i] = [dateTime.year, dateTime.month + 1];
} else { } else if (i) {
if (i === 0) { // 第一个值作为startDate that.autoCalendarModel.auto && that.autoCalendarModel();
that.startDate = lay.extend({}, dateTime);
} else {
that.autoCalendarModel.auto && that.autoCalendarModel();
}
} }
}); });
that.checkDate('limit').calendar(null, null, 'init'); that.checkDate('limit').calendar(null, null, 'init');
@ -839,7 +841,7 @@
if(fn === 'limit') { if(fn === 'limit') {
if (options.range) { if (options.range) {
checkValid(that.calendarLinkage ? that.startDate : dateTime); // 校验开始时间 checkValid(that.rangeLinked ? that.startDate : dateTime); // 校验开始时间
that.endDate && checkValid(that.endDate); // 校验结束时间 that.endDate && checkValid(that.endDate); // 校验结束时间
} else { } else {
checkValid(dateTime); checkValid(dateTime);
@ -970,9 +972,9 @@
that.hint('value ' + lang.invalidDate + lang.formatError[1]); that.hint('value ' + lang.invalidDate + lang.formatError[1]);
} }
that.startDate = that.startDate || lay.extend({}, options.dateTime); that.startDate = that.startDate || value && lay.extend({}, options.dateTime); // 有默认值才初始化startDate
that.endState = !that.calendarLinkage || !!(that.startDate && that.endDate); // 初始化选中范围状态
that.autoCalendarModel.auto && that.autoCalendarModel(); that.autoCalendarModel.auto && that.autoCalendarModel();
that.endState = !that.rangeLinked || !!(that.startDate && that.endDate); // 初始化选中范围状态
fn && fn(); fn && fn();
return that; return that;
@ -1096,7 +1098,7 @@
YMD = that.getAsYM(dateTime.year, dateTime.month, 'sub'); YMD = that.getAsYM(dateTime.year, dateTime.month, 'sub');
} else if(index_ >= startWeek && index_ < thisMaxDate + startWeek){ } else if(index_ >= startWeek && index_ < thisMaxDate + startWeek){
st = index_ - startWeek; st = index_ - startWeek;
if (!that.calendarLinkage) { if (!that.rangeLinked) {
st + 1 === dateTime.date && item.addClass(THIS); st + 1 === dateTime.date && item.addClass(THIS);
} }
} else { } else {
@ -1133,15 +1135,6 @@
//初始默认选择器 //初始默认选择器
if(isAlone){ //年、月等独立选择器 if(isAlone){ //年、月等独立选择器
if(options.range){ if(options.range){
// if (that.calendarLinkage) {
// value ? that.endDate = (that.endDate || {
// year: dateTime.year + (options.type === 'year' ? 1 : 0)
// ,month: dateTime.month + (options.type === 'month' ? 0 : -1)
// }) : (that.startDate = that.startDate || {
// year: dateTime.year
// ,month: dateTime.month
// });
// }
if(value || type !== 'init'){ // 判断是否需要显示年月时间列表 if(value || type !== 'init'){ // 判断是否需要显示年月时间列表
that.listYM = [ that.listYM = [
[(that.startDate || options.dateTime).year, (that.startDate || options.dateTime).month + 1] [(that.startDate || options.dateTime).year, (that.startDate || options.dateTime).month + 1]
@ -1164,7 +1157,7 @@
//初始赋值双日历 //初始赋值双日历
if(options.range && type === 'init'){ if(options.range && type === 'init'){
//执行渲染第二个日历 //执行渲染第二个日历
if (that.calendarLinkage) { if (that.rangeLinked) {
var EYM = that.getAsYM(dateTime.year, dateTime.month, index ? 'sub' : null) var EYM = that.getAsYM(dateTime.year, dateTime.month, index ? 'sub' : null)
that.calendar(lay.extend({}, dateTime, { that.calendar(lay.extend({}, dateTime, {
year: EYM[0] year: EYM[0]
@ -1210,7 +1203,7 @@
Class.prototype.list = function(type, index){ Class.prototype.list = function(type, index){
var that = this var that = this
,options = that.config ,options = that.config
,dateTime = that.calendarLinkage ? options.dateTime : [options.dateTime, that.endDate][index] ,dateTime = that.rangeLinked ? options.dateTime : [options.dateTime, that.endDate][index]
,lang = that.lang() ,lang = that.lang()
,isAlone = options.range && options.type !== 'date' && options.type !== 'datetime' //独立范围选择器 ,isAlone = options.range && options.type !== 'date' && options.type !== 'datetime' //独立范围选择器
@ -1382,7 +1375,7 @@
lay(ul).find('li').on('click', function(){ lay(ul).find('li').on('click', function(){
var ym = lay(this).attr('lay-ym') | 0; var ym = lay(this).attr('lay-ym') | 0;
if(lay(this).hasClass(DISABLED)) return; if(lay(this).hasClass(DISABLED)) return;
if (that.calendarLinkage) { if (that.rangeLinked) {
lay.extend(dateTime, { lay.extend(dateTime, {
year: type === 'year' ? ym : listYM[0] year: type === 'year' ? ym : listYM[0]
,month: type === 'year' ? listYM[1] - 1 : ym ,month: type === 'year' ? listYM[1] - 1 : ym
@ -1405,7 +1398,7 @@
} }
} else { } else {
that.checkDate('limit').calendar(dateTime, index, 'init'); // 重新渲染一下两个面板 that.checkDate('limit').calendar(dateTime, index, 'init'); // 重新渲染一下两个面板
that.calendarLinkage || that.choose(lay(elemCont).find('td.layui-this'), index); that.rangeLinked || that.choose(lay(elemCont).find('td.layui-this'), index);
that.closeList(); that.closeList();
} }
@ -1503,7 +1496,7 @@
,lang = that.lang() ,lang = that.lang()
,isOut, elemBtn = lay(that.footer).find(ELEM_CONFIRM); ,isOut, elemBtn = lay(that.footer).find(ELEM_CONFIRM);
if(options.range && options.type !== 'time'){ if(options.range && options.type !== 'time'){
start = start || (that.calendarLinkage ? that.startDate : options.dateTime); start = start || (that.rangeLinked ? that.startDate : options.dateTime);
end = end || that.endDate; end = end || that.endDate;
isOut = that.newDate(start).getTime() > that.newDate(end).getTime(); isOut = that.newDate(start).getTime() > that.newDate(end).getTime();
@ -1531,7 +1524,7 @@
? lay.extend({}, that.endDate, that.endTime) ? lay.extend({}, that.endDate, that.endTime)
: ( : (
options.range options.range
? lay.extend({}, that.calendarLinkage ? that.startDate : options.dateTime, that.startTime) ? lay.extend({}, that.rangeLinked ? that.startDate : options.dateTime, that.startTime)
: options.dateTime) : options.dateTime)
) )
,format = laydate.parse(dateTime, that.format, 1); ,format = laydate.parse(dateTime, that.format, 1);
@ -1604,7 +1597,7 @@
if(!options.isPreview) return; if(!options.isPreview) return;
var elemPreview = lay(that.elem).find('.'+ ELEM_PREVIEW) var elemPreview = lay(that.elem).find('.'+ ELEM_PREVIEW)
,value = options.range ? ((that.calendarLinkage ? that.endState : that.endDate) ? that.parse() : '') : that.parse(); ,value = options.range ? ((that.rangeLinked ? that.endState : that.endDate) ? that.parse() : '') : that.parse();
//显示预览 //显示预览
elemPreview.html(value).css({ elemPreview.html(value).css({
@ -1632,7 +1625,7 @@
Class.prototype.stampRange = function(){ Class.prototype.stampRange = function(){
var that = this var that = this
,options = that.config ,options = that.config
,startTime = that.calendarLinkage ? that.startDate : options.dateTime, endTime ,startTime = that.rangeLinked ? that.startDate : options.dateTime, endTime
,tds = lay(that.elem).find('td'); ,tds = lay(that.elem).find('td');
if(options.range && !that.endState) lay(that.footer).find(ELEM_CONFIRM).addClass(DISABLED); if(options.range && !that.endState) lay(that.footer).find(ELEM_CONFIRM).addClass(DISABLED);
@ -1661,7 +1654,7 @@
}).getTime(); }).getTime();
lay(item).removeClass(ELEM_SELECTED + ' ' + THIS); lay(item).removeClass(ELEM_SELECTED + ' ' + THIS);
if(thisTime === startTime || thisTime === endTime){ if(thisTime === startTime || thisTime === endTime){
(that.calendarLinkage || (!that.calendarLinkage && (i < 42 ? thisTime === startTime : thisTime === endTime))) && (that.rangeLinked || (!that.rangeLinked && (i < 42 ? thisTime === startTime : thisTime === endTime))) &&
lay(item).addClass( lay(item).addClass(
lay(item).hasClass(ELEM_PREV) || lay(item).hasClass(ELEM_NEXT) lay(item).hasClass(ELEM_PREV) || lay(item).hasClass(ELEM_NEXT)
? ELEM_SELECTED ? ELEM_SELECTED
@ -1704,7 +1697,7 @@
var that = this var that = this
,options = that.config; ,options = that.config;
if (that.calendarLinkage) { if (that.rangeLinked) {
if (that.endState || !that.startDate) { if (that.endState || !that.startDate) {
// 重新选择或者第一次选择 // 重新选择或者第一次选择
index = 0; index = 0;
@ -1767,8 +1760,8 @@
if (that.endState && that.autoCalendarModel.auto) { if (that.endState && that.autoCalendarModel.auto) {
isChange = that.autoCalendarModel(); isChange = that.autoCalendarModel();
} }
var isSameDate = that.startDate.year === that.endDate.year && that.startDate.month === that.endDate.month && that.startDate.date === that.endDate.date; if (that.rangeLinked && that.endState && that.newDate(that.startDate) > that.newDate(that.endDate)) {
if (that.calendarLinkage && that.endState && that.newDate(that.startDate) > that.newDate(that.endDate)) { var isSameDate = that.startDate.year === that.endDate.year && that.startDate.month === that.endDate.month && that.startDate.date === that.endDate.date;
// 判断是否反选 // 判断是否反选
var startDate = that.startDate; var startDate = that.startDate;
that.startDate = lay.extend({}, that.endDate, isSameDate ? {} : that.startTime); that.startDate = lay.extend({}, that.endDate, isSameDate ? {} : that.startTime);
@ -1782,7 +1775,7 @@
} }
isChange && (options.dateTime = lay.extend({}, that.startDate)); isChange && (options.dateTime = lay.extend({}, that.startDate));
} }
that.calendar(null, that.calendarLinkage ? null : index, isChange || that.calendarLinkage ? 'init' : null).done(null, 'change'); that.calendar(null, that.rangeLinked ? null : index, isChange || that.rangeLinked ? 'init' : null).done(null, 'change');
} else if(options.position === 'static'){ //直接嵌套的选中 } else if(options.position === 'static'){ //直接嵌套的选中
that.calendar().done().done(null, 'change'); //同时执行 done 和 change 回调 that.calendar().done().done(null, 'change'); //同时执行 done 和 change 回调
} else if(options.type === 'date'){ } else if(options.type === 'date'){
@ -1912,7 +1905,7 @@
return { return {
prevYear: function(){ prevYear: function(){
if(addSubYeay('sub')) return; if(addSubYeay('sub')) return;
if (that.calendarLinkage) { if (that.rangeLinked) {
options.dateTime.year--; options.dateTime.year--;
that.checkDate('limit').calendar(null, null, 'init'); that.checkDate('limit').calendar(null, null, 'init');
} else { } else {
@ -1923,7 +1916,7 @@
} }
} }
,prevMonth: function(){ ,prevMonth: function(){
if (that.calendarLinkage) { if (that.rangeLinked) {
dateTime = options.dateTime; dateTime = options.dateTime;
} }
var YM = that.getAsYM(dateTime.year, dateTime.month, 'sub'); var YM = that.getAsYM(dateTime.year, dateTime.month, 'sub');
@ -1933,13 +1926,13 @@
}); });
that.checkDate('limit').calendar(null, null, 'init'); that.checkDate('limit').calendar(null, null, 'init');
if (!that.calendarLinkage) { if (!that.rangeLinked) {
that.choose(lay(elemCont).find('td.layui-this'), index); that.choose(lay(elemCont).find('td.layui-this'), index);
that.done(null, 'change'); that.done(null, 'change');
} }
} }
,nextMonth: function(){ ,nextMonth: function(){
if (that.calendarLinkage) { if (that.rangeLinked) {
dateTime = options.dateTime; dateTime = options.dateTime;
} }
var YM = that.getAsYM(dateTime.year, dateTime.month); var YM = that.getAsYM(dateTime.year, dateTime.month);
@ -1949,14 +1942,14 @@
}); });
that.checkDate('limit').calendar(null, null, 'init'); that.checkDate('limit').calendar(null, null, 'init');
if (!that.calendarLinkage) { if (!that.rangeLinked) {
that.choose(lay(elemCont).find('td.layui-this'), index); that.choose(lay(elemCont).find('td.layui-this'), index);
that.done(null, 'change'); that.done(null, 'change');
} }
} }
,nextYear: function(){ ,nextYear: function(){
if(addSubYeay()) return; if(addSubYeay()) return;
if (that.calendarLinkage) { if (that.rangeLinked) {
options.dateTime.year++; options.dateTime.year++;
that.checkDate('limit').calendar(null, 0, 'init'); that.checkDate('limit').calendar(null, 0, 'init');
} else { } else {