mx-calendar

默认情形

HTML Code:

<mx-view
    tag="input"
    path="app/gallery/mx-calendar/rangepicker"
    class="input"
    placeholder="请选择日期范围"/>

指定开始结束日期

HTML Code:

<mx-view
    tag="input"
    class="input"
    placeholder="请选择日期范围"
    path="app/gallery/mx-calendar/rangepicker"
    start="2018-01-01"
    end="2019-01-01"/>

不显示快捷日期

HTML Code:

<mx-view
    tag="input"
    class="input"
    placeholder="请选择日期范围"
    path="app/gallery/mx-calendar/datepicker"
    shortcuts="false"/>

设置可选择的范围

HTML Code:

<mx-view
    tag="input"
    path="app/gallery/mx-calendar/rangepicker"
    min="2017-08-05"
    max="2017-08-22"
    start="2017-08-08"
    end="2017-08-20"
    shortcuts="false"
    class="input"/>

右上对齐

HTML Code:

<mx-view
    tag="input"
    path="app/gallery/mx-calendar/rangepicker"
    align="right"
    placement="top"
    class="input"/>

带时分秒

HTML Code:

<mx-view
    tag="input"
    path="app/gallery/mx-calendar/rangepicker"
    time-type="all"
    class="input"/>

带时分秒的选中

HTML Code:

<mx-view
    tag="input"
    path="app/gallery/mx-calendar/rangepicker"
    time-type="all"
    start="2017-07-07 18:08:08"
    end="2017-12-30 15:15:15"
    class="input"/>

change事件

HTML Code:

<mx-view
    tag="input"
    path="app/gallery/mx-calendar/rangepicker"
    time-type="all"
    mx-change="showDatetime()"
    class="input"/>

Javascript Code:

let Magix = require('magix');
let GTip = require('mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@rangepicker.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest();
    },
    'showDatetime<change>' (e) {
        console.log(e.dates);
        this.gtipRT('日期：' + JSON.stringify(e.dates));
    }
});

只有年月

HTML Code:

<mx-calendar-rangepicker
    class="input"
    date-type="year,month"
    start="2017-07"
    end="2017-12"
    formatter="YYYY-MM"
    shortcuts="false" />