简装picker-view选择年月日

前言：菜狗出没

菜狗呀.png

今回来点啥呢，上菜

  <!-- 选择时间 -->
  <dialog-picker onChangeTime="onChangeTime"></dialog-picker>

制作过程
自己创建按一个爱谁谁的组件
首先是.acss文件

.dialog-datePicker{
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 999;
}
.dialog-container{
   width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.dialog-container .dialog-layer{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6)
}
.dialog-container .dialog-closed-layer{
  position: absolute;
  width: 100%;
  height: 100%;
}
.dialog-container .dialog-wrap{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
}

.dialog-container .dialog-closed{
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  right:30rpx;
  top: 28rpx; 
}
.dialog-container .opa0{
  opacity: 0;
}

.dialogcloseView{
  width: 100%;
  height: 60rpx;
  text-align: right;
  right: 0px;
  top: -40px;
}
.pickerclass{
  width: 100%;
  height: 700rpx;
  background: #fff;
}
.pickerbtn{
  top: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background: #0a393e;
  color: #ebc98b;
  display: flex;
}
.my-picker{
  margin-top: 140rpx;
}
.canBtn{
  width: 100rpx;
  height: 100rpx;
  margin-left: 30rpx;
  line-height: 100rpx;
}
.sureBtn{
  width: 100rpx;
  height: 100rpx;
  margin-left: 466rpx;
  line-height: 100rpx;
}

接着你就来一个axml文件

<view class="dialog-datePicker" animation="{{dialogAnimation}}" a:if="{{show==true}}">
    <view class="dialog-container">
        <view class="dialog-layer"></view>

        <!-- 背景 -->
        <view class="dialog-wrap">
            <view class="pickerclass res  {{animateData}}">
                <picker-view value="{{value}}" onChange="onChange" class="my-picker">
                    <picker-view-column>
                        <view a:for="{{picker.yearArr}}" key="y{{item}}">{{item}}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view a:for="{{picker.mounthArr}}" key="m{{item}}">{{item}}</view>
                    </picker-view-column>
                     <picker-view-column>
                        <view a:for="{{picker.dayArr}}" key="{{item}}">{{item}}</view>
                    </picker-view-column>
                </picker-view>
                <view class="pickerbtn abs">
                  <view class="canBtn" onTap="closedDialog">
                  取消
                </view>
                 <view class="sureBtn" onTap="sureBtnClick">
                  确认
                </view>
                </view>
                <view class="dialogcloseView abs">
                    <image mode="widthFix" class="dialogcloseBtn" onTap="closedDialog" src="{{closedic.closebtn}}"/>
                </view>
            </view>
        </view>
    </view>
</view>

嗯，准备下菜起锅

const app = getApp();
const {mds,gdc,Utils} = app;
//上面的你们是不需要的

const commonFunction = {
   //创建动画
    createAnimation(){
        this.dialogAnimation = my.createAnimation({
            duration: 400,
            timeFunction: 'ease-in-out',
        });
    },
    //打开弹窗
    openDialog(callback){
      let { dialogAnimation }=this;
      this.setData({
        show: true
      },()=>{
         this.setData({
            dialogAnimation:dialogAnimation.opacity(1).step({duration:400}).export(),
            animateData:"animated fadeInUp "
         })
         callback&&callback();
         //打开弹窗后续调用

      })
    },

    //关闭弹窗
    closedDialog(){
      let { dialogAnimation }=this;

      this.setData({
        dialogAnimation:dialogAnimation.opacity(0).step({duration:400}).export()
      })

      setTimeout(()=>{
        this.setData({
          show:false
        })
      },400)
    }
}

//开发者自定义方法
const diyFunction = {
  //组件初始化
  componentInit(){
    let birth={};
       let time=Utils.getcurrent();//获取当前时间请自己百度
     let dateArr = time.split('-');
      this.setData({time:time});
     let valueArr=[];
     let yearArr=[];
        for(let i=1930;i<=dateArr[0];i++){
          yearArr.push(i)
        }
        valueArr.push(yearArr.length-1);
        let mounthArr=[];
        for(let j=1;j<13;j++){
          mounthArr.push(j);
          if(dateArr[1]==j){
            valueArr.push(j-1);
          }
        }
        let dayArr=[];
          for(let k=1;k<31;k++){
          dayArr.push(k);
        }
       valueArr.push(dateArr.pop()-1);
        this.setData({value:valueArr});
        birth.yearArr=yearArr;
        birth.mounthArr=mounthArr;
        birth.dayArr=dayArr;
        this.setData({picker:birth});
},
//值改变
onChange(e){
  let value=e.detail.value;
    let mouth=this.data.picker.mounthArr[value[1]];
       switch (mouth){
         case 1:case 3:case 5 :case 7 :case 8 :case 10 :case 12:
          let dayArr=[];
          for(let k=1;k<=31;k++){
          dayArr.push(k);
           }

        // value[2]=0;
        this.setData({value:value});
        this.setData({'picker.dayArr':dayArr})
        break;
        case 4 :case 6 :case 9: case 11:
           let dayArr1=[];
          for(let k=1;k<=30;k++){
          dayArr1.push(k);
           }
          if(value[2]>30){
            value[2]=0;
          }
        this.setData({value:value});
        this.setData({'picker.dayArr':dayArr1})
        break;
        case 2:
             let count = 28;
              let birth_year=this.data.time[0];
             if((birth_year%4==0 && birth_year%100!=0) || (birth_year%400==0)){
               count=29
             }
              let dayArr3=[];
              for(let k=1;k<=count;k++){
              dayArr3.push(k);
              }
              if(value[2]>count){
                value[2]=0
              }
        
        this.setData({value:value});
        this.setData({'picker.dayArr':dayArr3})
        break;

        default:
       }
},
// //设置值
// getData(time){

// },
  //
  sureBtnClick(){
    let time=[];
    //  my.alert({content:this.data.value})
    let y=this.data.picker.yearArr[this.data.value[0]];
    let m = this.data.picker.mounthArr[this.data.value[1]];
    let d = this.data.picker.dayArr[this.data.value.pop()];
    // my.alert({content:y+m+d})
    time.push(y);
     time.push(m);
      time.push(d)
      this.props.onChangeTime(time);
      this.closedDialog();
  }
}

Component({
  mixins: [],
  data: {
    dialogAnimation:"",//弹窗动画
    show:false,//是否显示
    value:"",
    oldValue:0,
    time:[],
     animateData:"opa0"
  },
  props: {},
  didMount() {
    //创建动画
    this.createAnimation();

    //初始化数据
    this.componentInit();

    //把组件挂到page页面上
    this.$page.pikerDialog = this;

  },
  didUpdate() {},
  didUnmount() {},
  methods: {
    ...commonFunction,
    ...diyFunction,
  },
});

到此！！！