当前位置:网站首页>APICloud AVM 封装日期和时间选择组件
APICloud AVM 封装日期和时间选择组件
2022-08-08 16:29:00 【InfoQ】

datePicker
<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>
组件使用
<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>
效果图


边栏推荐
- ggplot2可视化水平箱图并使用fct_reorder排序数据、使用na.rm处理缺失值(reorder boxplot with fct_reorder)、按照箱图的中位数从大到小排序水平箱图
- The situation of the solution of the equation system and the correlation transformation of the vector group
- 带你玩转“超大杯”ECS特性及实验踩坑【华为云至简致远】
- bzoj1507 [NOI2003]Editor
- C语言学习概览(五)
- leetcode 155. Min Stack最小栈(中等)
- 通过jenkins交付微服务到kubernetes
- spark集群环境搭建
- [Unity Starter Plan] Making RubyAdventure02 - Handling Tile Maps & Collision
- 9. cuBLAS Development Guide Chinese Version--Configuration of Atomic Mode in cuBLAS
猜你喜欢
Nuxt - 网站接入 51LA 网站统计(详细教程)
Redis哨兵的配置和原理
基于ECS实现一分钟自动化部署【华为云至简致远】
Jingdong T9 pure hand type 688 pages of god notes, SSM framework integrates Redis to build efficient Internet applications
ESP8266-Arduino编程实例-ADS1015(ADC)驱动
耐心排序——专门快速解决最长递增子数组
redis的详细介绍与操作命令
元宇宙医疗或将改变医疗格局
全网首发!消息中间件神仙笔记,涵盖阿里十年技术精髓
Patience sorting - specializing in quickly solving the longest increasing subarray
随机推荐
急了,Mysql索引中最不容易记的三个知识点通透了
IDEA2020安装教程
通过jenkins交付微服务到kubernetes
C语言学习概览(五)
正则什么的,你让我写,我会难受,你让我用,真香!
EMQ畅谈IoT数据基础软件开源版图,引领本土开源走向全球
调研阶段复盘
[Unity Starter Plan] Making RubyAdventure02 - Handling Tile Maps & Collision
OpenAI怎么写作「谷歌小发猫写作」
synchronized加载static关键字前和普通方法前的区别?
promise学习笔记
firewall高级配置
4、S32K14X学习笔记:S32 Design Studio 新建和导入工程
开源项目管理解决方案Leantime
浅学软件逆向笔记(2)
Redis design and implementation notes (1)
Spam accounts are a lot of trouble, and device fingerprints are quickly found
9.cuBLAS开发指南中文版--cuBLAS中的原子模式的配置
使用 PyGame 的冒泡排序可视化工具
Nuxt - 网站接入 51LA 网站统计(详细教程)