I want to create a flat picker in my Vue project, so that the users only input their birth month and birth day, but not birth year. Reason behind this is a lot of the customers refuse to provide their full birth date, but is more willing to provide only the month and day.

I know how to create a date picker on my Vue project, as such:

*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-ponent";

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

The above code will create a date picker. It has year, month and day. However, what can I do if I want to only ask the users for month and day?

Thank You!

I want to create a flat picker in my Vue project, so that the users only input their birth month and birth day, but not birth year. Reason behind this is a lot of the customers refuse to provide their full birth date, but is more willing to provide only the month and day.

I know how to create a date picker on my Vue project, as such:

*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-ponent";

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

The above code will create a date picker. It has year, month and day. However, what can I do if I want to only ask the users for month and day?

Thank You!

• javascript
• vue.js
• flatpickr

1 Answer 1

Changing date format to "m-d" should do the job.

 export default {
  ponents: {
    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";
        }
    }
    },
  },
}