magix-components
Version:
1 lines • 4.22 kB
JavaScript
define("mx-calendar/__test__/rangepicker",["magix","mx-gtip/index","../rangepicker"],function(e,a,n){e("../rangepicker");var i=e("magix"),t=e("mx-gtip/index");n.exports=i.View.extend({tmpl:{html:'<h2>mx-calendar</h2><h3>默认情形</h3><div class="B ag"><input mx-view="mx-calendar/rangepicker" class="an" placeholder="请选择日期范围"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n path="app/gallery/mx-calendar/rangepicker"\n class="input"\n placeholder="请选择日期范围"/></pre></div><h3 class="f">指定开始结束日期</h3><div class="B ag"><input class="an" placeholder="请选择日期范围" mx-view="mx-calendar/rangepicker?start=2018-01-01&end=2019-01-01"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n class="input"\n placeholder="请选择日期范围"\n path="app/gallery/mx-calendar/rangepicker"\n start="2018-01-01"\n end="2019-01-01"/></pre></div><h3 class="f">不显示快捷日期</h3><div class="B ag"><input class="an" placeholder="请选择日期范围" mx-view="mx-calendar/rangepicker?shortcuts=false"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n class="input"\n placeholder="请选择日期范围"\n path="app/gallery/mx-calendar/datepicker"\n shortcuts="false"/></pre></div><h3 class="f">设置可选择的范围</h3><div class="B ag"><input mx-view="mx-calendar/rangepicker?min=2017-08-05&max=2017-08-22&start=2017-08-08&end=2017-08-20&shortcuts=false" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n path="app/gallery/mx-calendar/rangepicker"\n min="2017-08-05"\n max="2017-08-22"\n start="2017-08-08"\n end="2017-08-20"\n shortcuts="false"\n class="input"/></pre></div><h3 class="f">右上对齐</h3><div class="B ag"><input mx-view="mx-calendar/rangepicker?align=right&placement=top" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n path="app/gallery/mx-calendar/rangepicker"\n align="right"\n placement="top"\n class="input"/></pre></div><h3 class="f">带时分秒</h3><div class="B ag"><input mx-view="mx-calendar/rangepicker?timeType=all" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n path="app/gallery/mx-calendar/rangepicker"\n time-type="all"\n class="input"/></pre></div><h3 class="f">带时分秒的选中</h3><div class="B ag"><input mx-view="mx-calendar/rangepicker?timeType=all&start=2017-07-07%2018%3A08%3A08&end=2017-12-30%2015%3A15%3A15" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n path="app/gallery/mx-calendar/rangepicker"\n time-type="all"\n start="2017-07-07 18:08:08"\n end="2017-12-30 15:15:15"\n class="input"/></pre></div><h3 class="f">change事件</h3><div class="B ag"><input mx-view="mx-calendar/rangepicker?timeType=all" mx-change=" showDatetime()" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n path="app/gallery/mx-calendar/rangepicker"\n time-type="all"\n mx-change="showDatetime()"\n class="input"/></pre><div class="z">Javascript Code:</div><pre>let Magix = require(\'magix\');\nlet GTip = require(\'mx-gtip/index\');\nmodule.exports = Magix.View.extend({\n tmpl: \'@rangepicker.html\',\n mixins: [GTip],\n render() {\n let me = this;\n me.updater.digest();\n },\n \'showDatetime<change>\' (e) {\n console.log(e.dates);\n this.gtipRT(\'日期：\' + JSON.stringify(e.dates));\n }\n});</pre></div><h3 class="f">只有年月</h3><div class="B ag"><input class="an" mx-view="mx-calendar/rangepicker?dateType=year%2Cmonth&start=2017-07&end=2017-12&formatter=YYYY-MM&shortcuts=false"></div><div class="B"><div>HTML Code:</div><pre><mx-calendar-rangepicker\n class="input"\n date-type="year,month"\n start="2017-07"\n end="2017-12"\n formatter="YYYY-MM"\n shortcuts="false" /></pre></div>',subs:[]},mixins:[t],render:function(){this.updater.digest()},"showDatetime<change>":function(e){this.gtipRT("日期："+JSON.stringify(e.dates))}})});