日期选择控件及其使用示例及其使用,效果如果:
使用步骤:
- 将 UIDatePicker 文件夹拷贝到项目中
- 在脚本中创建一个 Prefab,值设为 UIDatePicker
- 需要显示时,创建节点,设置日期和回调
cc.Class({
extends: cc.Component,
properties: {
label: {
default: null,
type: cc.Label
},
pfbDatePicker: cc.Prefab,
},
onLoad: function () {
let date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth();
this.day = date.getDate();
this.updateDate();
},
onClickDate: function() {
// 创建添加 UIDatePicker 节点
let node = cc.instantiate(this.pfbDatePicker);
node.parent = this.node;
let datePicker = node.getComponent("UIDatePicker");
// 设置初始显示的日期
datePicker.setDate(this.year, this.month, this.day);
// 设置确定选中日期之后的回调
datePicker.setPickDateCallback((year, month, day)=>{
this.year = year;
this.month = month;
this.day = day;
this.updateDate();
});
},
updateDate () {
this.label.string = cc.js.formatStr("%s-%s-%s", this.year, this.month + 1, this.day);
}
});