微信小程序日期选择组件之DateTimePicker

github项目地址: https://github.com/fancaixia/DateTimePicker

DateTimePicker 微信小程序日期选择 [年，月，日，时，分]

001.PNG

只显示[年，月，日]

002.png

代码示例

components / DateTimePicker
index.wxml

  
    {{title}}

    
  
  
    
         
            取消
            确定
            
          
            
            
              
                {{item}}
              
              
              
                {{item}}
              
              
              
                {{item}}
              
              
              
                {{item}}
              
              
              
                {{item}}
              
            
          
     
  

index.wxss

.modelboxbg{
  position:absolute;
  top:0;
  z-index:10000;
  width:100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
}
.modelbox{
  position:absolute;
  bottom:0;
  z-index:999999;
  width:100%;
  background: #fff;
}
picker-view-column{
  text-align: center;
}
view.model_picker{
  position: relative;
}
.button_model{
  height: 80rpx;
  width: 100%;
  background: #fff;
  position: relative;
  border-bottom: 1px solid #d9d9d9;
}
.button_model text{
    color: #007aff;
    position: absolute;
    background:transparent;
    border: none;
    line-height: 80rpx;
}
.button_model text:first-child{
  left: 32rpx;
}
.button_model text:last-child{
  right: 32rpx;
}

index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    timevalue: {
      type: Array,
      value: "标题"
    },
    years: {
      type: Array,
      value: "年"
    },
    months: {
      type: Array,
      value: "月"
    },
    days: {
      type: Array,
      value: "日"
    },
    hours: {
      type: Array,
      value: "小时"
    },
    minutes: {
      type: Array,
      value: "分钟"
    }
},
  /* 组件的初始数据*/
  data: {
  },
  /** 组件的方法列表 **/
  methods: {
    //取消
    canslebtn(){
      this.triggerEvent("canslebtn");
    },
    //确认
    closebtn() {
      this.triggerEvent("closebtn");
    },
 // 调用父组件  事件
    fnbindChange(e){
      this.triggerEvent("bindChangeEvent",e.detail);
    }
  }
})