精华内容
下载资源
问答
  • ant design vue 日期选择器
    千次阅读
    2020-05-11 19:20:11

    a-date-picker时间选择器

    Ant Desugn Vue的时间选择器,也遇到了一些问题,就想记录一下,自认为水平不是很高,欢迎批评指正

    //标签
    <a-date-picker
          :showToday="false"
          :allowClear="false"
          @change="setTime"
          @openChange="openChange"
          :value="Survey.endTime"
          format="YYYY-MM-DD HH:mm:ss"
          :disabledDate="disabledDate"
          :disabledTime="disabledDateTime"
          :showTime="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
        />
    
    data() {
        return {
          Survey: {},//存放截止时间
          disabledTime: {
            hour: '',//存放被ban掉的时
            minute: ''//存放被ban掉的分
          }
        }
      },
    
    methods: {
        OpenModel(record) {
          this.Survey = { ...record, endTime: moment(record.endTime) }//上从别的地方传过来的默认值
        },
        setTime(data, datastring) {
          //若有清除按钮需要加入判断
          this.resEndtimeDis()
          this.Survey = { ...this.Survey, endTime: data }
          let time = data.format('YYYY/MM/DD HH mm').split(' ')//切割存放的年月日,时,分      
          var date = new Date()//获取当前时间
          if (moment(time[0]).valueOf() == moment(date.toLocaleDateString()).valueOf()) {
            //年月日相同增加限制条件
            this.disabledTime.hour = date.getHours()//ban掉 时
            if (date.getHours() < time[1]) {
              //判断选择的是否与当前时间是同一小时,如果不是则不限制分钟
              this.disabledTime.minute = ''//解除分的禁止
            } else {
              this.disabledTime.minute = date.getMinutes()//ban掉 分
            }
          } else {
            //日期不同解除所有限制条件
            this.resEndtimeDis()
          }
        },
        openChange(status) {
            if(status){
                this.setTime(this.Survey.endTime,'')
            }
            //上保险,当选择到了不可选择的时间将会默认选中当日0点
          if (new Date(this.Survey.endTime) <= new Date()) {
            this.Survey.endTime = moment(
              new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
            )
          }
        },
        range(start, end) {
          const result = []
          for (let i = start; i < end; i++) {
            result.push(i)
          }
          return result
        },
        disabledDate(current) {
          return current < moment().subtract(0, 'day')//今天之前的年月日不可选,不包括今天
        },
        disabledDateTime() {
          return {
            disabledHours: () => this.range(0, 24).splice(0, this.disabledTime.hour),//ban小时
            disabledMinutes: () => this.range(0, this.disabledTime.minute)//ban分
          }
        },
        resEndtimeDis() {//解除限制
          this.disabledTime = {
            hour: '',
            minute: ''
          }
        }
      }
    
    更多相关内容
  • Ant Desugn Vue的时间选择器,实习也有一段时间了,也遇到了一些问题,就想记录一下,自认为水平不是很高,欢迎批评指正 //标签 data() { return { Survey: {},//存放截止时间 disabledTime: { hour: '',//存放...
  • 按照ant design vue官方说明,使用日期选择器需要在入口文件(main.js)全局设置语言: // 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/...
  • "width: 400px" v-model:value="shijian" :ranges="ranges" :disabled-date="disabledDate" :disabled-time="disabledRangeTime" :show-time="{ hideDisabledOptions: true, defaultValue: [ moment('00:00:00', 'HH...
  • 项目需求:form表单提交日期选择器,开始日期默认初始值为当天,截止日期默认初始值为本月最后一天,且不可选择当日之前的时间,提交表单需要校验。 // 正确代码 <template> <a-form :form="form"> &...

    项目需求:form表单提交日期选择器,开始日期默认初始值为当天,截止日期默认初始值为本月最后一天,且不可选择当日之前的时间,提交表单需要校验。

    // 正确代码
    // date-picker在表单中默认初始值要用initialValue赋值,不要使用defaultValue,否则表单提交获取不到默认值
    <template>
    	<a-form :form="form" @submit="handleSubmit">
    		<a-form-item 
    			label="开始时间" 
    			:labelCol="labelCol" 
    			:wrapperCol="wrapperCol" >
    		          <a-date-picker
    		            :disabled-date="disabledEndDate"
    		            v-decorator="[ 'startTime', 
    		            { 
    		            initialValue: taskStartTime,
    		            rules: [{ required: true, message: '请选择开始时间'}]
    		            } 
    		           ]"
    		          >
    		          </a-date-picker>
    		</a-form-item>
    		<a-form-item 
    			label="截止时间" 
    			:labelCol="labelCol" 
    			:wrapperCol="wrapperCol" >
    		     <a-date-picker
    			       :disabled-date="disabledEndDate"
    			       v-decorator="[ 
    			       'endTime', 
    			       {
    			       	initialValue: monthDate,  // 初始值通过initialValue赋值
    			       	rules: [{ required: true, message: '请选择截止时间'}], 
    			       } 
    			      ]"
    		          >
    		    	</a-date-picker>
    		</a-form-item>
    		<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
    	      <a-button type="primary" @click="handleSubmit">
    	        提交
    	      </a-button>
    	    </a-form-item>
    	</form>
    </template>
    import moment from 'moment'
    export default {
    	data(){
    		return {
    			form: this.$form.createForm(this, { name: 'coordinated' }),
    			labelCol: {
    		        xs: { span: 24 },
    		        sm: { span: 5 }
    		     },
    		    wrapperCol: {
    		        xs: { span: 24 },
    		        sm: { span: 16 }
    	      	},
    		    taskStartTime: moment(new Date()).format('YYYY-MM-DD'), //开始日期当天
    		    monthDate: '', // 截止日期
    		},
    		created(){
    			this.getmonthDate()
    		},
    		methods:{
    			getmonthDate () {
    		      // var monthDate = ''
    		      var now = new Date() // 当前日期
    		      var nowMonth = now.getMonth() // 当前月
    		      var nowYear = now.getFullYear() // 当前年
    		      // 本月的开始时间
    		      // var monthStartDate = new Date(nowYear, nowMonth, 1)
    		      // var yy = monthStartDate.getFullYear() + '-'
    		      // var mm =
    		      //   (monthStartDate.getMonth() + 1 < 10
    		      //     ? '0' + (monthStartDate.getMonth() + 1)
    		      //     : monthStartDate.getMonth() + 1) + '-'
    		      // var dd =
    		      //   monthStartDate.getDate() < 10
    		      //     ? '0' + monthStartDate.getDate()
    		      //     : monthStartDate.getDate()
    		      // 本月的结束时间
    		      var monthEndDate = new Date(nowYear, nowMonth + 1, 0)
    		      var YY = monthEndDate.getFullYear() + '-'
    		      var MM =
    		        (monthEndDate.getMonth() + 1 < 10
    		          ? '0' + (monthEndDate.getMonth() + 1)
    		          : monthEndDate.getMonth() + 1) + '-'
    		      var DD =
    		        monthEndDate.getDate() < 10
    		          ? '0' + monthEndDate.getDate()
    		          : monthEndDate.getDate()
    		      // monthDate.start_day = yy + mm + dd
    		      this.monthDate = YY + MM + DD    // 本月最后一天
    		      // return monthDate
    		      console.log(this.monthDate)
    		    },
    		    // 禁止选择当天之前的日期 不包含当天
    		    disabledEndDate (current) {
    		        return current && current < moment().subtract(1, 'days') // 当天之前的不可选,不包括当天
    		      // return current && current < moment().endOf(‘day') 当天之前的不可选,包括当天
    		    },
    		    // 表单提交
    		    handleSubmit(e) {
    		      e.preventDefault();
    		      this.form.validateFields((err, values) => {
    		        if (!err) {
    		          console.log('Received values of form: ', values);
    		        }
    		      });
    		    },
    		}
    	}
    
    展开全文
  • :disabled-date=“disabledDate” //不可选择日期 :disabled-time=“disabledRangeTime” //不可选择的时间 :show-time="{ //增加时间选择功能 hideDisabledOptions: true, //隐藏禁止选择的选

    <a-range-picker

    style=“width: 400px”

    v-model:value=“shijian”

    :ranges=“ranges” //预设时间范围快捷选择,会在左边出现小蓝框

    :disabled-date=“disabledDate” //不可选择的日期

    :disabled-time=“disabledRangeTime” //不可选择的时间

    :show-time="{ //增加时间选择功能

    hideDisabledOptions: true, //隐藏禁止选择的选项

    defaultValue: [ //默认时间

    moment(‘00:00:00’, ‘HH:mm:ss’),

    moment(‘00:00:00’, ‘HH:mm:ss’),

    ],

    }"

    //设置日期格式,为数组时支持多格式匹配,展示以第一个为准,这个格式只作用在了前端日期显示上

    format=“YYYY-MM-DD HH:mm:ss”

    @change=“shijianobj” //时间发生变化的回调

    />

    从网上查了好多资料,说是地区的时差导致的,那就应该是把😂,我这相差16小时,导致传给后端的数据不准确

    a **《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源	徽信搜索公众号【编程进阶路】** uto-orient,1

    上面双向绑定的shijian打印出来是这个

    auto-orient,1

    展开全文
  • mode="year"placeholder="请选择年份"format=‘YYYY‘v-model="form.yearQuarter"style="width:100%":open=‘yearShowOne‘@openChange="openChangeOne"@panelChange="panelChangeOne"/>年度打开关闭状态,true为...

    20210327221549680418.png

    mode="year"

    placeholder="请选择年份"

    format=‘YYYY‘

    v-model="form.yearQuarter"

    style="width:100%"

    :open=‘yearShowOne‘

    @openChange="openChangeOne"

    @panelChange="panelChangeOne"/>

    年度打开关闭状态,true为打开,false为关闭

    yearShowOne: false

    methods: {

    // 弹出日历和关闭日历的回调

    openChangeOne(status) {

    if (status){

    this.yearShowOne = true

    }

    },

    // 得到年份选择器的值

    panelChangeOne(value) {

    this.form.yearQuarter = value;

    this.yearShowOne = false;

    }

    }

    原文:https://www.cnblogs.com/theblogs/p/14586357.html

    展开全文
  • 在使用日期选择器前需要先引入momnet: import moment from "moment"; import "moment/locale/zh-cn" 在引入后使用选择器: <a-date-picker format="YYYY-MM-DD HH:mm:ss" v-decorator="['time',{rules: ...
  • 这是一个日期选择器 <a-range-picker style="width: 400px" v-model:value="shijian" :ranges="ranges" //预设时间范围快捷选择,会在左边出现小蓝框 :disabled-date="disabledDate" //不可选择的日期 :...
  • 首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from ‘moment’ 结构代码: <a> triggerNode[removed] format=YYYY-MM-DD HH:mm:ss v-decorator=[ 'pushtime', ...
  • PC端项目前端技术栈:Vue+AntVue 项目UI框架选用阿里的AntVue,这里总结一下该框架下日期选择框的一些注意事项 首先介绍的就是该框架组件v-model绑定的值并不是显示上的YYYY-MM-DD格式,而是moment类型数据,所以...
  • 大家或许都用过日期选择中的日期绑定,但是ant design中该怎么绑定呢 1,引入组件: <a-date-picker v-decorator="['birth', {rules: [{required: true, message: '请选择出生日期'}]}]" /> 以上代码是结合...
  • 发送时间需要限制在当前时间分钟之后,比如:当前时间是2022年6月7日12:00,那么时间选择器可选的时间是:在2022年6月7日12:00 之后的。
  • 按照ant design vue官方说明,使用日期选择器需要在入口文件(main.js)全局设置语言: // 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment...
  • 对And design vue 的DataPicker日期选择器的限制选择日期做一个学习笔记
  • 这里写自定义目录标题欢迎使用Markdown编辑新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • 最初效果图 ant-design-vue v3版本以前用moment.js,v3版本用ant-design-vue自带的dayjs
  • 简单的日期选择器范围选择 日期选择 先看效果: 这个是初始化时间时展示的样子,每次展示的是当前月份1号到目前日期。 实现部分: 这一段实现的效果是初始化时设置当前月份一号到目前的日期,然后在重置时...
  • vue Ant Design a-range-picker自定义时间 要实现的效果 ,选择时间时,需要添加 昨天,今天,上周,本月,本季度等筛选条件 步骤 自定义 rangeDate.js import moment from 'moment' const rangeDate = { data()...
  • ant design vue 年份选择器

    千次阅读 2021-09-01 16:12:43
    因为ant design vue 里面没有原生的年份选择器,需要使用date-picker去改造 html: <a-date-picker mode="year" v-decorator="['year']" placeholder="请输入年份" format="YYYY" style="width: 200px" ...
  • https://blog.csdn.net/qq_41810005/article/details/107157453
  • vue-ant-design2.0,日期选择器显示utc时间,2022/5/31
  • 本人在项目开发中使用的框架为 Ant Design of Vue 因为这个组件在实际开发中用的是比较少的(一般都是用日期选择框) 肯定有人遇到和我一样的问题框架的api 不是很熟悉导致数据不能回显 两个重要属性 format 数据...
  • import moment from 'moment' ... v-decorator="['effectiveTime',{rules:[{required:true,message:'请选择账号有效期'}],initialValue:!model.effectiveTime?null:moment(model.effectiveTime,dateFormat)}]
  • 在做项目的时候,碰到了一个问题,使用日期选择器的change事件时,发现只返回两个参数 @change = onchange ,在打印时,只会出现这个两个参数 但是,项目上的是使用数组渲染出多个日期选择器的,如果改变其中一个,...
  • Ant Design Vue DatePicker日期选择框用法包括浏览器cdn引入js及设置中文的用法本文讲解Ant Design Vue DatePicker日期选择框用法包括浏览器cdn引入js的用法。如果你是使用node.js webpack开发,那么简单阅读即可,...
  • Ant design vue 日期选择日期禁用 <a-date-picker :disabledDate="getDisabledDate" v-model="returnForm.beginDate" format="YYYY-MM-DD" /> 今天之前的年月日不可选,不包括今天 methods: { ...
  • 其中,showTime.defaultValue是设置的默认展示时间,disabledDate为禁用日期,disabledDataTime为禁用时间,详细属性说明可查阅官方文档 下面是方法代码: methods: { moment, onChange (value, date...
  • 我就废话不多说了,大家还是直接看代码吧~ show-time format="YYYY/MM/... 以上这篇ant-design-vue 时间选择器赋值默认时间的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

空空如也

空空如也

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

ant design vue 日期选择器