精华内容
下载资源
问答
  • vue-awesome-picker 做时间控件的时候 好像只有点确定 才可以返回值 滑动时间的时候好像没有事件可以调用于是把他的源码直接拿过来用一下 成组件形式 <template> <div class="ed_...

     

    vue-awesome-picker 做时间控件的时候 好像只有点确定 才可以返回值  滑动时间的时候好像没有事件可以调用于是把他的源码直接拿过来用一下

    做成组件形式

    <template>
        <div class="ed_body">
              <div class="ed_top">
                  <strong>选择时间</strong>
                  <span class="sp_1" @click="cancel">取消</span>
                  <span class="sp_2" @click="accomplish">完成</span>
                  <i class="g_hx"></i>
              </div>
    
              <div :class="selectDate?'ed_date ed_date2':'ed_date'">{{selectDate || '选择月份'}} <i class="iconfont icon-shanchu" @click="deleteDate"></i></div>
               
               
               
               <!-- 时期插件 开始时间  -->
              <awesome-date ref="picker" :anchor="picker0.anchor" :data="picker0.data" :colorCancel="colorCancel" :colorConfirm="colorConfirm" @scrollUpdateData="scrollUpdateData" @confirm="handlePicker0Confirm"></awesome-date>
      
     
        </div>
    </template>
    
    <script>
        import awesomeDate from "../../components/awesome-date/awesome-date";
        export default {
            name: "earningsDate",
            data(){
              return {
                isPickerYear:false,  //是否显示年份的picker
                picker0:{
                  anchor:[],
                  data:[]
                  //data:[]
                },
                colorConfirm:"#007AFF",  //picker控件 确认的颜色
                colorCancel:"#0D0C0C",  //picker控件 取消的颜色
                lineWidth:15,  //下面那个导航条有多少宽  单位px
                swipeThreshold:6, //导向切换 有几个就可以滑动
    
                selectDate:"",  //选择的时间
                currentMonth:0, //当前月份
                oldIndex:-1,  //第一竖之前的索引 用来记录上一次的索引 
              }
            },
          components:{
              "awesome-date":awesomeDate
          },
            mounted() { 
              this.initData();
              this.openPicker();
            },
          methods:{ 
          	initData(){
          	  let y = []; //年
          	  let d = [];  //月
              let currentMonth = new Date().getMonth() - 0 +1;
              this.currentMonth = currentMonth;
          	  let date = new Date().getFullYear();
          	  for(let i = 0; i < 10; i++){
          	     y.push(date+"年");
          	     date --;
              }
          	  for(let i = currentMonth; i > 0; i--){
          	     d.push(i+"月");
              }
              this.picker0.data.push(y);
              this.picker0.data.push(d);
          	},
            //选择年份
            handlePicker0Confirm(v){
    
            },
            openPicker(){
              this.$refs.picker.show();
            },
            //滚动选择后的回调
            scrollUpdateData(v){
              let y = v[0].value.toString().replace("年","-");
              let m = v[1].value.toString().replace("月","");
              if(m < 10){
                 m = "0"+m;
              }
          	  this.selectDate = y + m  ;
          	  let firstIndex = v[0].index; //第一个索引
          	  let oldIndex = this.oldIndex;
          	  let d = [];  //月
          	  if(firstIndex == 0){ //表示是本月
          	  	   for(let i = this.currentMonth; i > 0; i--){
    	      	     d.push(i+"月");
    	           }
          	  }else{
          	  	   for(let i = 12; i > 0; i--){
    	      	     d.push(i+"月");
    	           }
          	  }
          	  this.oldIndex = firstIndex;
          	  if(firstIndex != oldIndex){ //只有第一排这次的索引跟上次的索引不一样时 才引起后面月份的变化 不然不变
          	  	  this.$refs.picker._reloadWheel(1,d);
          	  }
              console.log(JSON.stringify(v))
            },
            //完成
            accomplish(){
          	   this.$emit("accomplish",this.selectDate);
            },
            //删除
            deleteDate(){
              this.$emit("accomplish",false);
            },
            //取消
            cancel(){
              this.$emit("cancel",false);
            }
          }
    
        }
    </script>
    
    <style lang="scss" scoped>
      @import "../../style/mixin";
        .ed_body{
            position: fixed;
            width: 100%;
            height: 100%;
           background: #FFFFFF;
            left: 0;
            top: 0;
            z-index: 1000000;
          animation-name: ed_body;
          animation-duration: 0.5s;
          animation-delay: 0s;
          animation-iteration-count: 1;
          animation-direction: normal;
        }
      .ed_top{
         position: relative;
          width: 100%;
          height: 1.3rem;
          strong{
            float: left;
            width: 100%;
            height: 1.3rem;
            line-height: 1.7rem;
            text-align: center;
            @include sc(0.34rem,#000000);
          }
          span{
            position: absolute;
            height: 1.3rem;
            line-height: 1.7rem;
            top: 0;
            @include sc(0.34rem,#007AFF);
            padding: 0 0.4rem;
          }
         .sp_1{
           left: 0;
         }
        .sp_2{
          right: 0;
        }
        .g_hx{
          position: absolute;
          width: 100%;
          border-bottom: #CDCED3 solid 1px;
          left: 0;
          bottom: 1px;
        }
      }
    
      .ed_date{
        position: relative;
        width: 6.7rem;
        height: 0.88rem;
        line-height: 0.88rem;
        margin:1.5rem auto 0;
        border-bottom: #CDCED3 solid 2px;
        @include sc(0.34rem,#BBBBBB);  
        text-align: center;
        i{   
          position: absolute;
          width: 0.36rem;
          height: 0.4rem;
          @include sc(0.36rem,#0D0D0D);
          right: 0;
          bottom: -0.68rem;
          z-index: 100000;
        }
      }
      .ed_date2{
      	 color:#007AFF;
      }
      
      .mask{
      	 display: none;
      }
      .picker-title{
      	 display: none;
      }
    
      @keyframes ed_body {
        0% {
          top: 110%;
        }
        100% {
          top: 0;
        }
      }
    </style>
    

    其中import awesomeDate from "../../components/awesome-date/awesome-date"; 是直接用的vue-awesome-picker的源码

    对awesome-date源码进行分析的时候发现

    _createWheel (wheelWrapper, i) {
      if (!this.wheels[i]) {
        const wheel = this.wheels[i] = new BScroll(wheelWrapper.children[i], {
          wheel: {
            selectedIndex: 0,
            rotate: 25
          },
          swipeTime: this.swipeTime
        })
        wheel.on('scrollEnd', () => {
          this._cascadePickerChange(i)
        })
      } else {
        this.wheels[i].refresh()
      }
      return this.wheels[i]
    },

    每次createWheel的时候 wheel.on 绑定了一个 scrollEnd 方法 this._cascadePickerChange(i)

    找到_cascadePickerChange方法添加

    let currentData = this._getCurrentValue(); 
    this.$emit("scrollUpdateData", currentData);

    这样就可以得到所选择的日期的值了 又因为我是选择一个一个年 再重新给月份赋值(发现官网的级联有问题 只有最开始赋值就没问题 在data()里面赋值就没问题,后面动态赋的值有问题 所以就选择一个年赋一会月的值) 所以得到的月份一直都停留在之前的值,所以要在每次改变值的时候拿到默认(第一个)月份的值

    再分析源码 每次有值改变的时候 都会调用_reloadWheel方法 之前原有的代码不变加上自己需要的代码

    所以

    _reloadWheel (index, data) {
            const wheelWrapper = this.$refs.wheelWrapper
            let scroll = wheelWrapper.children[index].querySelector('.wheel-scroll')
            let wheel = this.wheels ? this.wheels[index] : false
            let dist = 0
            if (scroll && wheel) {
              this.$set(this.pickerData, index, data)
              this.pickerAnchor[index] = dist
              this.$nextTick(() => {
                wheel = this._createWheel(wheelWrapper, index)
                wheel.wheelTo(dist)
              })
            }
            let currentData = this._getCurrentValue();
            this.$emit("scrollUpdateData", currentData);
            return dist
          },
    

     

    展开全文
  • vue-时间控件以及时间控件校验

    千次阅读 2020-07-20 17:22:25
    :model 数据区域 :rules 规则校验 <el-form ref="form" :model="rulesForm" :...1.同时出现两日期选择列表 <el-form-item label="止期" prop="endTime"> <el-date-picker v-model="rulesForm.endTime
    :model 数据区域  :rules 规则校验
    <el-form ref="form" :model="rulesForm" :rules="rules" label-width="30%">
    
    1.同时出现两个日期选择列表
    <el-form-item label="止期" prop="endTime">
                  <el-date-picker
                    v-model="rulesForm.endTime"
                    type="daterange"
                    unlink-panels
                    style="width: 100%;"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
                
    2.每次出现一个日期选择列表
     <el-form-item label="保单止期">
                  <el-date-picker 
                    v-model="rulesForm.endDate1"
                    style="width: 50%;"
                    value-format="yyyy-MM-dd"
                    placeholder="起期"
                  ></el-date-picker>
                  <el-date-picker
                    v-model="rulesForm.endDate2"
                    style="width: 50%;"
                    value-format="yyyy-MM-dd"
                    placeholder="止期"
                  ></el-date-picker>
                </el-form-item>
    
    检验规则 required必须录入  trigger什么时候校验
    endDate1: [
              { required: true, message: "请选择保单止期起期", trigger: ["change", "blur"] }
            ],
            endDate2: [
              { required: true, message: "请选择保单止期止期", trigger: ["change", "blur"] }
            ]
    
    校验方法
     this.$refs.form.validate(valid => {
            if (valid) {
              // this.rulesForm.endDate1 = this.rulesForm.endTime[0];
              // this.rulesForm.endDate2 = this.rulesForm.endTime[1];
              止期不能大于起期
              let timeFlag = new Date(this.rulesForm.endDate1).getTime() > new Date(this.rulesForm.endDate2).getTime()
              if(timeFlag){
                return this.$message({
                    message: "保单止期信息录入有误,请检查录入信息!",
                    type: "warning"
                  });}
    
    展开全文
  • 需求:时间控件,当天之前禁止选择,某一个日期的之前时间禁止选择 文档: 代码实现:在时间控件上添加:picker-options="pickerOptions" <el-date-picker v-model="addForm.ruleForm.approveEndTime" type=...

    Vue学习笔记:Element时间控件添加一段时间禁止选择

    需求:时间控件,当天之前禁止选择,某一个日期的之前时间禁止选择

    文档:

    代码实现:在时间控件上添加 :picker-options="pickerOptions"

    <el-date-picker
     v-model="addForm.ruleForm.approveEndTime"
     type="date"
     placeholder="年/月/日"
     format="yyyy/MM/dd HH:mm:ss"
     value-format="yyyy-MM-dd HH:mm:ss"
     :picker-options="pickerOptions">
     </el-date-picker>

    在data中定义pickerOptions

    设置当天之前禁止选择:

    this.pickerOptions = {
       disabledDate(date){
           return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
       }
    }

    效果:

    设置某一个日期的之前时间禁止选择:

    var time = "2020-03-28 00:00:00"
     this.pickerOptions = {
        disabledDate(date){
              return date.getTime() < new Date(time).getTime() ;
        }
    }

    效果:

    以上代码均实践运用过!

    个人笔记,感谢阅读,欢迎点赞关注!!!!!!!!!!!!!!

     

     

     

    展开全文
  • 一个Vue2日期范围选择控件
  • 在 main.js 中写入以下内容: import ElementUI from 'element-ui... Vue.use(ElementUI); 以上代码便完成了 Element 的引入。 引用了,当然就需要拥有了 npm 安装 npm i element-ui -S 或是 页...
    1. 在 main.js 中写入以下内容:
    	import ElementUI from 'element-ui';
    	import 'element-ui/lib/theme-chalk/index.css';
    	Vue.use(ElementUI);
    
    	以上代码便完成了 Element 的引入。
    
    1. 引用了,当然就需要拥有了
      npm 安装
    	npm i element-ui -S
    

    或是 页面引入

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    1. 可以开始使用了
    	<el-date-picker v-model="data_lis.end_time"  type="datetime"  placeholder="选择日期时间"> </el-date-picker>
    

    da
    大概就是这个样子; 参考: http://element-cn.eleme.io/#/zh-CN/component/installation

    展开全文
  • 基于vue和ElementUI时间选择控件的封装 最近有个需求就是需要把查询控制在最近六个月,还要要求时间的可选范围,在网上找了好久都没有找到,于是就自己动手写了一个,希望对大家有所帮助,也是记录自己的第一次博客...
  • vue 时间控件

    2021-01-21 16:41:04
    1、项目开发中在使用日期时间选择器时需要添加默认时间并精确到HH:mm:ss,默认时间为当天的00:00:00~23:59:59 日期选择器相关属性 <el-date-picker v-model="serachForm.gengerateTime" type="datetimerange...
  • vue中 实时时间控件

    2020-10-27 09:39:20
    时间控件(组件化可直接导入使用) 效果图 <template> <div class="LoginClock"> <div class="time">{{time}}</div> <div class="date">{{date}}</div> </div> &...
  • vue+element 时间控件-时间格式转换

    千次阅读 2019-03-27 16:42:05
    vue +element 时间控件-时间格式转换 放到js文件中 用法:formatDate(new Date(), “yyyy-MM-dd hh:mm:ss”) 结果:2019-03-27 16:40:36 export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt =...
  • 自封装(搬运)时间控件,bootstrap-datetimepicker。资源下载:看这里 需求: 默认本地时间,相隔一个月 四个选项:1一个月,一个季度,半年,一年。 如果结束日期不变,那么默认递增即可,如果结束日期...
  • import myDatepicker from 'vue-datepicker/vue-datepicker-es6.vue'  export default {  data () {  return {  visible: false,  dataForm: {  id: 0,  num: '',  name: '',  desc: '',  ...
  • 基于Vue的手写视频播放控件-使用最基本的video标签中的属性和方法,自定义播放控件,能够实现视频播放、暂停、时间实时显示、进度条实时更新、拖动改变播放进度、控制悬窗无操作自动隐藏等功能,代码一目了然,稍微...
  • 1、 需要加入 value-format=“yyyy-MM-dd” 这就可以了,我选择的是年月日 2、 通过@on-change事件来绑定 getStartTime: function (starTime) { console.log(startTime) }, 3、 直接@on-change=“date=$event”,...
  • vue时间选择控件的使用

    万次阅读 热门讨论 2019-06-28 14:22:32
    步:将js导入到项目文件夹中 第二步:在route文件夹的index.js中引用js文件 import datePicker from "../../static/js/datePicker" 第三步:调用js方法,弹出时间选择器 HTML: <input class="js-...
  • vue+elementUi时间控件

    千次阅读 2017-10-30 09:23:52
    jsp: 引用: link rel="stylesheet" href="path%>element/css/index.css">  script type="text/javascript" ...src="path%>/vuejs/vue.js">script>  script type="text/javascript
  • 后入前的小白,百思不得其解好久,各种百度。 这位小姐姐总结的三种都试了不行,需要...然后用moment试了 moment(values.beginTime) 这种也不行,大佬指导和北京时间差8小时,下面这样写就OK了~~ 传值的时候用哦~ ...
  • vue+elementUI管理系统一直是前端工程师不错的选择,在系统中,难免会有新增和编辑的功能,如图,一般在编辑的时候,都是直接调用新增的弹框,不会新增写一个弹框,编辑写一个弹框,调新增弹框的时候,在获取行的...
  • 首先去下载laydate时间控件,引入到相应的模板中<input type="text" val-required="" value="" date-laydate="" id="estab_dateA" class="initial_date laydate-icon" @click="dateBlock('#estab_dateA')"> ...
  • vue日期选择器控件

    2019-08-10 08:29:10
    vue日期选择器控件
  • 4、有时间显示,包括当前时间和总时长,时间显示为分钟:秒数,单位数补零 5、有进度条随播放进度推进,拖动可以跳转到指定时间位置 6、控制悬窗可以显示和隐藏,点击视频区域可以调出或隐藏控制悬窗,在视频悬窗无...
  • 在后端管理项目中使用vue来进行前端项目的开发,但我们都知道Vue实际上无法监听由第三方插件所引起的数据变化。也无法获得JQuery这样的js框架对元素值的修改的。而日期控件daterangepicker又基于JQuery来实现的。 ...
  • 怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48来源:亿速云阅读:81作者:Leah本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件,内容简明扼要并且容易理解,绝对能使你眼前...
  • 、 在index.html引入依赖文件 <linkrel="stylesheet"href="/static/jquery.datetimepicker.min.css"> <scriptsrc="/static/jquery.min.js"></script> <scriptsrc="/static/jquery-mouse...
  • vue中,element UI 时间控件(二)01——Vue中的$event详解 $event是指当前触发的是什么事件(鼠标事件,键盘事件等) $event.target则指的是事件触发的目标,即哪一个元素触发了事件,这将直接获取该dom元素 1、$...
  • 基于vue3+typescript 的日期时间控件,兼容web+mobile,感兴趣的私我哈
  • ui,其中有个时间控件使用起来方便,就是日期范围控件,看可以便捷的筛选最近1周、2周、1个月、3个月、半年等这样的快捷筛选方式,使用起来感觉简单、易用,体验挺好,最近一个项目在使用ant-design-vue,也想要实现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,052
精华内容 3,620
关键字:

vue做一个时间控件

vue 订阅