cmp.DtPicker 类
日期选择
方法
构造函数
cmp.DtPicker
cmp.DtPicker
(
-
options
)
Object
参数:
| 名称 | 类型 | 标识 | 描述 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options
| Object | 必选 | 组件配置参数，对该组件类型特性的定义，配置不同展示的方式不同
|
返回值:
[Object]
日期组件对象
示例:
<div class="cmp-content ">
<div class="cmp-control-content cmp-active" style="height: 800px">
<div id="scroll" class=" cmp-scroll-wrapper" >
<div class="cmp-scroll">
<div class="cmp-content-padded">
<h5 class="cmp-content-padded">常规示例</h5>
<button id='demo1' data-options='{}' class="btn cmp-btn cmp-btn-block">选择日期时间 ...</button>
<h5 class="cmp-content-padded">设定年份区间</h5>
<button id='demo2' data-options='{"type":"date","beginYear":2014,"endYear":2016}' class="btn cmp-btn cmp-btn-block">选择日期 ...</button>
<h5 class="cmp-content-padded">设定选中的时间</h5>
<button id='demo3' data-options='{"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020}' class="btn cmp-btn cmp-btn-block">选择日期时间 ...</button>
<h5 class="cmp-content-padded">指定类型</h5>
<button id='demo4' data-options='{"type":"date"}' class="btn cmp-btn cmp-btn-block">选择日期 ...</button>
<button id='demo5' data-options='{"type":"time"}' class="btn cmp-btn cmp-btn-block">选择时间 ...</button>
<button id='demo6' data-options='{"type":"month"}' class="btn cmp-btn cmp-btn-block">选择月份 ...</button>
<h5 class="cmp-content-padded">自定义数据</h5>
<button id='demo7' data-options='{"type":"hour","customData":{"h":[{"text":"上午","value":"上午"},{"text":"下午","value":"下午"},{"text":"晚上","value":"晚上"}]},"labels":["年", "月", "日", "时段", "分"]}' class="btn cmp-btn cmp-btn-block">选择时段 ...</button>
<h5 class="cmp-content-padded">选择时间段</h5>
<button id='demo8' data-options='{"type":"timeInterval"}' class="btn cmp-btn cmp-btn-block">选择时段区间 ...</button>
<h5 class="cmp-content-padded">自定义数据的时间段</h5>
<button id='demo9' data-options='{"type":"timeInterval","customData":{
"hTwo":[{"text":"01分","value":"01"},{"text":"02分","value":"02"}],
"iTwo":[{"text":"03分","value":"03"},{"text":"04分","value":"04"}]}}'
class="btn cmp-btn cmp-btn-block">自定义数据的时间段 ...</button>
<button id='demo11' data-options='{"type":"timeInterval","value":"15:38-16:38"}'
class="btn cmp-btn cmp-btn-block">有默认值的时间段 ...</button>
<H5>有默认时间的输入框</H5>
<input id="demo10" data-options='{"type":"date","value":"2016-11-20"}' class="btn" type="text" value="2016-11-20" />
<br>
<br>
<br>
<br>
<div id='result' class="ui-alert"></div>
</div>
</div>
</div>
</div>
</div>
<script>
cmp.ready(function(){
var result = cmp('#result')[0];
var btns = cmp('.btn');
btns.each(function(i, btn) {
btn.addEventListener('tap', function() {
var self=this;
var optionsJson = this.getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson);
var id = self.getAttribute('id');
/*
* 首次显示时实例化组件
* 示例为了简洁，将 options 放在了按钮的 dom 上
* 也可以直接通过代码声明 optinos 用于实例化 DtPicker
*/
var picker = new cmp.DtPicker(options);
picker.show(function(rs) { //显示日期对象
/*
* rs.value 拼合后的 value
* rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
* rs.m 月，用法同年
* rs.d 日，用法同年
* rs.h 时，用法同年
* rs.i 分（minutes 的第二个字母），用法同年
*/
result.innerText = '选择结果: ' + rs.value;
/*
* 返回 false 可以阻止选择框的关闭
* return false;
*/
/*
* 释放组件资源，释放后将将不能再操作组件
* 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
* 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实实。
*/
picker.dispose();//日期对象消失
if(id == "demo10"){
self.value=rs.value;
}
});
}, false);
});
});
</script>图例:
方法
DateCalender
DateCalender
(
-
container
-
options
)
!~YUIDOC_LINE~! //y:2011, //设置年!~YUIDOC_LINE~! //m:1, //设置月!~YUIDOC_LINE~! //d:1, //设置日!~YUIDOC_LINE~! //type:"mouth",!~YUIDOC_LINE~! //orderD:"2016-12-09","2016-12-13", //哪些天被预定!~YUIDOC_LINE~! //beginYear:2005, //开始年!~YUIDOC_LINE~! //endYear:2017, //结束年!~YUIDOC_LINE~!
参数:
| 名称 | 类型 | 标识 | 描述 | ||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
container
| String | 必选 | 存放日历组件的容器对应的id或者class | ||||||||||||||||||||||||||||||||||||||||
options
| Object | 必选 | 配置参数
|
返回值:
[!~YUIDOC_LINE~! //y:2011, //设置年!~YUIDOC_LINE~! //m:1, //设置月!~YUIDOC_LINE~! //d:1, //设置日!~YUIDOC_LINE~! //type:"mouth",!~YUIDOC_LINE~! //orderD:"2016-12-09","2016-12-13", //哪些天被预定!~YUIDOC_LINE~! //beginYear:2005, //开始年!~YUIDOC_LINE~! //endYear:2017, //结束年!~YUIDOC_LINE~!]
返回DateCalender对象，提供refresh,setOrderD方法，用于重置配置参数如：
date.refresh()
date.setOrderD(["2017-02-27","2017-03-13"]); //重置预定的日期
示例:
文件导入路径：
M3App端
<link rel="stylesheet" href="http://cmp/v/css/cmp.css"></link>
<link rel="stylesheet" href="http://cmp/v/css/cmp-picker.css"></link>
<link rel="stylesheet" href="http://cmp/v/css/cmp-dateCalender.css"></link>
<script src="http://cmp/v1.0.0/js/cordova/__CMPSHELL_PLATFORM__/cordova.js"></script>
<script src="http://cmp/v1.0.0/js/cordova/cordova-plugins.js"></script>
<script src="http://cmp/v/js/cmp.js"></script>
<script src="http://cmp/v/js/cmp-picker.js"></script>
<script src="http://cmp/v/js/cmp-dtPicker.js"></script>
<script src="http://cmp/v/js/cmp-dateCalender.js"></script>
===========================================================================================
微协同端：
<link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp.css"></link>
<link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp-picker.css"></link>
<link rel="stylesheet" href="/seeyon/m3/cmp/css/cmp-dateCalender.css"></link>
<script src="/seeyon/m3/cmp/js/cmp.js"></script>
<script src="/seeyon/m3/cmp/js/cmp-picker.js"></script>
<script src="/seeyon/m3/cmp/js/cmp-dtPicker.js"></script>
<script src="/seeyon/m3/cmp/js/cmp-dateCalender.js"></script>
=========================================================================================
调用组件
<script>
var date = cmp.DateCalender("#test",{
y:2011,
m:5,
d:23,
type:mouth,
orderD:["2016-12-22","2016-12-26"],
beginYear:2007,
endYear:2017,
uichangeToCallback:true,
callback:function(date){
//do something with date
}
});
</script>