ElementUI el-time-picker DatePicker 日期选择器 显示到分钟不显示秒 24小时制 选择三天内日期 结束日期大于开始日期 时间字符串比较大小

最新推荐文章于 2024-06-03 16:14:18 发布
最新推荐文章于 2024-06-03 16:14:18 发布
阅读量1.2w 收藏 7
点赞数 4
分类专栏： element-ui js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Akatsuki233/article/details/90477397
版权

 显示到分钟不显示秒

<el-date-picker type="datetime" :placeholder="new Date('ch',{hour12:false}).toLocaleString()" value-format="yyyy-MM-dd HH:mm" 
format="yyyy-MM-dd HH:mm" v-model="searchData.timeStart" @change="changeData" style="width: 100%"></el-date-picker>

HH 是 24 小时制， hh 是 12 小时制，HH:mm只显示小时和分钟。

format 是显示时的时间格式 ，即下面的图片效果

value-format 是传给后端的时间格式

js如何将new Date（）转化为本地时间 yyyy-MM-dd HH:mm:ss格式？

    dateFormat (time) {
      let date = new Date(time + 8 * 3600000)
      let str = date.toISOString().replace('T', ' ')
      return str.substr(0, str.lastIndexOf('.'))
    }
    this.dateFormat(Date.now())

调用上面的函数 转化为本地时间 yyyy-MM-dd 格式？ 

    /**
     * @function 获取当天日期 yyyy-MM-dd格式
     */
    dateInitFormat() {
      const date = this.dateFormat(Date.now())
      const str = date.substring(0, 10)
      return str
    },

选择三天内日期（今天，明天，后天）

 data的return 中：      
    pickerOptions: {
        disabledDate (time) {
          let _now = Date.now() + 8.64e7 * 3
          let three = 3 * 8.64e7
          let threeDays = _now - three
          // 今天，明天后天之后的禁用，今天之前禁用
          return time.getTime() > _now - 8.64e7 || time.getTime() < threeDays - 8.64e7
        }
      }

 

对出生日期进行限制(只能选择当天以前的日期)

获取今天日期

let nowDay = new Date().toLocaleDateString().split('/').join('-')
// 将1970/08/08转化成1970-08-08
template中：
<el-date-picker v-model="addForm.birthDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerBeginDateBefore" style="width: 100%"></el-date-picker>

data中：
data(){
    return {
      // 出生日期限制
      pickerBeginDateBefore: {
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e7 
           //（带 - 8.64e7时，今天之前的日期，不包括今天）
          // return time.getTime() > Date.now() - 8.64e7 （今天之后的日期，包括今天）
        }
      }
    }
}

开始时间大于当天并且小于结束时间

html部分
template中：    
              <el-col  :xs="24" :sm="24" :md="8" :lg="6">
                <el-form-item label="抵达时间">
                  <el-date-picker format="MM-dd" :picker-options="pickerArriveDate" value-format="yyyy-MM-dd" type="date" v-model="searchData.arriveDate" @change="changeData" style="width: 100%"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col  :xs="24" :sm="24" :md="8" :lg="6">
                <el-form-item label="离开时间">
                  <el-date-picker format="MM-dd" :picker-options="pickerLeaveDate" value-format="yyyy-MM-dd" type="date" v-model="searchData.leaveDate" @change="changeData" style="width: 100%"></el-date-picker>
                </el-form-item>
              </el-col>
data中
      pickerArriveDate: this.arriveDate(),
      pickerLeaveDate: this.leaveDate(),
      searchData.leaveDate: '',
      searchData.arriveDate: ''
