AVM 封装日期和时间选择组件

因项目中很多表单要用到日期选择和时间选择的内容，所以基于picker封装了日期和时间选择的组件。[attach]127450[/attach]

datePicker组件内的年份是取得举例今年100年以内的年份，可根据时间需要进行扩容或缩减，月份是12个月固定的，每月的天数，根据所选年份和月份进行获取。默认设置当前日期。
<template>
    <picker class="picker" id={pickerId} mode="multiSelector" range-key="name" value={dateMltiSelectorValue} onchange={this.dateMultiSelectorChange} oncolumnchange={this.dateMultiSelectorColumnChange}>                       
                <text class="picker-label">{dateDesc}</text>
        </picker>
</template>
<script>
        export default {
                name: 'datePicker',
                props:{
                        label:String,
                        pickerId:String
                },
                installed(){
                        this.getYears();       
                        this.initDateData();
                },
                data() {
                        return{
                                year:[],
                                month:[1,2,3,4,5,6,7,8,9,10,11,12],
                                day:[],
                                yearNow:new Date().getFullYear(),
                                dateMltiSelectorValue:[0,0,0],
                                selectYear:new Date().getFullYear(),
                                selectMoth:1,
                                selectDay:1,
                                dateList:[],
                                dateDesc:''

                        }
                },
                methods: {
                        getYears(){
                                this.data.year=[];//一个页面多次使用的情况 必须先清空 否则会出现各种问题
                                for(i=0;i<100;i++){
                                        this.data.year.push(this.yearNow-i);
                                }
                        },
                        initDateData(){
                                //根据当前年月获取当月天数
                                this.data.day=[];
                                var days = new Date(new Date().getFullYear(), new Date().getMonth()+1, 0).getDate();
                                console.log(days);
                                for(i=1;i<=days;i++){
                                        this.data.day.push(i);
                                }
                                this.data.dateMltiSelectorValue=[0,new Date().getMonth(),new Date().getDate()-1];
                                this.data.dateList = [this.data.year,this.data.month,this.data.day];
                                var picker = document.getElementById(this.props.pickerId);                       
                                picker.setData({
                                        data: this.data.dateList
                                });
                        },
                        //根据年月获取天数
                        setDays(){
                                this.data.day=[];
                                var days = new Date(this.data.selectYear, this.data.selectMoth, 0).getDate();
                                for(i=1;i<=days;i++){
                                        this.data.day.push(i);
                                }
                                this.data.dateList = [this.data.year,this.data.month,this.data.day];
                                var picker = document.getElementById(this.props.pickerId);
                                picker.setData({
                                        data: this.data.dateList
                                });
                        },
                        dateMultiSelectorChange(e){
                                this.data.dateMltiSelectorValue=[e.detail.value[0],e.detail.value[1],e.detail.value[2]];                       
                                var year = this.data.year[e.detail.value[0]];
                                // var month = this.data.selectMoth>9?this.data.selectMoth:'0'+this.data.selectMoth;
                                var month = this.data.month[e.detail.value[1]]>9?this.data.month[e.detail.value[1]]:'0'+this.data.month[e.detail.value[1]];
                                var day = this.data.day[e.detail.value[2]]>9?this.data.day[e.detail.value[2]]:'0'+this.data.day[e.detail.value[2]];
                                this.data.dateDesc = year+'-'+month+'-'+day;
                                this.fire('setDate', this.data.dateDesc);
                        },
                        dateMultiSelectorColumnChange(e){
                                var column = e.detail.column;
                                if (column == this.data.dateList.length-1) {
                    return;
                }
                                if(column==0){
                                        this.data.selectYear = this.data.year[e.detail.value];
                                        this.data.dateMltiSelectorValue[0]=e.detail.value;
                                        this.setDays();               
                                }
                                else if(column==1){
                                        this.data.selectMoth = this.data.month[e.detail.value];
                                        this.data.dateMltiSelectorValue[1]=e.detail.value;
                                        this.setDays();                       
                                }
                        }
                }
        }
</script>
<style>
    .picker {
        background-color: #ffffff;
    }
        .picker-label{
                font-size: 18px;
        }
