calendar picker with only month and year | XM Community
Skip to main content

hi all, 

I want to provide a calendar picker for month and year only. 

I tried with the code below:

 

 

jQuery("#"+this.questionId+" .InputText").flatpickr({


    dateFormat: "m/Y"});
 

The outcome did give me just month and year, but the calendar that pops out has day. 

 

how to display only the month and year in the calendar picker?

 

Since you are using Flatpickr, you can use the Monthselect plugin. To give it a try, first add the below to the survey’s header:

<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/style.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/index.js"></script>

Then, add the below to the JavaScript of the Text Entry question in the OnReady section:

jQuery("#"+this.questionId+" .InputText").flatpickr({
disableMobile: "true",
plugins: :
new monthSelectPlugin({
shorthand: true,
dateFormat: "m/Y",
altFormat: "F Y",
theme: "material_blue"
})
]
});

For Mobile devices, to avoid using the phone's built-in calendar which would include days, disableMobile: true can be added to flatpickr, like in the above.


thanks @Tom_1842 


Leave a Reply