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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
JS 文件传参及处理技巧分析
May 13 Javascript
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 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
ftp类(example.php)
2006/10/09 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
jQuery中$.click()无效问题分析
2015/01/29 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python实现k-means算法
2018/02/23 Python
Python实现的质因式分解算法示例
2018/05/03 Python
django-allauth入门学习和使用详解
2019/07/03 Python
pip安装python库的方法总结
2019/08/02 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
小学生红领巾广播稿
2014/01/21 职场文书
教师档案管理制度
2014/01/23 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
商铺租房协议书范本
2014/12/04 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
写给医院的感谢信
2015/01/22 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
Go语言怎么使用变长参数函数
2022/07/15 Golang