vant 时间选择器--开始时间和结束时间实例


Posted in Javascript onNovember 04, 2020

我就废话不多说了,大家还是直接看代码吧~

<template>
  <div class="linesMigrate">
    <div class="conditionDiv">
      <div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChooseStart">
        <div class="dateValueDiv" v-if="allDateStart">{{dateFormatterStart}}</div>
        <div class="dateValueDiv" v-if="!allDateStart" :style="{ fontSize:'0.72rem' }">{{dateFormatterStart}}</div>
      </div>
      <div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChoose">
        <div class="dateValueDiv" v-if="allDate">{{dateFormatter}}</div>
        <div class="dateValueDiv" v-if="!allDate" :style="{ fontSize:'0.72rem' }">{{dateFormatter}}</div>
      </div>
    </div>
    <!-- 选开始时间 -->
    <van-popup
        v-model="showDateChooseStart"
        position="bottom"
        :close-on-click-overlay="false"
        :style="{ height: '22rem',position: 'absolute',bottom:'3rem' }"
        :overlay-style="{ position: 'absolute', bottom: '3rem', top: 'auto', background: 'rgba(0, 0, 0, 0.298039215686275)' }">
      <div class="popupDate" :style="bgDateImgStyle">
      <img alt="..." src="../../assets/icon/downArrow.png" @click="closeDatePopStart" :style="{ marginBottom: '16%',width:'10%',marginTop:'7.7%',opacity:0 }" />
      <van-datetime-picker
          :show-toolbar="false"
          v-model="dateChooseStart"
          type="date"
          :min-date="minDateStart"
          :max-date="maxDateStart"
      />
        <div class="chooseTodayDiv" @click="chooseDateStart">选择最近一周</div>
      </div>
    </van-popup>
    <!-- 选结束时间 最近一天 -->
    <van-popup
        v-model="showDateChoose"
        position="bottom"
        :close-on-click-overlay="false"
        :style="{ height: '22rem',position: 'absolute',bottom:'3rem' }"
        :overlay-style="{ position: 'absolute', bottom: '3rem', top: 'auto', background: 'rgba(0, 0, 0, 0.298039215686275)' }">
      <div class="popupDate" :style="bgDateImgStyle">
      <img alt="..." src="../../assets/icon/downArrow.png" @click="closeDatePop" :style="{ marginBottom: '16%',width:'10%',marginTop:'7.7%',opacity:0 }" />
      <van-datetime-picker
          :show-toolbar="false"
          v-model="dateChoose"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
      />
        <div class="chooseTodayDiv" @click="chooseDateToday">选择最新一天</div>
      </div>
    </van-popup>
 

    <Loading :isShow="loadingState" />
  </div>
</template>
 

