精华内容
下载资源
问答
  • moment格式转换字符串 //要转化的moment(date)转换格式('YYYY-MM-DD-QQ');moment需要单独引入 moment(date).format('YYYY-MM-DD-QQ') 字符串格式转换moment moment (dateString,'YYYY-MM-DD HH:mm:ss')

    moment格式转换字符串

    //要转化的moment(date)转换格式('YYYY-MM-DD-QQ');moment需要单独引入
    moment(date).format('YYYY-MM-DD-QQ')
    

    字符串格式转换moment

    moment (dateString,'YYYY-MM-DD HH:mm:ss')
    
    展开全文
  • 首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from ‘moment’ 结构代码: <a> triggerNode[removed] format=YYYY-MM-DD HH:mm:ss v-decorator=[ 'pushtime', { rules: [{ ...
  • 我就废话不多说了,大家还是直接看代码吧~show-timeformat="YYYY/MM/DD HH:mm:ss":value="[this.moment(startTime, dateFormat),this.moment(endTime, dateFormat)]" //关键代码@change="onChangeTime">...

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

    show-time

    format="YYYY/MM/DD HH:mm:ss"

    :value="[this.moment(startTime, dateFormat),this.moment(endTime, dateFormat)]" //关键代码

    @change="onChangeTime"

    >

    import Moment from 'moment'

    export default {

    data () {

    this.dateFormat = 'YYYY/MM/DD HH:mm:ss'

    return {

    startTime: '2019-07-12 16:00:00',

    endTime: '2019-07-13 04:00:00',

    }

    }

    methods: {

    onChangeTime (dates, dateStrings) {

    console.log(dates)

    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])

    },

    }

    }

    效果图:

    补充知识:ant-design-vue TimePicker 时间选择框 踩坑

    笔者在一次开发中用到TimePicker 时间选择框组件。

    要求是有默认值,就是从接口中返回的数据,但是TimePicker数据在一次加载后便不会更新

    简单的说,如果在data里设置了default=null TimePicker就会就会显示Invalid date,default=“9:00:00”,就会显示9:00:00

    最后解决方法是data里设置了default=null,在time-picker内做判断 v-if="defaultstart!==null"

    完美解决!

    以上这篇ant-design-vue 时间选择器赋值默认时间的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

    时间: 2020-10-26

    展开全文
  • vue Ant Design a-range-picker自定义时间 要实现的效果 ,选择时间时,需要添加 昨天,今天,上周,本月,本季度等筛选条件 步骤 自定义 rangeDate.js import moment from 'moment' const rangeDate = { data()...

    vue Ant Design a-range-picker自定义时间

    要实现的效果 ,选择时间时,需要添加 昨天,今天,上周,本月,本季度等筛选条件

    在这里插入图片描述
    步骤

    1. 自定义 rangeDate.js
    import moment from 'moment'
    const rangeDate = {
        data() {
            return {
                ranges: {
                    '昨天': [moment().day(moment().day() - 1), moment().day(moment().day() - 1)],
                    '今天': [moment(), moment()],
                    '上周': [moment().week(moment().week() - 1).startOf('week'), moment().week(moment().week() - 1).endOf('week')],
                    '本周': [moment().weekday(0), moment().weekday(6)],
                    '上月': [moment().month(moment().month() - 1).startOf('month'), moment().month(moment().month() - 1).endOf('month')],
                    '本月': [moment().startOf('month'), moment().endOf('month')],
                    '上季度': [moment().quarter(moment().quarter() - 1).startOf('quarter'), moment().quarter(moment().quarter() - 1).endOf('quarter')],
                    '本季度': [moment().startOf('quarter'), moment().endOf('quarter')],
                    '去年': [moment().year(moment().year() - 1).startOf('year'), moment().year(moment().year() - 1).endOf('year')],
                }
            }
        },
        methods: { moment }
    }
    export { rangeDate }
    
    1. 在页面中引入使用

    import {rangeDate} from "@/utils/rangeData"

    <a-range-picker v-model="queryParam.date" :ranges="ranges"  show-time format="YYYY-MM-DD" @change="onChange"/>
    
    export default{
        mixins:[JeecgListMixin, mixinDevice,rangeDate],
        
    }
    

    自定义限制结束时间

       <a-range-picker v-model="queryParam.date" :disabled-date="disabledDate"  format="YYYY-MM-DD" @change="onChange"/>
       
       method:{
           
          disabledDate(current){
              // 时间选择超过当天日期不能选
               return current && current > moment().endOf('day');  
               //时间选择当前日期之前不能选
                return current && current < moment().endOf('day');    
                // 时间选择截止下个月
                           
          }    
       }
    
    展开全文
  • 按照ant design vue官方说明,使用日期选择器需要在入口文件(main.js)全局设置语言: // 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/...
  • 由于做项目突然接到需求 尽可能多的添加一些日期时间快捷操作,于是便利用moment实现了快捷选择时间日期,记录下来以便后续继续使用 #####示例 1.安装moment npm i moment -S 2.引入moment import moment from '...

    由于做项目突然接到需求 尽可能多的添加一些日期时间快捷操作,于是便利用moment实现了快捷选择时间日期,记录下来以便后续继续使用
    #####示例
    在这里插入图片描述

    1.安装moment
    npm i moment -S
    
    2.引入moment
    import moment from 'moment'
    
    HTML部分
    <template>
      <div>
        <div class="data_box">
          <div>
            <el-dropdown>
              <el-button type="primary" size="mini">
                按天<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="current()" class="drop_menu">今天</el-dropdown-item>
                <el-dropdown-item @click.native="yesterday()" class="drop_menu">昨天</el-dropdown-item>
                <el-dropdown-item @click.native="recentCurrent()" class="drop_menu">过去一天</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
             <el-dropdown>
              <el-button type="primary" size="mini">
                按周<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="todayWeek()" class="drop_menu">本周</el-dropdown-item>
                <el-dropdown-item @click.native="lastWeek()" class="drop_menu">上周</el-dropdown-item>
                <el-dropdown-item @click.native="recentWeek()" class="drop_menu">过去一周</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
             <el-dropdown>
              <el-button type="primary" size="mini">
                按月<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="currentMonth()" class="drop_menu">本月</el-dropdown-item>
                <el-dropdown-item @click.native="lastMonth()" class="drop_menu">上月</el-dropdown-item>
                <el-dropdown-item @click.native="recentMonth()" class="drop_menu">过去一月</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
             <el-dropdown>
              <el-button type="primary" size="mini">
                按季度<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item  @click.native="currentQuarter()" class="drop_menu">本季度</el-dropdown-item>
                <el-dropdown-item  @click.native="lastQuarter()" class="drop_menu">上季度</el-dropdown-item>
                <el-dropdown-item class="drop_menu" @click.native="recentQuarter()">近一季度</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
             <el-dropdown>
              <el-button type="primary" size="mini">
                按年<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="drop_menu" @click.native="currentYear()">今年</el-dropdown-item>
                <el-dropdown-item class="drop_menu" @click.native="lastYear()">上一年</el-dropdown-item>
                <el-dropdown-item class="drop_menu" @click.native="recentYear()">过去一年</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
         <el-popover
          placement="bottom"
          width="400"
          trigger="click">
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="sureTime()"
              end-placeholder="结束日期">
            </el-date-picker>
          <el-button type="primary" size="mini" slot="reference" style="padding-top:8px;">自定义</el-button>
        </el-popover>
        </div>
      </div>
    </template>
    
    data部分
    data () {
        return {
          value1: '',
          starttime: '',
          endtime: ''
        }
    
    对应的方法
    // customize
        sureTime () {
          this.starttime = this.value1[0]
          this.endtime = this.value1[1]
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 今天
        current () {
          this.starttime = moment(new Date().getTime()).format('YYYY-MM-DD') + ' ' + '00:00:00'
          this.endtime = moment().subtract('days', 0).format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 昨天
        yesterday () {
          this.starttime = moment(new Date().getTime() - 3600 * 24 * 1000).format('YYYY-MM-DD') + ' ' + '00:00:00'
          this.endtime = moment(new Date().getTime() - 3600 * 24 * 1000).format('YYYY-MM-DD') + ' ' + '23:59:59'
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 近一天
        recentCurrent () {
          this.starttime = moment(new Date().getTime() - 3600 * 24 * 1000).format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment().subtract('days', 0).format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 本周
        todayWeek () {
          this.starttime = moment().startOf('isoweek').format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment().endOf('isoweek').format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 上周
        lastWeek () {
          this.starttime = moment().startOf('isoweek').subtract('week', 1).format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment().endOf('isoweek').subtract('week', 1).format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 近一周
        recentWeek () {
          this.starttime = moment(new Date().getTime() - 3600 * 24 * 1000 * 7).format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 本月
        currentMonth () {
          this.starttime = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment().endOf('month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 上月
        lastMonth () {
          this.starttime = moment().startOf('month').subtract('month', 1).format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment().endOf('month').subtract('month', 1).endOf('month').format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 过去一月
        recentMonth () {
          this.starttime = moment(new Date().getTime() - 3600 * 24 * 1000 * 30).format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 本季度
        currentQuarter () {
          this.starttime = moment().startOf('quarter').format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment().format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 上季度
        lastQuarter () {
          this.starttime = moment().quarter(moment().quarter() - 1).startOf('quarter').format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment().quarter(moment().quarter() - 1).endOf('quarter').format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 过去一季度
        recentQuarter () {
          this.starttime = moment(new Date().getTime() - 3600 * 24 * 1000 * 90).format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 今年
        currentYear () {
          this.starttime = moment().startOf('year').format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment().format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 上一年
        lastYear () {
          this.starttime = moment().startOf('year').subtract('year', 1).format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment().endOf('year').subtract('year', 1).endOf('year').format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        },
        // 近一年
        recentYear () {
          this.starttime = moment(new Date().getTime() - 3600 * 24 * 1000 * 365).format('YYYY-MM-DD HH:mm:ss')
          this.endtime = moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
          this.$emit('todayCurrent', this.starttime, this.endtime)
        }
    

    以上就是全部代码了 不过week里面如果要是从周日开始算一周的开始isoweek就要修改成week

    上面的代码还是非常冗余的 因为刚开始 也没接触过moment 仅供参考 后续会继续进行优化

    momentl链接http://momentjs.cn/docs/

    展开全文
  • vue时间插件 中datepicker.js 修改过支持年,年月,年月日的选择
  • 首先我们先把环境配置好 1.安装antd vue(这里就不介绍了) ...需求1:要求日期不可选择未来时间,日期范围不得超过半年 <template> <a-range-picker @change="onChange" @calendarChange="handleCale
  • antd vue时间选择器(年选择器

    千次阅读 2020-08-31 23:46:30
    antd vue时间选择器(年选择器) 最近项目中用到了antd vue,项目中的版本是1.5.2版本,在做日期选择器时发现只有日,周,月份选择器,独独缺少年份选择器,如果你的项目也是怕升级对整体影响太多,不妨试试下面这种...
  • <a-date-picker placeholder="开始... :defaultValue="moment(getCurrentData(), 'YYYY-MM-DD')" /> 二、js <script> // 首先格式化日期 function dateFormat(fmt, date) { let ret; const opt = {
  • valueFormat="YYYY-MM-DD HH:mm:ss
  • 下载 cnpm i moment --save 2.main.js中挂载 import moment from 'moment'//导入文件 Vue.prototype.$moment = moment;//赋值使用 3.组件中使用 this.$moment('Tue Mar 30 2021 17:44:12').format('HH:mm:ss') 4....
  • 代码 <template> <div> <a-range-picker show-time format="YYYY/MM/DD HH:mm:ss" :default-value="[this.moment(startTime, dateFormat),this.moment(endTime, d...
  • 表格中使用时间选择器 并使其数据回显 本人在项目开发中使用的框架为 Ant Design of Vue 因为这个组件在实际开发中用的是比较少的(一般都是用日期选择框) 肯定有人遇到和我一样的问题框架的api 不是很熟悉导致数据...
  • 效果图: 好了,开始贴代码 <el-form label-width="60px"> <el-form-item label="日期" style="text-align: left"> <el-date-picker ... placeholder="选择开始日期" ...
  • Ant Desugn Vue时间选择器,实习也有一段时间了,也遇到了一些问题,就想记录一下,自认为水平不是很高,欢迎批评指正 //标签 <a-date-picker :showToday="false" :allowClear="false" @change="setTime" @...
  • 之前在做一个手机端项目的时候,需要一个左右滑动(按周滑动)选择日期插件,而且当时这个项目没有用到Vue。当时又没有找到合适的第三方插件,就花了点时间用原生JavaScript写了出来,当时心中就想把它写成基于Vue的...
  • import moment from 'moment' <a-date-picker style="width:100%" v-decorator="['effectiveTime',{rules:[{required:true,message:'请选择账号有效期'}],initialValue:!model.effectiveTime?null:moment(model...
  • 首先时间格式化用到moment方法,需要在页面中引入moment组件 importmomentfrom'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode...
  • 最近在项目中使用antd组件库,使用多选日期选择器选择开始时间与结束时间的时候发现组件库中的默认value是[moment(startTime,'xxxxx'),moment(endTime,'xxxxx')]格式,而后台要求的是2个字段分别保存开始结束时间,...
  • vue + antd 时间选择器 设置默认时间

    千次阅读 2021-02-02 10:23:42
    vue + antd 时间选择器 <a-range-picker show-time ranges="{ Today: [moment(), moment()]}" :default-value="[moment(getCurrentData(), dateFormat), moment(getCurrentData(), dateFormat)]" :format=...
  • 需求是:后端返回一个时间段,需要限制只能选择时间段内的时间,可以选择返回的开始日期和结束日期 比如: 返回的时间是2021/02/03-2021/02/27,可以选择他们之间的时间、2021/02/03和2021/02/27的时间 代码如下:...
  • 最初效果图 ant-design-vue v3版本以前用moment.js,v3版本用ant-design-vue自带的dayjs
  • antd-vue日期选择器前言自定义日期选择范围选择范围小于等于今天选择范围小于今天选择范围大于等于今天选择范围只能是昨天、今天和后天 前言 自定义日期选择范围 API中有介绍如何用开始时间去限定结束时间的选择...
  • 先声明一下,本文讲的是基于bootstrap和VUE前端框架下的所使用的控件,效果如下: 1、安装daterangepicker控件 npm install --save daterangepicker 2、导入js和css import 'daterangepicker/daterangepicker'...
  • 基于vuemoment开发的时间组件 感谢jinzhe的项目vue-calendar,此项目是根据jinzhe的样式上完成 项目实现效果 单一时间 区间时间 运行方式: npm i加载依赖 npm run dev跑测试端口,届时浏览器会自动打开并进入页面 ...
  • 一、安装moment.js npm i moment -D 二、引入 import moment from 'moment' 三、用法 <template> <el-form> <el-form-item label="授权有效期" prop="" > <el-date-picker v-model="date" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,539
精华内容 615
关键字:

vue时间选择器moment

vue 订阅