mx-calendar

默认情形

HTML Code:

<mx-view tag="input" path="app/gallerymx-calendar/datepicker" class="input" placeholder="请选择日期"/>

默认选中某天

HTML Code:

<mx-view tag="input" class="input" placeholder="请选择日期"
    path="app/gallery/mx-calendar/datepicker"
    selected="2018-01-01">

从input中读取日期

HTML Code:

<mx-view tag="input" class="input" placeholder="请选择日期"
    value="2018-03-02"
    path="app/gallery/mx-calendar/datepicker">

设置可选择的范围

HTML Code:

<mx-view tag="input" path="app/gallery/mx-calendar/datepicker"
    min="2017-08-05"
    max="2017-08-22"
    value="2017-08-12"
    class="input"/>

设置周二为一周的开始

HTML Code:

<mx-view tag="input" path="app/gallery/mx-calendar/datepicker"
    week-start="<%@ 2 %>"
    class="input"/>

右下对齐

HTML Code:

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

右上对齐

HTML Code:

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

带时分秒

HTML Code:

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

带时分秒的选中

HTML Code:

<mx-view tag="input" path="app/gallery/mx-calendar/datepicker"
    time-type="all"
    value="2018-08-08 18:08:20"
    class="input"/>

带时分秒,只能选择小时

HTML Code:

<mx-view tag="input" path="app/gallery/mx-calendar/datepicker"
    time-type="hour"
    value="2018-08-08 18:08:20"
    class="input"/>

change事件

HTML Code:

<mx-view tag="input" path="app/gallery/mx-calendar/datepicker"
    time-type="all"
    selected="2018-08-08 18:08:20"
    mx-change="showDatetime()"
    class="input"/>

Javascript Code:

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

只选择年月

HTML Code:

<mx-calendar-datepicker class="input" date-type="year,month" selected="2010-02" />