APICloud AVM 封装日期和时间选择组件
Posted API_Cloud
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了APICloud AVM 封装日期和时间选择组件相关的知识，希望对你有一定的参考价值。
因项目中很多表单要用到日期选择和时间选择的内容，所以基于picker封装了日期和时间选择的组件。
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>
效果图
以上是关于APICloud AVM 封装日期和时间选择组件的主要内容，如果未能解决你的问题，请参考以下文章
APICloud AVM框架列表组件list-view的使用flex布局教程
使用APICloud AVM多端组件快速实现app中的搜索功能