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

magix组件

<h2>mx-calendar</h2>
<h3>默认情形</h3>
<div class="pt20 clearfix">
    <mx-view tag="input"
        path="mx-calendar/rangepicker"
        class="input"
        placeholder="请选择日期范围" />
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view
    tag="input"
    path="app/gallery/mx-calendar/rangepicker"
    class="input"
    placeholder="请选择日期范围"/&gt;</pre>
</div>
<h3 class="mt30">指定开始结束日期</h3>
<div class="pt20 clearfix">
    <mx-view
        tag="input"
        class="input"
        placeholder="请选择日期范围"
        path="mx-calendar/rangepicker"
        start="2018-01-01"
        end="2019-01-01"/>
</div>
<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view
    tag="input"
    class="input"
    placeholder="请选择日期范围"
    path="app/gallery/mx-calendar/rangepicker"
    start="2018-01-01"
    end="2019-01-01"/&gt;</pre>
</div>

<h3 class="mt30">不显示快捷日期</h3>
<div class="pt20 clearfix">
    <mx-view
        tag="input"
        class="input"
        placeholder="请选择日期范围"
        path="mx-calendar/rangepicker"
        shortcuts="false"/>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view
    tag="input"
    class="input"
    placeholder="请选择日期范围"
    path="app/gallery/mx-calendar/datepicker"
    shortcuts="false"/&gt;</pre>
</div>
<h3 class="mt30">设置可选择的范围</h3>
<div class="pt20 clearfix">
    <mx-view
        tag="input"
        path="mx-calendar/rangepicker"
        min="2017-08-05"
        max="2017-08-22"
        start="2017-08-08"
        end="2017-08-20"
        shortcuts="false"
        class="input"/>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;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"/&gt;</pre>
</div>

<h3 class="mt30">右上对齐</h3>
<div class="pt20 clearfix">
    <mx-view
        tag="input"
        path="mx-calendar/rangepicker"
        align="right"
        placement="top"
        class="input"/>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view
    tag="input"
    path="app/gallery/mx-calendar/rangepicker"
    align="right"
    placement="top"
    class="input"/&gt;</pre>
</div>
<h3 class="mt30">带时分秒</h3>
<div class="pt20 clearfix">
    <mx-view
        tag="input"
        path="mx-calendar/rangepicker"
        time-type="all"
        class="input"/>
</div>

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

<h3 class="mt30">带时分秒的选中</h3>
<div class="pt20 clearfix">
    <mx-view
        tag="input"
        path="mx-calendar/rangepicker"
        time-type="all"
        start="2017-07-07 18:08:08"
        end="2017-12-30 15:15:15"
        class="input"/>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;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"/&gt;</pre>
</div>


<h3 class="mt30">change事件</h3>
<div class="pt20 clearfix">
    <mx-view
        tag="input"
        path="mx-calendar/rangepicker"
        time-type="all"
        mx-change="showDatetime()"
        class="input"/>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view
    tag="input"
    path="app/gallery/mx-calendar/rangepicker"
    time-type="all"
    mx-change="showDatetime()"
    class="input"/&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: '@rangepicker.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest();
    },
    'showDatetime&lt;change&gt;' (e) {
        console.log(e.dates);
        this.gtipRT('日期：' + JSON.stringify(e.dates));
    }
});</pre>
</div>

<h3 class="mt30">只有年月</h3>
<div class="pt20 clearfix">
    <mx-calendar-rangepicker
        class="input"
        date-type="year,month"
        start="2017-07"
        end="2017-12"
        formatter="YYYY-MM"
        shortcuts="false" />
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-calendar-rangepicker
    class="input"
    date-type="year,month"
    start="2017-07"
    end="2017-12"
    formatter="YYYY-MM"
    shortcuts="false" /&gt;</pre>
</div>