antd 日期选择框增加季度预设范围

这篇具有很好参考价值的文章主要介绍了antd 日期选择框增加季度预设范围。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

测试同学说想要有个季度的预设选择框,方便快速选择季度的开始和结束日期。

antd 的rangepicker是支持预设的

日期选择框 DatePicker - Ant Design

实现方法很简单,按照官网示例用moment初始化一下即可

获取当前一季度的开始日期时间: moment().quarter(1).startOf('quarter')

const seasons = {};
Array(4).fill(1).map((_,index)=>{
  const i = index+1;
  seasons[`Q${i}`] = [moment().quarter(i).startOf('quarter'), moment().quarter(i).endOf('quarter')]
})

组件使用:

<RangePicker
      ranges={seasons} />

效果:

antd 日期选择框增加季度预设范围,烂笔头,前端,javascript,开发语言文章来源地址https://www.toymoban.com/news/detail-822914.html

到了这里,关于antd 日期选择框增加季度预设范围的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui 时间日期选择器限制选择范围

    组件代码 场景1:设置选择今天及今天之后的日期 情景2: 设置选择今天以及今天以前的日期 情景3: 设置选择三个月之内到今天的日期 情景4: 设置选择最大范围为30天

    2024年02月12日
    浏览(35)
  • 记录--设计一个可选择不连续的时间范围的日期选择器

    npm包:sta-datepicker 效果图  普通的时间选择器要么只能单选,要么只能选范围,不可以随意选择若干个时间,同时大多数现成的时间选择器选择结束会收起来,很不方便。现在需求如下 1、可以自己控制展开收起 2、可以选择不连续的多个时间范围的日期 3、可以批量选中日期

    2024年02月09日
    浏览(32)
  • Element UI DatePicker 日期范围选择动态设置禁选日期

    今天在工作时,后端提出了一个DatePicker日期范围组件的一个问题 用图描述大概就是选择开始日期 13 号后,只能选择 13 号前一周和后一周的日期,其他日期处于禁止选择状态。 先去看了下 element 的相关文档,找到了一个 当前时间日期选择器特有的选项picker-options, 传送门

    2024年02月12日
    浏览(36)
  • element ui datePick时间日期一段时间,限制选择日期的范围

     时间戳,一天 想限制只能选日期间隔为一年,联合选择器样式不好改,使用俩单独的 有两个办法限制 1.一个在外层使用form通过表单验证控制,出现错误提示(由于是两个单独的组件,触发验证的方式又为单个失去焦点,所以俩组件无法实时更新) 2.用datepick自带的属性di

    2024年02月05日
    浏览(44)
  • element-ui 日期选择器选择年份,拼接月日,并控制范围

    element-ui 日期选择器选择年份,拼接月日,并控制范围。 type=\\\"year\\\",控制下拉选项为年份 format=\\\"yyyy-MM-dd\\\"、value-format=\\\"yyyy-MM-dd\\\",控制文字显示为年月日 此时选中年份会显示选中年的第一天【2023-01-01】,如果有规定月-日的需求,可以在选中事件里重新赋值。 :picker-options=\\\"pick

    2024年02月08日
    浏览(56)
  • vue element-ui年份范围选择器,年日期插件,可选日期区间等

    可以禁止选择未来日期,以及可选的日期范围控制,代码在最下面。 直接上代码: 先来一个不禁止选择的示例 yearDate.js文件 我是禁止了未来日期,时间跨度,只能选3年, 代码如下: 参考地址:https://www.jianshu.com/p/44584a4a4953

    2024年02月11日
    浏览(47)
  • element ui的日期选择器动态设定年份,并默认显示在该年份范围的日期时间

    选中某个年份,让日期选择器只能选择该年份内的时间,并且默认显示该年份的时间(由于日期选择器默认显示为当前时间,所以需要跳转到选择的年份) 例:年份选择了2022年,那么日期选择也相应显示到2022年,对月日没有要求,月日默认显示为当前日期的月日,只是年份变

    2024年02月13日
    浏览(46)
  • 1、关于Element-UI日期范围选择器控件添加清空、确定按钮

    1、日期控件原来样式 现在我们需要在日期控件右下角添加按钮(如下方示例) 2、实现方式

    2024年02月16日
    浏览(45)
  • ElementPlus DateTimePicker日期时间选择器限制可选时间范围(精确时分秒)

    ElementPlus DateTimePicker日期时间选择器 当我们使用日期时间选择器时,可能会有需求只能选择 今日之前 或者 今日之后 ,又或者 一周内 , 一个月内 的时间,而其他的时间应该禁止被用户选择。 直接看文档: 我没通过设置disabled-date属性来自定义禁用的时间。 只能选择今天之

    2024年02月02日
    浏览(41)
  • elementPlus使用 el-date-picker ,限制选择的开始日期和结束日期的差在7天范围内。

    在使用el-date-picker时,想要以下需求: 选中第一个日期后(如:12月15日),第二个日期=第一个日期-7,或者第二个日期=第一个日期+7,即第二个日期选择范围如图:(前后7天可选) 只能选择今天以及今天之前的日期。 或者使用dayJs, disabledDate 可以改为

    2024年01月19日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包