riot-calendar

riot-calenar示例

基本的riot-calendar

最基本的用法

var c1 = document.querySelector('riot-calendar');
new riotComponent.RiotCalendar(c1);

范围选择riot-calendar

范围值:

传入isRange进行范围选择

var c3 = document.querySelector('riot-calendar-1');
var ipt3 = document.querySelector('.datepicker3')
new riotComponent.RiotCalendar(c3,{
	isRange: true,
	dateTimeFormat: 'YYYY年MM月DD日',
	selectDates:[new Date(2016,9,10), new Date(2016,9,25)],
	onChange: function(date,tag){
		ipt3.value = tag.getSelectDates().map(function(date){
      return date.dateformat;
    }).join(' - ') || ''
	}
})

设置最小值minDate

选取值:

传入minDate,设置最小可选日期

var c4 = document.querySelector('.riot-calendar-4');
var ipt4 = document.querySelector('.datepicker4');
var weekTitle = ['日','一','二','三', '四', '五', '六'];
new riotComponent.RiotCalendar(c4,{
	onChange: function(date){
    if(date.select){
      ipt4.value = date.format(function(date){
        return date.date() + '日' + (date.month() + 1) + '月' + date.year() + '年' +  ', ' + '周' + weekTitle[date.day()]  
      })
    }
	},
	minDate: new Date()
})

超出范围后禁止切换日历

选择值:

设置switchViewOverLimit禁用超出范围切换日历

var c6 = document.querySelector('riot-calendar-6');
var ipt6 = document.querySelector('.datepicker6');
new riotComponent.RiotCalendar(c6,{
	isMultiple: true,
	selectDates:[new Date(2016,9,1), new Date(2016,9,25)],
	onChange: function(date,tag){
		ipt6.value = tag.getSelectDates().map(function(date){
      return date.format('YYYY/MM/DD');
    }).join(' , ') || ''
	},
  tt: 1,
	minDate: new Date(),
	switchViewOverLimit: true,
  maxDate: riotComponent.utils.addDays(new Date(),60)
})

利用`beforeShowDate`自定义日期显示

选择值:

设置beforeShowDate自定义日期显示

var c15 = document.querySelector('.riot-calendar-1-5');
var ipt15 = document.querySelector('.ipt-1-5');
var today =  new Date();
var y = today.getFullYear();
var m = today.getMonth() + 1;
var d = today.getDate();
var words = {
  '2016-10-1': '国庆节',
  '2016-9-10': '教师节',
  '2016-11-15': '火车票不要钱'
}
words[y + '-' + m + '-' + d] = '今天';
new riotComponent.RiotCalendar(c15,{
	beforeShowDate: function(riotDate){
    var wordKey = riotDate.format('YYYY-M-D');
    var word = words[wordKey];
    if(word){
      return {html:'<span class="date-word date-key-' + wordKey + '">' + word + '</span>',
      className: 'test-before-show-date'}
    }
	},
	onChange: function(date,tag){
		ipt15.value = tag.getSelectDates().map(function(date){
      return date.format('YYYY/MM/DD');
    }).join(' , ') || ''
	}
})

范围选择riot-calendar将设置minRangeGap,maxRangeGap

范围值:

传入isRange进行范围选择，并传入minRangeGap与maxRangeGap控制选择区间范围,最小连续5天，最大连续10天,如果区间范围为2天，则把选中的当区间开始日期

var c16 = document.querySelector('riot-calendar-1-6');
var ipt16 = document.querySelector('.datepicker-1-6');
var d = new Date();
var rc16 = new riotComponent.RiotCalendar(c16,{
	isRange: true,
	dateTimeFormat: 'YYYY年MM月DD日',
  minRangeGap: 5,
  maxRangeGap: 10,
  switchViewByOtherMonth: true,
	selectDates:[d, riotComponent.utils.addDays(d, 7)],
	onChange: function(date,tag){
		ipt16.value = tag.getSelectDates().map(function(date){
      return date.format('YYYY/MM/DD');
    }).join(' - ') || ''
	},
  onRangeGapInvalid: function(type,  validEnd, curRiotDate){
    alert('当前选择日期不符合' + type + 'RangeGap的值')
    var rsa = rc16.getSelectDates();
    var rs = rsa[0]._d;
    var cs = curRiotDate._d;
    var diff = (cs - rs) / 1000 / 60 / 60 / 24;
    if(type === "min" && diff === 2){
      return true;
    }
    return false;
  }
})

设置singleView为true,轻松实现移动端日历多月单视图

范围值:

设置singleView=true,注意singleView为真，视图范围根据minDate,maxDate实现，另外以下参数会被重置

switchViewOverLimit重置为true
switchViewByOtherMonth重置为false
showOtherMonthDates重置为false

singleView日历会有一个riot-calendar--singleView的最外层类名，方便自定义样式

