精华内容
下载资源
问答
  • element 中<el-date-picker></el-date-picker>的用法
    2021-09-13 20:42:10

    完整功能如下:

    <el-form-item label="有效时间" prop="date" class="active_time">
     <el-date-picker
       v-model="ruleForm.date"
       type="datetimerange"
       format="yyyy-MM-dd HH:mm"
       value-format="yyyy-MM-dd HH:mm:ss"
       :picker-options="expireTimeOption"
       :default-time="default_time"
       range-separator=""
       start-placeholder="开始日期"
       end-placeholder="结束日期"
       @focus="set_default_time"
     >
     </el-date-picker>
    </el-form-item>
    

    return下:

    default_time: ["00:00:00"],
    expireTimeOption: {
    	 disabledDate(date) {
    	   //disabledDate 文档上:设置禁用状态,参数为当前日期,要求返回 Boolean
    	   return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
    	 },
    },
    

    methods下:

    set_default_time() {
        let stamp = new Date().getTime() + 1000 * 5 * 60;
        let Hh = formatHh(stamp);
        this.$set(this.default_time, [0], Hh);
    },
    

    rules下校验的写法:

    date: [{ required: true, message: "请输入有效时间", trigger: "blur" }],
    
    更多相关内容
  • 主要介绍了vue element-ui el-date-picker如何限制选择时间为当天之前,文中给大家提供了代码段和截图,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 1.问题描述 当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求,比如: 新建一个活动,需要定义活动的时间范围; 因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交,新建完成...
  • Element - The world's most popular Vue UI framework ...el-form-item label="推送时间" ...el-date-picker v-model="form.pushDate" type="date" placeholder="选择推送日期" :disabled="disabledDate...

    Element - The world's most popular Vue UI framework

     

     

     

     

     

     

     代码:

    <el-form-item label="时间" prop="pushDate">
        <el-date-picker
          v-model="form.pushDate"
          type="date"
           placeholder="选择日期"
           :disabled="disabledDateEdit"
           :picker-options="pickerOptions"
           @input="inputDate"
        />
    </el-form-item>
    <el-form-item label="" prop="pushDateTime">
        <el-time-picker
            value-format="HH:mm:ss"
            format="HH:mm:ss"
            v-model="form.pushDateTime"
            placeholder="选择时间"
            :disabled="disabledTimeEdit"
            @input="inputTime"
        />
    </el-form-item>
    import { unixTimeToDateTime ,unixTimeToDate } from "@/utils/date";
    pickerOptions: {
        disabledDate(date) {
        //这里设置今天以前的不可选
            return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        }
    },

    // 改变日期
    inputDate(e){
        this.form.pushDate = unixTimeToDate(Date.parse(e)).substring(0,10)
        this.$forceUpdate()
    },
    // 改变时间
    inputTime(e){
        this.form.pushDateTime = e
        this.$forceUpdate()
    },

    展开全文
  • Element el-date-picker 日期选择器详解

    千次阅读 2021-10-13 15:49:21
    代码: 带快捷选项 <el-date-picker v-model="value" align="right" type="date" :picker-options="optionsFast" placeholder="选择日期"> el-date-picker> optionsFast: { shortcuts: [{ text: '今天', onClick...

    点此查看全部文字教程、视频教程、源代码

    1. 前言

    日期选择器用来选择一个或者多个日期,例如选择某个人的生日,再例如选择订单的创建日期,应用还是非常普遍的。

    本篇就来介绍下Element提供的日期选择器的常见用法。

    2. 基本用法

    编写html代码如下:

    	选择任意日期:
        <el-date-picker v-model="value" type="date" placeholder="选择日期" @change="dateChange"> 
        </el-date-picker>
    

    如上代码会显示一个日期选择器,且选中日期的值绑定了value变量,且当选中日期发生变化时,会触发dateChange方法。

    对应效果如下:
    在这里插入图片描述

    3. 日期格式化

    有时候我们需要,按照我们设定的格式,来处理绑定的日期值,可以通过value-format属性来指定格式,常用的格式化字符串包括:

    • yyyy 年
    • MM 月
    • WW 周
    • dd 日
    • HH 时 (24小时制)
    • hh 时 (12小时制)
    • mm 分钟
    • ss 秒

    所以,如果按照MySQL数据库对日期字符串格式化要求,我们编写代码如下:

    	日期格式化:{{value}}
        <el-date-picker v-model="value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
    

    选中某个日期后,对应效果如下,可见value已经被格式化:
    在这里插入图片描述

    4. 选择其他日期单位

    除了选中某一天,有时候我们还会面临,选择某一周、某个月份、某个年份的需求,此时可以通过type属性来设置。

    例如:

    	选择其他日期单位
        <el-date-picker v-model="valueWeek" type="week" format="yyyy 第WW周" placeholder="选择周">
        </el-date-picker>
        <el-date-picker v-model="valueMonth" type="month" placeholder="选择月">
        </el-date-picker>
        <el-date-picker v-model="valueYear" type="year" placeholder="选择年">
        </el-date-picker>
    

    效果:
    在这里插入图片描述

    5. 选择多个日期

    el-date-picker还支持选中多个日期,通过将type属性值设置为dates即可。

    	选择多个日期
        <el-date-picker type="dates" v-model="valueDates" placeholder="选择一个或多个日期">
        </el-date-picker>
    

    效果:
    在这里插入图片描述

    6. 带快捷选项

    有时候,我们希望可以直接选择昨天、上周、上月,这些经常使用的日期不需要我们去查找,就能快速选中,此时可以借助picker-options属性来实现。

    代码:

    	带快捷选项
        <el-date-picker v-model="value" align="right" type="date" :picker-options="optionsFast" placeholder="选择日期">
        </el-date-picker>
    
    	  optionsFast: {
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }, {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            }, {
              text: '一周前',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }]
          },
    

    通过上述代码,点击text对应按钮,即可将我们代码编写的值选中,效果如下:
    在这里插入图片描述

    7. 禁用部分日期

    通过picker-options还可以禁用部分日期,代码:

     	禁用部分日期
        <el-date-picker v-model="value" align="right" type="date" :picker-options="optionsDisable" placeholder="选择日期">
        </el-date-picker>
    
     	  optionsDisable: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          }
    

    效果如下:
    在这里插入图片描述

    8. 小结

    el-date-picker日期选择器提供的功能很全面,实现起来也挺简单,还是比较好用的。

    展开全文
  • ========================================================== 代码: 测试 v-model="dialogVisible" title="Tips" width="50%" :destroy-on-close="true" > v-model="value3" type="date" placeholder="Pick a day...
  • 效果如下: <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']">....el-picker-panel

    效果如下:
    在这里插入图片描述
    在这里插入图片描述

     <el-date-picker
          v-model="value1"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']">
        </el-date-picker>
    

    element 的时间范围筛选器组件样式更改

    /* 日历样式 */
    .el-picker-panel {
      background: #1b3e6f !important;
      color: #ffffff;
      border: 1px solid #93bee7 !important;
    }
    .el-picker-panel .el-date-range-picker__time-header {
      border-bottom: 1px solid #93bee7 !important;
    }
    .el-picker-panel__icon-btn {
      width: 8px;
      height: 10px;
      color: #5a81fd !important;
    }
    .el-picker-panel .el-input__inner {
      background-color: #19466f;
      border: #75ebf2;
      color: #e8fdff;
    }
    .el-picker-panel .el-date-range-picker__content.is-left,
    .el-picker-panel .el-date-range-picker__content.is-right {
      border-right: 1px solid #93bee7 !important;
      background: url(./images/矩形.png) center center;
      background-size: 100% 100%;
    }
    .el-picker-panel .el-date-range-picker__header {
      color: #75ebf2;
    }
    .el-picker-panel .el-date-table th {
      color: #c3e3ec;
    }
    .el-picker-panel .el-date-table td.available {
      width: 14px;
      height: 14px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #6ce6cb;
    }
    .el-picker-panel .el-date-table td.available:hover {
      color: #ffffff;
    }
    .el-date-table td.in-range div,
    .el-date-table td.in-range div:hover,
    .el-date-table.is-week-mode .el-date-table__row.current div,
    .el-date-table.is-week-mode .el-date-table__row:hover div {
      background-color: #4c77b3 !important;
    }
    .el-time-panel {
      background-color: #1b3e6f !important;
      border: 1px solid #93bee7 !important;
    }
    .el-time-spinner__item {
      color: #c3e3ec !important;
    }
    .el-time-spinner__item:hover:not(.disabled):not(.active) {
      background: #4c77b3 !important;
    }
    .el-time-panel__btn {
      color: #adcfff !important;
    }
    .el-picker-panel__footer {
      background-color: #1b3e6f !important;
    }
    .el-picker-panel .el-button {
      width: 36px;
      height: 18px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #1475e3;
    }
    .el-icon-d-arrow-left {
      color: #1475e3 !important;
    }
    .el-button.is-disabled,
    .el-button.is-disabled:focus,
    .el-button.is-disabled:hover {
      color: #1475e3 !important;
      margin-left: -20px !important;
    }
    .el-button + .el-button {
      width: 92px;
      height: 40px;
      background: url(./images/圆角矩形.png) center center !important;
      background-size: 115% 130% !important;
      border: 1px solid #1475e3 !important;
      border-radius: 4px !important;
    }
    .el-button {
      width: 92px;
      height: 40px;
      border: 1px solid #1475e3;
      border-radius: 4px;
    }
    .el-button--text {
      display: none;
      width: 92px;
      height: 40px;
      border: 1px solid #1475e3;
      border-radius: 4px;
    }
    .el-button.is-disabled.is-plain,
    .el-button.is-disabled.is-plain:focus,
    .el-button.is-disabled.is-plain:hover {
      width: 92px;
      height: 40px;
      background: url(./images/圆角矩形.png) center center !important;
      background-size: 115% 130% !important;
      border: 1px solid #1475e3 !important;
      border-radius: 4px !important;
    }
    .el-button--text,
    .el-button--text.is-disabled,
    .el-button--text.is-disabled:focus,
    .el-button--text.is-disabled:hover,
    .el-button--text:active {
      display: none !important;
    }
    .el-date-table th {
      border-bottom: 1px solid #293f6f !important;
    }
    /* 时间筛选 */
    .el-time-panel__content::after,
    .el-time-panel__content::before {
      border-bottom: 1px solid #293f6f !important;
      border-top: 1px solid #293f6f !important;
    }
    .el-time-panel {
      background-color: #040d27 !important;
    }
    .el-time-panel__btn.confirm {
      background-color: #040d27 !important;
      color: #1475e3 !important;
    }
    .el-time-panel__btn.cancel {
      background-color: #040d27 !important;
      color: #6397d1 !important;
    }
    .el-time-panel__footer {
      border-top: none !important;
    }
    .el-time-panel {
      border: none;
      border-top: 2px solid #293f6f !important;
    }
    
    展开全文
  • el-date-picker

    2021-09-07 15:00:19
    element中使用el-datePicker日期选择器有默认时间时修改时间不生效,change事件也不执行 解决 看到一篇文章里说: 解决方式是深拷贝从父组件传递过来的数据,拷贝后的数据不带有__ob__: Observer属性,并且页面的...
  • el-date-picker比较两个时间值的大小,el-date-picker循环组件比较时间值的大小 change事件用于时间比较值 dom部分 <el-row> <el-col :span="12"> <el-form-item label="*开始时间:"> <el...
  • el-date-picker的时间限制picker-options 1.在el-date-picker组件上写上动态属性 :picker-options=" "如下 2.在data里写动态属性所添加的内容 data(){ return { pickerOptions: this.limitTime(), } } 可以...
  • <el-form-item label="财务审时间:" class="item" prop=...el-date-picker size="small" v-model="queryParams.financialAuditTime" type="datetimerange" format="yyyy-MM-dd HH:mm:ss
  • vue element el-date-picker设置当日之前/之后的日期不可选择 ... :picker-options="pickerOptions"> </el-date-picker> 二、 禁用当天之后的时间不可选择(disabledDate中,time.getTime()
  • 实际业务中经常会有选择对应的时间和日期,但是考虑到用户操作的不确定性,所以我们在写整个时候,会给出一个明确是时间范围限制 ,一般都是通过 picker-options 这个对象进行配置 1.0 限制今日之前的日期 在...
  • element-ui el-date-picker日期限制只能选当天和昨天 害,一般都是禁止选今天之前的日期,或者禁止选今天之后的日期,这又...主要**:picker-options=“pickerOptions”** <el-date-picker v-model="queryInfo.tim
  • <el-form-item label="开始时间" required> <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="queryParmas.startTime" ...
  • v-date-picker

    2021-03-29 12:57:50
    v日期选择器 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • 限制开始时间和结束时间 ...el-row :gutter="20"> <el-col :span="20" class="blk-double-time"> <el-form-item label="项目时间" prop="startTime" :rules="[rules.required]"> <
  • 是的,el-select、el-date-picker等的宽度就是比input端,可以设置style,width:100%来解决。 <el-date-picker v-model="endTime" type="date" placeholder="结束时间" style="width:100%;" value-format=...
  • el-date-picker时间筛选

    2022-05-14 16:50:34
    el-date-picker v-model="dateRange" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> const ...
  • <!--:append-to-body="false...el-button icon="el-icon-plus"></el-button> <el-dropdown-menu slot="dropdown" :append-to-body="false"> <el-dropdown-item>新增子分类</el-dropdown-
  • el-date-picker>实现指定日期禁用

    千次阅读 2021-12-07 16:15:17
    el-date-picker>组件大家经常使用,实现指定某些日期范围禁用,调用官方文档上disabledDate方法。 下面大家看下我实现的小demo,有需要的小伙伴可以拿来用。 需求: 默认是当前日期及其前30天可以选择,其他...
  • 二次封装el-date-picker

    2022-02-15 16:14:42
    根据产品需求和使用场景,将elementUi的时间选择器二次封装(将整体的时间段选择拆分成两个单独时间的选择)方便...el-date-picker v-model="startTime" v-bind="$attrs" class="date-custom" :size="size
  • el-date-picker 此刻

    2021-12-29 16:20:12
    element 日期选择器设置了限制选择的时间之后 点击此刻按钮就没有效果
  • 注意方法中的date参数是el-picker-time中@change事件的回调参数,这个参数是你选择的时间.格式为yyyy-MM-dd 而disabledDate是picker-options的一个函数,作用就是过滤不可选的时间,函数中的参数time是代表el-picker-...
  • element月和年的选择器更改 : 结果: /* 年月样式 */ ....el-picker-panel { background-color: #040d28 !important; } .el-date-picker__header-label { color: #b1e8fd !important; } .el-year-tab
  • 在这里简单总结下,在项目中关于这几个控件和向后端插入多个数据的的用法。...一、el-date-picker控件 在这里注意使用 value-format="yyyy-MM-dd HH:mm:ss"前端的日期格式就是如:2020-01-21 15:09:10 接下来
  • //:picker-options="option" //重要 <el-form-item label="发布日期" prop="value1"> <el-date-picker v-model="newsForm.value1" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange" ...
  • vue之el-date-picker使用

    2021-06-09 16:34:14
    1.设置默认值之后,重新选择日期,页面赋值不会生效,但是通过打印发现已经修改了,只是页面没有重新渲染。 解决方法: 不生效的处理方法:this.queryParams.ddrq = time
  • el-date-picker的picker-options属性一直不生效,即使放入methods,也没效果,试了很多方法都不管用,准备从页面一个warn着手,浏览器有个warn提示: Extraneous non-props attributes (value-format,picker-options)...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,964
精华内容 2,785
关键字:

el-date-picker

友情链接: jwebmail.rar