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

calendar picker with only month and year

  • April 25, 2024
  • 2 replies
  • 624 views

Forum|alt.badge.img+1

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?

 

Best answer by Tom_1842

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.

View original

2 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • 876 replies
  • Answer
  • April 25, 2024

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.


Forum|alt.badge.img+1
  • Author
  • Level 2 ●●
  • 8 replies
  • April 26, 2024

thanks @Tom_1842 


Leave a Reply