magix-components/tmpl/mx-calendar/__test__/index.html

magix组件

<h2>mx-calendar</h2>
<h3>默认情形</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-calendar/index"/>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view path="app/gallery/mx-calendar/index" /&gt;</pre>
</div>
<h3 class="mt30">默认选中某天</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-calendar/index"
    selected="2018-01-01"/>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view path="app/gallery/mx-calendar/index"
    selected="2018-01-01"/&gt;</pre>
</div>
<h3 class="mt30">设置可选择的范围</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-calendar/index"
        min="2017-08-05"
        max="2017-08-22"
        selected="2017-08-12"/>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view path="app/gallery/mx-calendar/index"
    min="2017-08-05"
    max="2017-08-22"
    selected="2017-08-12"/&gt;</pre>
</div>

<h3 class="mt30">设置周二为一周的开始</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-calendar/index"
        week-start="<%@ 2 %>"/>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view path="app/gallery/mx-calendar/index"
    week-start="&lt;%@ 2 %&gt;"/&gt;</pre>
</div>
<h3 class="mt30">带时分秒</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-calendar/index"
        time-type="all"/>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view path="app/gallery/mx-calendar/index"
    time-type="all"&gt;</pre>
</div>

<h3 class="mt30">带时分秒的选中</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-calendar/index"
        time-type="all"
        selected="2018-08-08 18:08:20" />
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view path="app/gallery/mx-calendar/index"
    time-type="all"
    selected="2018-08-08 18:08:20"/&gt;</pre>
</div>


<h3 class="mt30">带时分秒,只能选择小时和分钟</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-calendar/index"
        time-type="hour,minute"/>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view path="app/gallery/mx-calendar/index"
    time-type="hour,minute"/&gt;</pre>
</div>

<h3 class="mt30">change事件</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-calendar/index"
        time-type="all"
        selected="2018-08-08 18:08:20"
        mx-change="showDatetime()"/>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view path="app/gallery/mx-calendar/index"
    time-type="all"
    selected="2018-08-08 18:08:20"
    mx-change="showDatetime()"/&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>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&lt;change&gt;' (e) {
        this.gtipRT('日期：' + e.date + '，时间：' + e.time);
    }
});</pre>
</div>