新日期选择 KLDate

时间选择

<kl-date value="{value}"></kl-date>
<p>选择的是:{value}</p>
var component = new NEKUI.Component({
template: template,
data: {
value: '',
}
});

日期时间选择

<kl-date type="datetime" value="{value}"></kl-date>
<p>选择的是:{value}</p>
var component = new NEKUI.Component({
template: template,
data: {
value: '',
}
});

日期范围选择

<kl-date value="{value}" type="daterange"></kl-date>
<p>选择的是:{value}</p>
var component = new NEKUI.Component({
template: template,
data: {
value: '',
}
});

日期时间范围选择

<kl-date value="{value}" type="datetimerange"></kl-date>
<p>选择的是:{value}</p>
var component = new NEKUI.Component({
template: template,
data: {
value: '',
}
});

年月选择

<kl-row>
<kl-col span="6">
<kl-date type="year" value="{value1}"></kl-date>
</kl-col>
<kl-col span="6">
<kl-date type="month" value="{value2}"></kl-date>
</kl-col>
</kl-row>
<p>选择的年是:{value1},选择的月份是:{value2}</p>
var component = new NEKUI.Component({
template: template,
data: {
value1: '',
value2: '',
}
});

快捷方式

<kl-row>
<kl-col span="6">
<kl-date type="date" value="{value1}" shortcuts={shortcuts1}></kl-date>
</kl-col>
<kl-col span="6">
<kl-date type="daterange" value="{value2}" shortcuts={shortcuts2}></kl-date>
</kl-col>
</kl-row>
<p>选择的年是:{value1},选择的月份是:{value2}</p>
var component = new NEKUI.Component({
template: template,
data: {
value1: '',
shortcuts1: [
{
text: 'Today',
value () {
return new Date();
},
onClick: (picker) => {
window.NEKUI.KLNotify.success('Click today');
}
},
{
text: 'Yesterday',
value () {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
},
onClick: (picker) => {
window.NEKUI.KLNotify.success('Click yesterday');
}
},
{
text: 'One week',
value () {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
},
onClick: (picker) => {
window.NEKUI.KLNotify.success('Click a week ago');
}
}
],
value2: '',
shortcuts2: [
{
text: '1 week',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
}
},
{
text: '1 month',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
}
},
{
text: '3 months',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
}
}
]
}
});

带有确认操作

<kl-row>
<kl-col span="6">
<kl-date type="date" value="{value1}" confirm></kl-date>
</kl-col>
<kl-col span="6">
<kl-date type="daterange" value="{value2}" confirm></kl-date>
</kl-col>
</kl-row>
var component = new NEKUI.Component({
template: template,
data: {
value1: '',
value2: '',
}
});

设置不可选择时间

<kl-row>
<kl-col span="6">
<kl-date type="date" value="{value1}" disabledDate="{disabledDate1}"></kl-date>
</kl-col>
<kl-col span="6">
<kl-date type="daterange" value="{value2}" disabledDate="{disabledDate2}"></kl-date>
</kl-col>
</kl-row>
var component = new NEKUI.Component({
template: template,
data: {
value1: '',
value2: '',
disabledDate1 (date) {
const disabledDay = date.getDate();
return disabledDay === 15;
},
disabledDate2 (date) {
return date && date.valueOf() < Date.now() - 86400000;
}
}
});

展示周数

<kl-row>
<kl-col span="6">
<kl-date type="date" value="{value1}" showWeekNumbers></kl-date>
</kl-col>
<kl-col span="6">
<kl-date type="daterange" value="{value2}" showWeekNumbers></kl-date>
</kl-col>
</kl-row>
var component = new NEKUI.Component({
template: template,
data: {
value1: '',
value2: '',
}
});

日期范围选择的时候,面板不联动

<kl-date value="{value}" type="daterange" splitPanels></kl-date>
<p>选择的是:{value}</p>
var component = new NEKUI.Component({
template: template,
data: {
value: '',
}
});