3.1.8 calendar

说明: 比原生的日历框好看了一点点,可以配置的功能也多了一点点

使用及参数说明:

html

<div class="xui_date_picker" >
	<input type="text" id="test" placeholder="请选择日期" class="xui_input xui_date_input" />
	<span class="xui_close_small" data-date=""></span>
</div>

1.ES5时代
let test = xui.calendar({
	id: string,
	startDate: string,
	endDate: string,
	isToday: boolean,
	isOtherMonths: boolean,
	isChinese: boolean,
	fn: function(date){
		document.getElementById('test').value = date;
	}
});

2.ES6时代
import calender from '../packages/calender';
let test = calendar({
	id: string,
	startDate: string,
	endDate: string,
	isToday: boolean,
	isOtherMonths: boolean,
	isChinese: boolean,
	fn: function(date){
		document.getElementById('test').value = date;
	}
});

test.getCurrentDate();
test.setCurrentDate(1556193739382);

复制好html, 然后给你的日期选择框一个响亮的id, 接下来你就知道怎么做了吧!?
id表示提示信息的文案必传
startDate和endDate表示日历的开始日期和结束日期非必传,哈哈,就是你可以传1个或者2个,或者干脆不写
isToday表示是否在日历下边显示today按钮, 用户就可以快速选择今天了.
isOtherMonths表示是否显示除当前月的前一个月,后一个月的日期, 不传就是不显示咯!
isChinese表示日历显示的语言,设置为true时显示为中文,默认为英文.
callback表示选择日期后的回调, 怎么说呢,你不写不会报错,但是你无法获取用户选择的日期了哟!
<span class="xui_close_small" data-date=""></span>表示鼠标hover显示一个清空选择的值,当然不加上去也不会报错
getCurrentDate实例上的方法，用来获取当前选择的日期
setCurrentDate实例上的方法，用来设置日历的展示值，支持yyyy-mm-dd, yyyy/mm/dd, 1556100117317
没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

1.如果你仅仅是想用一下日历, 并不要求太多, 那么你可以这么做,代码非常简单

xui.calendar({
	id: 'test',
	fn: function(date){
		document.getElementById('test').value = date;
	}
});

2.有些时候,产品经理会给你说我还要限制一下日期的选择,总不能选择10年前的日期啊. 那么着也简单,你加2个配置参数即可

xui.calendar({
	id: 'test1',
	startDate: '2017/12/01',
	endDate: '2018/12/31',
	fn: function(date){
		document.getElementById('test1').value = date;
	}
});

3.最后你不耐烦了, 把所有的功能都加上了,这下你该满足了吧! 哈哈

xui.calendar({
	id: 'test2',
	startDate: '2017/12/01',
	endDate: '2020/12/31',
	isToday: true,
	isOtherMonths: true,
	isChinese: true,
	fn: function(date){
		document.getElementById('test2').value = date;
	}
});

3.1.8 calendar ​

使用及参数说明: ​

效果展示 ​

3.1.8 calendar

使用及参数说明:

效果展示