【问题标题】:VueJS - How to use flatpickr to only choose month and day, but not yearVueJS - 如何使用 flatpickr 只选择月份和日期,而不是年份
【发布时间】:2022-01-15 10:52:23
【问题描述】:

我想在我的 Vue 项目中创建一个平面选择器,以便用户只输入他们的出生月份和出生日期,而不是出生年份。这背后的原因是很多客户拒绝提供他们的完整出生日期,但更愿意只提供月份和日期。

我知道如何在我的 Vue 项目中创建日期选择器,例如:

*CustomerModal.vue*
<template>
  ...
  
          <flat-picker
            :config="dpconfig"
            class="form-control datepicker"
            v-model="end_date"
            :placeholder="$t('End Date')"
            ref="End Date"
            name="end_date"
          >
          </flat-picker>

...
</template>

import flatPicker from "vue-flatpickr-component";

export default {
  components: {
    flatPicker,
  },
  data: {
    dpconfig: {
      wrap: true,
      altInput: true,
      dateFormat: "Y-m-d",
      altFormat: "Y-m-d",
      ariaDateFormat: "Y-m-d",
    },
  },

上面的代码将创建一个日期选择器。它有年、月和日。但是,如果我只想询问用户月份和日期,我该怎么办?

谢谢!

【问题讨论】:

    标签: javascript vue.js flatpickr


    【解决方案1】:

    将日期格式更改为 "m-d" 应该可以完成这项工作。

     export default {
      components: {
        flatPicker,
      },
      data: {
        dpconfig: {
          wrap: true,
          altInput: true,
          dateFormat: "m-d",
          altFormat: "m-d",
          ariaDateFormat: "m-d",
          onOpen : function(event){
          let instances = document.getElementsByClassName("flatpickr-month");
          for(let i= 0; i< instances.length; i+=1)
            {
              instances[i].style.display="none";
            }
        }
        },
      },
    }
    
    

    【讨论】:

    • 感谢 sazzad 的建议!现在,当用户单击平面选择框时,会下拉一个带有年、月和日选择的日历。用户选择选定日期后,输出为 MM-DD 而不是 YYYY-MM-DD。但是,我希望这样当用户单击平面选择框时,日历将没有年份选项,而只有月份和日期。
    • 不幸的是,配置中没有隐藏年份选择的选项。您可以使用onOpen 事件处理程序来隐藏具有flatpickr-month 类的年份选择元素使用样式属性。
    • 再次感谢您,萨扎德!我不确定您的方法是否对应于 this 。我只是想不出如何使用 css 过滤掉年份选项。任何建议表示赞赏!
    • @FrederickW 我已经更新了答案。请立即查看。
    • 在我检查的版本中,年份选择包含在具有 numInputWrapper 类的 div 中。如果您只想隐藏年份选择,则可以使用此类名称而不是 flatpickr-month
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-06
    • 1970-01-01
    • 1970-01-01
    • 2017-03-25
    • 1970-01-01
    • 2021-12-15
    相关资源
    最近更新 更多