methods中
    arriveDate () {
      let self = this
      return {
        disabledDate (time) {
          if (self.searchData.leaveDate) {
            // time.getTime() 是当前时间，当前时间大于离开时间的禁用掉 / 当前时间小于今天的禁用
            return new Date(self.searchData.leaveDate).getTime() < time.getTime() || time.getTime() < Date.now() - 8.64e7
          } else {
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      }
    },
    leaveDate () {
      let self = this
      return {
        disabledDate (time) {
          if (self.searchData.arriveDate) {
            // time.getTime() 是当前时间，当前时间小于抵达时间的禁用掉 / 当前时间小于今天的禁用
            return new Date(self.searchData.arriveDate).getTime()  + 8.64e7  > time.getTime() || time.getTime() < Date.now() - 8.64e7
          } else {
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      }
    },

 单个开始时间大于结束时间

html部分
  <el-form-item label="日期">
     <el-row>
       <el-col :span="11">
          <el-date-picker :picker-options="pickerArriveDate" :placeholder="new Date().toLocaleDateString()" value-format="yyyy-MM-dd" type="date" v-model="searchData.startDate" @change="changeData" style="width: 100%"></el-date-picker>
        </el-col>
       <el-col :span="2" style="text-align: center">~</el-col>
          <el-col :span="11">
             <el-date-picker :picker-options="pickerLeaveDate" :placeholder="new Date().toLocaleDateString()" type="date" value-format="yyyy-MM-dd" v-model="searchData.endDate" @change="changeData" style="width: 100%"></el-date-picker>
           </el-col>
      </el-row>
  </el-form-item>
data中
      pickerArriveDate: this.arriveDate(),
      pickerLeaveDate: this.leaveDate(),
      searchData.leaveDate: '',
      searchData.arriveDate: ''
methods中
    arriveDate () {
      let self = this
      return {
        disabledDate (time) {
          if (self.searchData.endDate) {
            // time.getTime() 是当前时间，禁用那些大于结束时间的
            return new Date(self.searchData.endDate).getTime() < time.getTime()
          }
        }
      }
    },
    leaveDate () {
      let self = this
      return {
        disabledDate (time) {
          if (self.searchData.startDate) {
            // time.getTime() 是当前时间，禁用那些小于开始时间的
            return new Date(self.searchData.startDate).getTime() - 8.64e7 > time.getTime()
          }
        }
      }
    }

 效果图

es6单个开始时间小于结束时间 

html部分
                <el-table-column
                  prop="arrivalDate"
                  align="center"
                  width="160px"
                  :label="`* ${$t('into-village-time')}`">
                  <template slot-scope="scope">
                    <el-form-item label-width="0" v-if="showChoseTime" :prop="`addRoomersInfos[${scope.$index}].arrivalDate`" :rules="rules.arrivalDate">
                      <el-date-picker :clearable="false" :picker-options="pickerOptionsStartList[scope.$index]" v-model="scope.row.arrivalDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%"  @change="changeTimeEnd(scope.$index)"></el-date-picker>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="outof-village-time"
                  align="center"
                  width="160px"
                  :label="`* ${$t('outof-village-time')}`">
                  <template slot-scope="scope">
                    <el-form-item v-if="showChoseTime" label-width="0" :prop="`addRoomersInfos[${scope.$index}].departureDate`" :rules="rules.departureDate">
                      <el-date-picker :clearable="false" :picker-options="pickerOptionsEndList[scope.$index]"  v-model="scope.row.departureDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%"  @change="changeTimeStart(scope.$index)"></el-date-picker>
                    </el-form-item>
                  </template>
                </el-table-column>
data部分
      pickerOptionsStart: {},
      pickerOptionsEnd: {},
      showChoseTime: true,    
methods部分
   // 结束时间限制开始时间
    // 开始时间 控制结束时间
    changeTimeStart(index) {
      this.pickerOptionsStartList[index] = {
        disabledDate: time => new Date(this.form.addRoomersInfos[index].departureDate).getTime() < time.getTime(),
      }
      this.showChoseTime = false
      this.$nextTick(() => {
        this.showChoseTime = true
      })
    },
    // 结束时间限制开始时间
    changeTimeEnd(index) {
      this.pickerOptionsEndList[index] = {
        disabledDate: time => new Date(this.form.addRoomersInfos[index].arrivalDate).getTime() - 8.64e7 > time.getTime(),
      }
      this.showChoseTime = false
      this.$nextTick(() => {
        this.showChoseTime = true
      })
    },

 

es6多个开始时间小于结束时间 

html部分
                <el-table-column
                  prop="arrivalDate"
                  align="center"
                  :label="$t('into-village-time')">
                  <template slot-scope="scope">
                    <el-form-item label-width="0" :prop="`addRoomersInfos[${scope.$index}].arrivalDate`" :rules="rules.arrivalDate">
                        <el-date-picker @change="changeEnd(scope.$index)" :picker-options="pickerOptionsStart" v-model="scope.row.arrivalDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="outof-village-time"
                  align="center"
                  :label="$t('outof-village-time')">
                  <template slot-scope="scope">
                    <el-form-item label-width="0" :prop="`addRoomersInfos[${scope.$index}].departureDate`" :rules="rules.departureDate">
                        <el-date-picker @change="changeStart(scope.$index)" :picker-options="pickerOptionsEnd" v-model="scope.row.departureDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
                    </el-form-item>
                  </template>
                </el-table-column>
data：      
      pickerOptionsStart: {},
      pickerOptionsEnd: {},
methods：
    // 结束时间限制开始时间
    changeStart(index) {
      if (!this.form.addRoomersInfos[index].departureDate) {
        this.pickerOptionsStart = {
          disabledDate: {},
        }
        return
      }
      this.pickerOptionsStart = {
        disabledDate: time => new Date(this.form.addRoomersInfos[index].departureDate).getTime() < time.getTime(),
      }
    },
   // 开始时间 控制结束时间
    changeEnd(index) {
      if (!this.form.addRoomersInfos[index].arrivalDate) {
        this.pickerOptionsEnd = {
          disabledDate: {},
        }
        return
      }
      this.pickerOptionsEnd = {
        disabledDate: time => new Date(this.form.addRoomersInfos[index].arrivalDate).getTime() - 8.64e7 > time.getTime(),
      }
    },

效果图

时间字符串比较大小

html部分
          <el-col :span="24">
            <el-form-item :label="$t('startTime')" prop="startTime">
              <el-select v-model="form.startTime" @change="changeTime">
                <el-option v-for="item in DROPDOWNBOX.BUSINESS_TIME" :key="item.value" :value="item.value" :label="item.text" style="width: 100%"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('endTime')" prop="endTime">
              <el-select v-model="form.endTime" @change="changeTime">
                <el-option v-for="item in DROPDOWNBOX.BUSINESS_TIME" :key="item.value" :value="item.value" :label="item.text" style="width: 100%"></el-option>
              </el-select>
            </el-form-item>
          </el-col>    
js部分
    /**
     * @function 时间大小比较
     */
    changeTime() {
      const date1 = Date.parse(`2008-08-08 ${this.form.startTime}`) //'2008-08-08'这个日期随便给
      const date2 = Date.parse(`2008-08-08 ${this.form.endTime}`)
      if (this.form.startTime !== '' && this.form.endTime !== '') {
        if (date1 > date2) {
          this.$message.warning('开始时间必须小于结束时间')
          this.form.endTime = ''
        }
      }
    },

多个开始时间大于结束时间 参考：https://msd.misuland.com/pd/3181438578597039444

选择一定范围的日期参考：https://www.cnblogs.com/goloving/p/9122788.html 

Akatsuki233
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element-UI 时间选择器 el-time-picker 禁用 秒 选项
一碗清深的博客
07-06 3335
时间选择器 el-time-picker 禁用 秒 选项、与日期组合。
vue+element-ui实现el-time-picker组件只显示分钟和秒
weixin_47962813的博客
05-22 3415
【代码】vue+element-ui实现el-time-picker组件只显示分钟和秒。
ElementUI TimePicker时间范围，设置开始时间一直小于结束时间
最新发布
weixin_49780389的博客
06-03 399
根据项目需求：1. 开始时间一直小于等于结束时间。2. 结束时间大于等于开始时间。
ElementUI el-time-picker DatePicker 日期选择器 显示到分钟不显示秒
热门推荐
qinkaiyuan94的博客
01-12 4万+
format是格式化显示出来的样子，HH:mm只显示小时和分钟
el-date-picker样式优化及截止到时不显示分秒优化
z1093541823的博客
10-15 3228
截止到时不显示分秒其实比较简单 就HTML部分添加 format="yyyy-MM-dd HH" value-format="yyyy-MM-dd HH:mm:ss" 然后在css部分将样式隐藏 .el-time-spinner__wrapper { width: 100% !important; } .el-scrollbar:nth-of-type(2) { display: none !important; } el-date-picker样式优化涉及样式较多，代...
Element ui 日期时间选择器取消分秒
比利
07-07 6212
日期时间选择器取消分秒
element ui日期时间选择器隐藏秒
m0_56739918的博客
12-22 959
element ui日期时间选择器隐藏秒则在标签中加上format=“yyyy-MM-dd HH:mm” ， 如何绑定的值显示秒则加上 value-format="yyyy-MM-dd HH:mm:ss"即可。
element-ui 限制日期选择的方法(datepicker)
08-27
Element-UI 日期选择器提供了多种类型的日期选择器，如日期选择器、日期时间选择器、日期范围选择器等。在这里，我们将使用日期选择器来演示限制日期选择的方法。 在上面的示例代码中，我们使用了两个日期选择器，...
el-data-picker季度区间选择器
08-02
通常，该组件会显示两个日期选择器，分别对应时间区间的开始和结束季度，用户可以通过它们快速设置所需的季度范围。 在实现上，el-data-picker季度区间选择器可能包含以下关键功能： 1. **日期格式化**：根据预设...
elementui elementUI - date-picker.zip
03-02
在给定的资源 "elementUI - date-picker.zip" 中，主要涉及的是 ElementUI 中的日期选择器（date-picker）组件的修改，特别是关于时间步长（time-step）的调整。 日期选择器是用户界面中常见的一种交互元素，用于让...
ElementUI日期时间选择器 自定义快捷选项最详细使用代码
06-23
ElementUI是一款基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者构建用户界面，其中日期时间选择器（DatePicker）是常用的元素之一。本篇文章将深入探讨如何在ElementUI中自定义日期时间选择器的快捷选项，以...
时间日期插件 datePicker 可以自定义样式和效果
08-30
jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日历表 jquery.datePicker日历控件应用input:text文本框弹出日历表选择日期时间，设置默认显示日历表展示。jquery日历控件下载。
element时间选择器有数据不显示
qq_45479398的博客
09-27 396
element时间选择器有数据不显示
el-date-picker 禁用时分秒选择（包括禁用下拉框展示）
敲代码无敌小奶龙的博客
04-26 884
el-date-picker 禁用时分秒选择（包括禁用下拉框展示）
datepicker安装插件实现选择具体小时分钟
m0_48627336的博客
05-19 266
​​​​​​https://trentrichardson.com/examples/timepick​​​​​​er/
element-ui 比较时间的大小
V8min的博客
11-15 2042
时间选择器开始时间和结束时间分开时，一般结束时间不能小于开始时间，代码如下： <el-form-item label="任务开始时间:" prop="taskStartTime"> <div class="block"> <el-date-picker v-model="form.taskStartTime" value-format="yyyy-MM-dd"
element UI 中时间控件只能选大于当前的时间
weixin_48456565的博客
06-29 1121
<el-date-picker v-model="ruleFormSecond.transactionTime" type="date" :disabled="dis" style="width:217px;" :picker-options="pickerOptions" placeholder="选择大于当前时间的时间"> </el-date-picker> pickerOptions: { disab
解决Element DateTimePicker开始时间和结束时间大小关系
xtcyolo的博客
12-26 1516
效果：①开始时间和结束时间不能小于当前时间；②结束时间大于开始时间，开始时间小于结束时间；
el-date-picker类型是datetimerange然后时间选择器的时分错位和el-time-picker 组件时分秒样式错位
a20001999的博客
06-26 1185
el-date-picker类型是datetimerange然后时间选择器的时分错位和el-time-picker 组件时分秒样式错位
el-date-picker 日期范围选择器 只能选取开始时间到结束时间三个月之内
06-03
如果你想要限制 el-date-picker 日期范围选择器只能选取开始时间到结束时间三个月之内的日期，你可以通过修改 `pickerOptions` 属性来实现。具体方法如下： ``` <el-date-picker v-model="dateRange" type="daterange" :picker-options="pickerOptions"> </el-date-picker> ``` ``` data() { return { pickerOptions: { disabledDate(time) { // 获取选择的开始时间和结束时间 const start = new Date(this.$refs.datePicker[0].value); const end = new Date(this.$refs.datePicker[1].value); // 计算开始时间到结束时间的天数 const days = (end - start) / (24 * 60 * 60 * 1000); // 如果天数大于90天，则禁用这个日期 return time.getTime() < start.getTime() || time.getTime() > end.getTime() || days > 90; } }, dateRange: [] }; } ``` 在上面的代码中，我们通过 `disabledDate` 方法获取选择的开始时间和结束时间，然后计算开始时间到结束时间的天数。如果天数大于90天，则禁用这个日期。这样就可以实现 el-date-picker 日期范围选择器只能选取开始时间到结束时间三个月之内的日期了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值