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-component";
export default {
components: {
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!
Changing date format to "m-d" should do the job.
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";
}
}
},
},
}