<listing id="r7f1v"></listing>
<listing id="r7f1v"><var id="r7f1v"></var></listing><listing id="r7f1v"><cite id="r7f1v"><i id="r7f1v"></i></cite></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<thead id="r7f1v"><cite id="r7f1v"></cite></thead>
<listing id="r7f1v"></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<progress id="r7f1v"><var id="r7f1v"></var></progress>
<listing id="r7f1v"></listing>
APP開發平臺 > Blog > APICloud AVM框架封裝日期和時間選擇組件

因項目中很多表單要用到日期選擇和時間選擇的內容,所以基于picker使用APICloud AVM框架封裝了日期和時間選擇的組件。

 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 onsetDate="setDate" label=""  pickerId="datePicker"></datePicker>

</view>

<view class="item">

<text class="item-label">時間</text>

<timePicker onsetDate="setTime" 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>


高效的App定制平臺,標準化、便宜、快!

提交APP定制開發需求
欧美激情一区二区,国产精品区免费视频,欧美激情视频在线播放,久久久亚洲综合久久98,久久国产精品99精品国产