var c17 = document.querySelector('riot-calendar-1-7');
var ipt17 = document.querySelector('.datepicker-1-7');
var now = new Date();
var end = riotComponent.utils.addDays(now, 90);
var rc17 = new riotComponent.RiotCalendar(c17,{
	isRange: true,
	dateTimeFormat: 'YYYY年MM月DD日',
  switchViewByOtherMonth: true,
  minDate: now,
  maxDate: end,
	onChange: function(date,tag){
		ipt17.value = tag.getSelectDates().map(function(date){
      return date.format('YYYY/MM/DD');
    }).join(' - ') || ''
	},
  singleView: true
})

dateTimeFormat方法，自定义日期显示格式,可以为字符串，可以为函数

自定义值:

设置dateTimeFormat自定义日历显示格式

var c2 = document.querySelector('.riot-calendar-10');
var ipt2 = document.querySelector('.datepicker2');
new riotComponent.RiotCalendar(c2,{
  dateTimeFormat: 'YYYY/MM/DD',
  onChange: function(date,tag){
    ipt2.value = date.select && date.dateformat || '';
  }
})

范围选择riot-calendar，并设置范围的最大与最小可选区域

范围值:

传入isRange进行范围选择,并通过rangeLimit设置范围大小

var c8 = document.querySelector('.riot-calendar-8');
var ipt8 = document.querySelector('.datepicker8');
var d = new Date();
new riotComponent.RiotCalendar(c8,{
	isRange: true,
  rangeLimit: [riotComponent.utils.subtractDays(d, 30), riotComponent.utils.addDays(d, 60)],
	switchViewOverLimit: true,
	dateTimeFormat: 'YYYY年M月D日',
	selectDates:[d, riotComponent.utils.addDays(d, 5)],
	onChange: function(date,tag){
		ipt8.value = tag.getSelectDates().map(function(date){
      return date.dateformat;
    }).join(' - ') || '';
	}
})

disabledDate数组控制不可选日期

选取值:

设置disabledDate函数进行精细化控制，将今天之后30天之内的星期天全部置为不可选

var c7 = document.querySelector('.riot-calendar-7');
var ipt7 = document.querySelector('.datepicker7');
var d = new Date();
var d2 = riotComponent.utils.addDays(d,31);
new riotComponent.RiotCalendar(c7,{
	onChange: function(date){
    ipt7.value = date.select && date.format('YYYY/MM/DD');
	},
	disabledDate: function(date){
		if(date.day() === 0 && date.disable === 0 && riotComponent.utils.isAfterDate(d2, date._d)){
			date.disable = 4
		}
	},
	minDate: d
})

多选riot-calendar

多选值:

设置isMultiple，可以多选日期

var c5 = document.querySelector('riot-calendar-5');
var ipt5 = document.querySelector('.datepicker5');
var rs5 = new riotComponent.RiotCalendar(c5,{
	isMultiple: true,
	selectDates:[new Date(2016,9,1), new Date(2016,9,25)],
	onChange: function(date,tag){
		ipt5.value = tag.getSelectDates().map(function(date){
      return date.format('YYYY/MM/DD')
    }).join(' , ') || '';
	}
});
ipt5.value = rs5.getSelectDates().map(function(date){
  return date.format('YYYY/MM/DD')
}).join(' , ');

利用`switchCalendarByDate`跳转到指定的日期

选择值:

利用switchCalendarByDate回调函数，可以跳转到指定日期

1. 函数会返回跳转成功与否的结果 true | false
2. 日期如果超出受限范围[rangeLimit/minDate/maxDate]且switchViewOverLimit=true，则跳转不成功，返回false
3. 如果跳转日期就是当前日历视图也不会跳转，返回false

var c25 = document.querySelector('.riot-calendar-2-5');
var ipt25 = document.querySelector('.ipt-2-5');
var btn25 = document.querySelector('.btn-2-5');
btn25.onclick = function(e){
  result = calendar25.switchCalendarByDate(new Date(2016,10,1));
}
var calendar25 = new riotComponent.RiotCalendar(c25,{
	onChange: function(riotDate,tag){
    ipt25.value = riotDate.select && riotDate.format('MM月DD日,YYYY年');
	}
});

多视图日历

opts.numberOfMonths控制显示多个月

opts.numberOfMonths参数为number,一行显示多列日历
opts.numberOfMonths参数为[number,number], 第一个参数表示行数，第二个参数表示列数
设置opts.numberOfMonths后opts.showOtherMonthDates重置为false

var c17 = document.querySelector('.riot-calendar-2-6');
window.r1=new riotComponent.RiotCalendar(c17, {
  numberOfMonths: [2,2],
  isRange: true
})

基本的riot-calendar

范围选择riot-calendar

设置最小值minDate

超出范围后禁止切换日历

利用beforeShowDate自定义日期显示

范围选择riot-calendar将设置minRangeGap,maxRangeGap

设置singleView为true,轻松实现移动端日历多月单视图

dateTimeFormat方法，自定义日期显示格式,可以为字符串，可以为函数

范围选择riot-calendar，并设置范围的最大与最小可选区域

disabledDate数组控制不可选日期

多选riot-calendar

利用switchCalendarByDate跳转到指定的日期

多视图日历

利用`beforeShowDate`自定义日期显示

利用`switchCalendarByDate`跳转到指定的日期