当前位置：网站首页>APICloud AVM 封装日期和时间选择组件

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

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

因项目中很多

表单

要用到日期选择和时间选择的内容，所以基于

picker

封装了日期和时间选择的组件。

 datePicker

组件内的年份是取得举例今年100年以内的年份，可根据时间需要进行扩容或缩减，月份是12个月固定的，每月的天数，根据所选年份和月份进行获取。默认设置当前日期。

<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=[];//一个页面多次使用的情况 必须先清空 否则会出现各种问题
 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=&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(){
 //初始化设定当前时间
 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=&quot;page&quot;>
 <safe-area></safe-area>
 <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;item&quot;>
 <text class=&quot;item-label&quot;>日程简要</text>
 <textarea class=&quot;item-area&quot; placeholder=&quot;输入日程简要内容&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>