新日期选择 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: '',
    }
});

API

KLDate

Param	Type	Default	Description
value	`object`		= 绑定属性
type	`string`	`"date"`	=> 日期类型：date /datetime /daterange /datetimerange /year /month
showWeekNumbers	`boolean`	`false`	=> 开启后，可以显示星期数。
splitPanels	`boolean`	`false`	=> 多选的时候日历面板是否联动，开启属性 split-panels 后，左右两面板在切换年、月时不联动。详见示例
confirm	`boolean`	`false`	=> 是否点击确认后才关闭下拉，设置属性 confirm，选择日期后，选择器不会主动关闭，需用户确认后才可关闭。
disabledDate	`function`		=> 设置不可选择的日期，参数为当前的日期，需要返回 Boolean 是否禁用这天。详见示例
shortcuts	`array`		=> 设置快捷选项，每项内容： text（String）：显示的文案； value（Function）：返回指定的日期，如需自己控制逻辑，可不设置，并使用 onClick 回调； onClick（Function）：点击时的回调，参数为当前日期选择器的 Vue 实例，当需要自定义复杂操作时，可以使用。详见示例
format	`string`		=> 展示的日期格式 date / daterange：yyyy-MM-dd datetime / datetimerange：yyyy-MM-dd HH:mm:ss year：yyyy month：yyyy-MM

pick 选中事件Event

Name	Type	Description
event	`object`	事件发送对象