当前位置：网站首页>APICloud AVM wraps date and time selection components

APICloud AVM wraps date and time selection components

2022-08-08 16:35:00 【InfoQ】

Because there are many in the project

表单

To use the content of date selection and time selection,所以基于

picker

Component that encapsulates date and time selection.

 datePicker

The year within the component is an example of the year made100year within the year,It can be expanded or reduced as needed,月份是12fixed monthly,每月的天数,Get based on the selected year and month.The current date is set by default.

<template>
 <picker class=&quot;picker&quot; id={pickerId} mode=&quot;multiSelector&quot; range-key=&quot;name&quot; value={dateMltiSelectorValue} onchange={this.dateMultiSelectorChange} oncolumnchange={this.dateMultiSelectorColumnChange}> 
 <text class=&quot;picker-label&quot;>{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=[];//When a page is used multiple times must be cleared first 否则会出现各种问题
 for(i=0;i<100;i++){
 this.data.year.push(this.yearNow-i);
 }
 },
 initDateData(){
 //Get the number of days in the current month based on the current year and month
 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

时、分、Seconds are fixed,The component starts with the default current time.

<template>
 <picker class=&quot;picker&quot; id={pickerId} mode=&quot;multiSelector&quot; range-key=&quot;name&quot; value={timeMltiSelectorValue} onchange={this.timeMultiSelectorChange}> 
 <text class=&quot;picker-label&quot;>{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(){
 //Initialize to set the current time
 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>

组件使用 

 如果一个页面中,The same component is used multiple times,Be sure to pay attention to the componentsID进行区分.每个组件的IDPass the component through the current page.组件中通过

props

进行接收.

<template>
 <scroll-view class=&quot;page&quot;>
 <safe-area></safe-area>
 <view class=&quot;item&quot;>
 <text class=&quot;item-label&quot;>Agenda theme</text>
 <input class=&quot;item-input&quot; placeholder=&quot;输入Agenda theme&quot; v-model=&quot;title&quot;/>
 </view>
 <view class=&quot;item&quot;>
 <text class=&quot;item-label&quot;>Brief schedule</text>
 <textarea class=&quot;item-area&quot; placeholder=&quot;Enter a brief description of the agenda&quot; v-model=&quot;content&quot;/> 
 </view>
 <view class=&quot;item&quot;>
 <text class=&quot;item-label&quot;>日期</text>
 <datePicker onsetDate=&quot;setDate&quot; label=&quot;&quot; pickerId=&quot;datePicker&quot;></datePicker>
 </view>
 <view class=&quot;item&quot;>
 <text class=&quot;item-label&quot;>时间</text>
 <timePicker onsetDate=&quot;setTime&quot; label=&quot;&quot; pickerId=&quot;timePicker&quot;></timePicker>
 </view>
 <view class=&quot;item&quot;>
 <text class=&quot;item-label&quot;>人员</text>
 <input class=&quot;item-input&quot; placeholder=&quot;请选择人员&quot; v-model=&quot;title&quot;/>
 </view>
 <view class=&quot;bt-box&quot;>
 <button class=&quot;bt&quot; 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>