精华内容
下载资源
问答
  • 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实现了快捷选择时间日期,记录下来以便后续继续使用 #####示例 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/

    展开全文
  • 我就废话不多说了,大家还是直接看代码吧~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

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

    首先我们先把环境配置好
    1.安装antd vue(这里就不介绍了)
    2.安装moment.js
    步骤:
    (1)npm i moment
    (2)

    //main.js
    import moment from 'moment';
    Vue.prototype.$moment = moment;
    

    需求1:要求日期不可选择未来时间,日期范围不得超过半年

    <template>
     	<a-range-picker @change="onChange" @calendarChange="handleCalendarChange" :disabledDate="disabledDate">
     	</a-range-picker>
    </template>
    <script>
    	export default {
    		data(){
    			return{
    				search{
    					startDate:'',
    					endDate:''
    				},
    				chooseDate:''
    			}
    		},
    		methods:{
    			//日期范围发生变化的回调
    			onChange(date,dateString){
    				this.search.startDate = dateString[0];
    				this.search.endDate= dateString[1];
    			},
    			//待选日期发生变化的回调(根据选择的日期,来控制不可选,这里仅获取选择的日期)
    			handleCalendarChange(value,mode){
    				//用moment进行格式转换
    				this.chooseDate = this.$moment(value[0]._d).format('YYYY-MM-DD');
    			},
    			//禁止选择的日期(未来日期不可选,半年之前的不可选)
    			disabledDate(current){
    				const chooseDate = this.chooseDate;
    				return current && current >= this.$moment().endOf('day') || this.$moment(new Date(chooseDate)).subtract(6,'months')
    			}
    		}
    	}
    </script>
    

    需求2:要求日期默认为最近一周,不可选择未来日期

    <template>
      <a-form-item label="内容发布时间">
        <div class="date">
            <a-range-picker
             @change="onChangeDate"
             :default-value="[searchParams.pubStartDate,searchParams.pubEndDate]"
             :disabledDate="disabledDate"
           	></a-range-picker>
         </div>
      </a-form-item>
    </template>
    <script>
    	export default{
    		data(){
    			searchParams:{
    				pubStartDate:null,
    				pubEndDate:null
    			}
    		},
    		methods:{
    			onChangeDate (date, dateString) {
                	this.searchParams.pubStartDate = dateString[0];
                	this.searchParams.pubEndDate = dateString[1];
            	},
            	 // 禁止选择的日期
            	disabledDate (current) {
                	return current && current >= this.$moment().endOf('day');
            	},
    		},
    		created(){
    			this.searchParams.pubStartDate = this.$moment().subtract('days', 6).format('YYYY-MM-DD');
    			this.searchParams.pubEndDate = this.$moment().format('YYYY-MM-DD');
    		}
    	}
    </script>
    
    展开全文
  • 表格中使用时间选择器 并使其数据回显 本人在项目开发中使用的框架为 Ant Design of Vue 因为这个组件在实际开发中用的是比较少的(一般都是用日期选择框) 肯定有人遇到和我一样的问题框架的api 不是很熟悉导致数据...
  • <a-date-picker placeholder="开始... :defaultValue="moment(getCurrentData(), 'YYYY-MM-DD')" /> 二、js <script> // 首先格式化日期 function dateFormat(fmt, date) { let ret; const opt = {
  • VUE时间选择器a-range-picker使用,并且动态绑定默认值时间选择器 时间选择器 <a-range-picker v-if="form.dateFrom" v-model="form.invalidTime" :default-value="[moment(`${form.dateFrom.substring(0,10)}`...
  • 代码 <template> <div> <a-range-picker show-time format="YYYY/MM/DD HH:mm:ss" :default-value="[this.moment(startTime, dateFormat),this.moment(endTime, d...
  • 下载moment.js :npm install moment --save//或者yarn add moment --savemain.js 引入:// 导入时间插件momentjsimport moment from 'moment' // 定义全局时间格式过滤器Vue.filter('dateFormat', function ...
  • vue + antd 时间选择器 <a-range-picker show-time ranges="{ Today: [moment(), moment()]}" :default-value="[moment(getCurrentData(), dateFormat), moment(getCurrentData(), dateFormat)]" :format=...
  • import Vue from “vue”; import { DatePicker } from ‘ant-design-vue’; import ‘ant-design-vue/dist/antd.css’; //设置中文 import moment from ‘moment’; import ‘moment/locale/zh-cn’ moment.locale...
  • 最近在项目中使用antd组件库,使用多选日期选择器选择开始时间与结束时间的时候发现组件库中的默认value是[moment(startTime,'xxxxx'),moment(endTime,'xxxxx')]格式,而后台要求的是2个字段分别保存开始结束时间,...
  • 在element UI中复制一个时间日期选择器组件默认 v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">2. 在官方文档中找到发现可以自动以...
  • 首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from ‘moment’ 结构代码: <a> triggerNode[removed] format=YYYY-MM-DD HH:mm:ss v-decorator=[ 'pushtime', { rules: [{ ...
  • 首先时间格式化用到moment方法,需要在页面中引入moment组件 importmomentfrom'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode...
  • 在使用日期选择器前需要先引入momnet: import moment from "moment"; import "moment/locale/zh-cn" 在引入后使用选择器: <a-date-picker format="YYYY-MM-DD HH:mm:ss" v-decorator="['time',{rules: ...
  • warning.js?2149:7 Warning: [antdv: TimePicker] value provides invalidate ...将v-model中的时间转化为moment形式 <template> <div id="app"> <a-time-picker v-model="endTime" format="HH:mm" @
  • vue element-ui 组件开发大大提高了我们的效率,但有时候并不能满足我们的需求,例如时间,日期组件;   element-ui 日期返回的格式是这样的,看下图:    但我们要的是另一个格式 , 如下图:    怎么...
  • vue-moment的使用

    千次阅读 2019-10-22 14:33:13
    用了element中的data-timer日期时间选择器。然后出来的value的格式跟我想要的格式不一样,所以需要转换,这个时候为了方便,可以用moment插件。 1 先下载 npm install moment 2 引入 const moment = require('...
  • ant-design vue时间选择框datepicker向后台传输错误 最近在使用jeecgboot项目时,需要有时间查询条件,引用ant-design组件中的时间组件,但向后台提交是,抛出参数类型错误异常; 通过谷歌浏览F12发现提交的时间格式...
  • 问题: 表单中使用DatePicker发现在保存时,时间比实际时间永远少一天,一开始以为是后端配置的问题,检查配置没有问题,于是开始...最终解决:使用Moment.js格式化插件,vuecli引用具体如下: 安装: npm install mo
  • vue+element项目中,日期选择器如何自动获取当前年份;...顺便记录下Element-UI-时间选择器的另一个踩坑,如果没有规定获取时间的格式,则返回的时间则为 添加value-format=“yyyy” 才能返回4位数的年...
  • 如题 前三种情况适用在添加表单的情况 【VUE】解决vue时间控件中获取时间少一天的问题汇总 修改表单时不修改日期的话,就无法触发on-change 在提交时引用moment赋值
  • 我们要的是另一个格式 , 如下图:    怎么解决?  可以用一个插件 moment.js 解决 ... npm install moment --save ... 2:引用,我这里是全局引用,并用原型链把方法挂到了vue上面,看下图:  ...
  • 本来想将时间选择器的时间format成8位字符串型,如20200307,但是format之后范围选择功能不能正常使用,最后使用moment插件读取八位字符串时间得以解决 初始源代码参考至...
  • 需要注意点: v-model 与 default-value 绑定值与默认值都必须是moment对象。否则控制台会报错 html部分 <div class="query-date left marginright"> <span class="textboxstyle">开始时间:</span&...
  • vue + element-ui 在表格中显示时间时,是以下面这种方式显示的 处理方式我们使用 moment 格式化日期 // vue项目 + element-ui + 时间戳格式转化问题的解决 // 安装moment第三方组件 引入moment组件 // 在元素中...

空空如也

空空如也

1 2
收藏数 39
精华内容 15
关键字:

vue时间选择器moment

vue 订阅