</style>
timePicker时、分、秒都是固定的，组件初始是默认的当前时间。
<template>
     <picker class="picker" id={pickerId} mode="multiSelector" range-key="name" value={timeMltiSelectorValue} onchange={this.timeMultiSelectorChange}>                       
                <text class="picker-label">{timeDesc}</text>
        </picker>
</template>
<script>
        export default {
                name: 'timePicker',
                props:{
                        label:String,
                        pickerId:String
                },
                installed(){
                        this.setHours();
                        this.setMinutes();       
                        this.initDateData();
                },
                data() {
                        return{
                                hour:[],
                                minute:[],
                                second:[],
                                timeList:[],
                                timeMltiSelectorValue:[0,0,0],
                                timeDesc:''
                        }
                },
                methods: {
                        setHours(){
                                for (let index = 0; index < 24; index++) {
                                        this.data.hour.push(index>9?index:'0'+index);                               
                                }
                        },
                        setMinutes(){
                                for (let index = 0; index < 60; index++) {
                                        this.data.minute.push(index>9?index:'0'+index);
                                        this.data.second.push(index>9?index:'0'+index);                               
                                }                               
                        },
                        initDateData(){
                                //初始化设定当前时间
                                this.data.timeMltiSelectorValue=[new Date().getHours(),new Date().getMinutes(),new Date().getSeconds()];
                                this.data.timeList=[this.data.hour,this.data.minute,this.data.second];
                                var picker = document.getElementById(this.props.pickerId);
                                picker.setData({
                                        data: this.data.timeList
                                });
                        },
                        timeMultiSelectorChange(e){
                                this.data.timeMltiSelectorValue=[e.detail.value[0],e.detail.value[1],e.detail.value[2]];               
                                var hour = this.data.hour[e.detail.value[0]];
                                var minute = this.data.minute[e.detail.value[1]];
                                var second = this.data.second[e.detail.value[2]];
                                this.data.timeDesc = hour+':'+minute+':'+second;
                                this.fire('setDate', this.data.timeDesc);
                        },
                }
        }
</script>
<style>
    .picker {
        background-color: #ffffff;
    }
        .picker-label{
                font-size: 18px;
        }
</style>


组件使用 如果一个页面中，同一组件多次使用，一定要注意要把组件ID进行区分。每个组件的ID通过当前页面传入组件。组件中通过props进行接收。
<template>
    <scroll-view class="page">
                <safe-area></safe-area>
                <view class="item">
                        <text class="item-label">日程主题</text>
                        <input class="item-input" placeholder="输入日程主题" v-model="title"/>
                </view>
                <view class="item">
                        <text class="item-label">日程简要</text>
                        <textarea  class="item-area" placeholder="输入日程简要内容" v-model="content"/>       
                </view>
                <view class="item">
                        <text class="item-label">日期</text>
                        <datePicker label=""  pickerId="datePicker"></datePicker>
                </view>
                <view class="item">
                        <text class="item-label">时间</text>
                        <timePicker label="" pickerId="timePicker"></timePicker>
                </view>
                <view class="item">
                        <text class="item-label">人员</text>
                        <input class="item-input" placeholder="请选择人员" v-model="title"/>
                </view>
                <view class="bt-box">
                        <button class="bt" onclick={this.btnAction}>保存</button>
                </view>
    </scroll-view>
</template>
<script>
        import '../../components/datePicker.stml'
        import '../../components/timePicker.stml'
        export default {
                name: 'adddaily',
                apiready(){

                },
                data() {
                        return{
                                date:'',
                                time:'',
                                title:'',
                                content:'',
                                users:''
                        }
                },
                methods: {
                        setDate(e){
                                this.data.date = e.detail;
                        },
                        setTime(e){
                                this.data.time = e.detail;
                        }
                }
        }
</script>
<style>
    .page {
        height: 100%;
                background-color: #ffffff;
    }
        .item{
                margin: 10px;
                border-bottom: 1px solid #ccc;
        }
        .item-label{
                font-size: 13px;
                color: #666666;
        }
        .item-input{
                width: auto;
                border: 0;
        }
        .item-area{
                border: 0;
                height: 50px;
                width: auto;
        }
        .bt-box{
                margin: 10px;
        }
        .bt{
                color: #ffffff;
                font-size: 18px;
                background-color: #035dff;
                border-radius: 10px;
        }
</style>

效果图
[attach]127451[/attach][attach]127452[/attach]
[attach]127453[/attach]