<script>
  import Loading from '../../components/common/loading.vue';// 引入公共的loading组件
  import Vue from 'vue';
  import { Popup } from 'vant';
  import { DatetimePicker } from 'vant';
  
  Vue.use(DatetimePicker);
  Vue.use(Popup);
 

  export default {
    name: 'lines',
    mounted() {
      // 获取数据
      this.loadingState=false;
      this.initRequest();
    },
    data() {
      return {
        // 时间选择背景样式数据
        conditonStyle2: {
          background: "url(" + require("../../assets/img/migrate2.png") + ") no-repeat center",
          backgroundSize: "contain"
        },
        // 日期组件弹出层展示与否的标志 --开始时间
        showDateChooseStart:false,
         // 日期组件弹出层展示与否的标志
        showDateChoose:false,
        
        // 弹出层背景图片
        bgDateImgStyle: {
          background: "url(" + require("../../assets/img/migratePopBackDate.png") + ") no-repeat",
          backgroundSize: "contain"
        },
        // 标准化未经处理的时间格式
        dateChoose: new Date(),
        dateChooseStart: new Date(),
        // 处理过格式的日期数据
        dateFormatter:"日期",
        allDate:true,
        dateFormatterStart:"日期",
        allDateStart:true,
 

        minDateStart: new Date(2019,8,1), // 开始时间最小2019/9/01
        maxDateStart: new Date(), // 开始时间最大 当前时间
        minDate: new Date(), //最小时间必须 》开始的最大时间maxDateStart 
        maxDate: new Date(), // 开始时间最大 当前时间
 

        // 控制加载中状态的标志
        loadingState:true
      };
    },
    methods: {
      // 初始的请求方法
      async initRequest(){
        this.chooseDateToday();
        this.chooseDateStart();
      },
      // 展示日期弹出层--开始时间
      showPopupDateChooseStart() {
        this.showDateChooseStart = true;
      },
      // 展示日期弹出层 --结束时间
      showPopupDateChoose() {
        // 设置结束时间的最小值
        this.minDate = this.dateChooseStart;
        this.showDateChoose = true;
      },
      
      // 关闭日期弹出层 ---开始时间
      closeDatePopStart(){
        this.showDateChooseStart = false;
        this.dateFormatterStart=this.dateTransfor(this.dateChooseStart,"yyyy-MM-dd");
 

        // 设置结束时间的最小值
        this.minDate = this.dateChooseStart;
 

        this.allDateStart=false;
        // this.loadingState=true;
      },
      // 关闭日期弹出层 --结束时间
      closeDatePop(){
        this.showDateChoose = false;
        this.dateFormatter=this.dateTransfor(this.dateChoose,"yyyy-MM-dd");
 

        // 设置开始时间的最大值
        this.maxDateStart = this.dateChoose;
 

        this.allDate=false;
        // this.loadingState=true;
      },
      
      // 日期格式转换函数
      dateTransfor(date,format){
        var o = {
          "M+" : date.getMonth()+1,         //月份
          "d+" : date.getDate(),          //日
          "h+" : date.getHours(),          //小时
          "m+" : date.getMinutes(),         //分
          "s+" : date.getSeconds(),         //秒
          "q+" : Math.floor((date.getMonth()+3)/3), //季度
          "S" : date.getMilliseconds()       //毫秒
        };
        if(/(y+)/.test(format)) {
          format=format.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(let k in o) {
          if(new RegExp("("+ k +")").test(format)){
            format = format.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
          }
        }
        return format;
      },
      // 选择时间函数 -- 七天前
      chooseDateStart(){
        let yesToday=new Date();
        yesToday.setDate(yesToday.getDate()-7);
        this.dateChooseStart=yesToday;
        this.dateFormatterStart=this.dateTransfor(this.dateChooseStart,"yyyy-MM-dd");
      },
      // 选择时间函数 -- 今日
      chooseDateToday(){
        this.dateChoose= new Date();
        this.dateFormatter=this.dateTransfor(this.dateChoose,"yyyy-MM-dd");
      },
      // 选择时间函数 i=0今日
      chooseDate(i){
        let yesToday=new Date();
        yesToday.setDate(yesToday.getDate()-i);
        return this.dateTransfor(yesToday,"yyyy-MM-dd");
      },
 

    },
    components: {
      Loading
    }
  };
</script>
<style scoped>
  /*覆盖原有弹出层样式*/
  .van-popup {
    position: absolute;
    background: transparent;
    /*bottom: 3.01rem;*/
  }
  /*覆盖日期组件原有样式*/
  .van-picker{
    position: relative;
    background-color: #fff;
    user-select: none;
    width: 100%;
  }
 
  /*筛选条件们的div样式*/
  .conditionDiv{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 3.7%;
    margin-top: 4%;
  }
  /*单个筛选条件的样式*/
  .singleCondition{
    width: 27%;
    margin-left: 2%;
    margin-right: 2%;
    /*border: 1px solid #451da4;*/
    height: 100%;
    /*padding-right: 5%;*/
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    /*flex-direction: column;*/
    font-size: 0.72rem;
  }
  /*日期组件的div,由于其背景用icon而非整个背景图,因此样式上不同*/
  .singleDateDiv{
    width: 23%;
    margin-left: 2%;
    margin-right: 2%;
    /*border: 1px solid #451da4;*/
    height: 100%;
    color: #fff;
    padding-right: 5%;
    display: flex;
    justify-content: flex-start;
  }
  /*日期的值位置样式*/
  .dateValueDiv{
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 0.72rem;
    width: 82%;
  }
  /*日期弹出层中选择今天div样式*/
  .chooseTodayDiv{
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    color: red;
    height: 3rem;
    width: 90%;
    background: #fff;
    border-top: 1px solid lightgrey;
    font-size: 0.875rem;
  }
  
  /*日期弹窗*/
  .popupDate {
    border-radius: 2px;
    background: #fff;
    height: 100%;
    width: 90%;
    margin: 0 auto;
  }
 

</style>
<style>
  /*覆盖原有的选择器样式*/
  .van-picker-column{
    font-size: 0.9rem;
  }
</style>

补充知识:Vant库的使用,及日期组件的一些注意点

Vant库对于开发商城类项目,真的是非常nice,会让你情不自禁爱上它。Vant库支持按需加载、为移动端商城设计的风格,非常完美。但是,本人在实际开发中,也遇到了一些小问题,折腾了老半天,最终得以解决。

下面先说说在vue中使用Vant库的流程及一些注意事项,以及遇到的坑和解决办法。

首先送上官网传送门:www.youzanyun.com/zanui/vant#…,具体的api可自行查阅使用。

第一步,安装:

cnpm i vant -S

第二步,引入组件:

关于怎么引入Vant组件,有全局引入(非常不推荐)和按需引入两种方式

这里演示按需引入的方式,因为官网说的稍微有些复杂,对于一些刚接触的小伙伴,可能会造成一些误解(PS:我在刚开始接触的时候这里就蹲了两个坑,简直欲哭无泪呀~)。直接说怎么用吧:

为了方便我们按需引入组件,这里还需要安装一个插件

cnpm i babel-plugin-import -D

安装好该插件好,还需要在.babelrc文件中plugins那里进行一个简单的配置,这里附上完整的plugins部分内容。这里我们在plugins数组中插入了import那个数组,其他内容是原来就有的。

"plugins": [  
  "transform-vue-jsx",   
  "transform-runtime",  
  ["import", {   
    "libraryName": "vant",   
    "libraryDirectory": "es",   
    "style": true  
  }]
]

完成好配置后,在main.js中按需引入你需要的组件。例如这里引入Vant的button组件:

import { Button } from 'vant'; // 在mian.js中通过import导入组件,多个组件直接在{,,,}加入即可
Vue.use(Button); //让vue加载该组件如果还需要用其他组件,可以这样写Vue.use(Button).use().user();
<van-button type="default">默认按钮</van-button> // 在template中使用组件

这里提一点,如果是类似Toast这种组件,只需要在main.js中引入就好:

import { Toast } from 'vant';
 
// 然后在你需要的页面直接这样使用就好
// 只要引入后,vant就会自动把Toast组件挂在vue的原型上Vue.prototype.$Toast = Toast;
this.$Toast('message');

可以看到,这里button组件以及正常导入使用了。Vant中还有更多适合实际开发的功能更丰富的组件,小伙伴们自行查阅官方文档使用吧。

附官网API文档传送门:www.youzanyun.com/zanui/vant#…

最后,在说一个关于Vant日期组件使用时所遇到的一个大坑。

Vant日期组件的官网api没有给出关于事件函数的使用demo,到时小编在使用时不小心迈进了一个大坑。

就是change或者confirm事件时,怎么都获取不到回调参数,即在点击确定时回去不到返回的选中时间,总是提示undefined或者null。下面是小编错误的写法,大家不要踩坑:

<!--这是html部门-->
<van-datetime-picker   
  v-model="currentDate"   
  type="datetime"   
  @confirm="confirm()"   
  @change="change()" />
 
// 这是对应的方法
methods: {
  confirm(val) {
    console.log(val)
  },
  change(e) {
    console.log(e.getValues())
  }
}

乍一看,是按照文档上说的方式使用的呀,可是不仅confirm没有返回选中的日期时间,change事件的各种回调方式也使用不了。

但是吧,如果你要打印1,又可以打印出来,说明接口走这个方法了。

到底怎么回事呢,选中的时间怎么就出不来呢?小编差点都要怀疑是不是这个Vant组件有问题了!

说重点:后来小编终于找到了解决办法:

原来是这里出了问题,@confirm="confirm()" @change="change()"

这里多加了一对括号,正确的写法是

<!--这是html部分-->
<van-datetime-picker   
  v-model="currentDate"   
  type="datetime"   
  @confirm="confirm"   
  @change="change" 
/>
 
// 这是对应的方法
methods: {
  confirm(val) {
    console.log(val) // 打印出了时间
  },
  change(e) {
    console.log(e.getValues()) // 打印出了选中的时间,是个数组
  }
}

到这,问题圆满解决了!

以上这篇vant 时间选择器--开始时间和结束时间实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
javascript常用的方法整理
Aug 20 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 Javascript
Vue绑定用户接口实现代码示例
Nov 04 #Javascript
vant picker+popup 自定义三级联动案例
Nov 04 #Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 #Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 #Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 #Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 #Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 #Javascript
You might like
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
js select常用操作控制代码
2010/03/16 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
详解JavaScript树结构
2017/01/09 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
Python中字典的基本知识初步介绍
2015/05/21 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
python中退出多层循环的方法
2018/11/27 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
历史专业毕业生的自我鉴定
2013/11/15 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
幼儿教师培训感言
2014/03/08 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
2014年班组长工作总结
2014/11/20 职场文书
遗失证明范文
2015/06/19 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python