Select Month and Day only from UI .How to hide Year from DateTimePicker- Tempus Dominus Datetime Picker Bootstrap

Question

I have a case there I want to select Month and Day from the UI to create recurring task.No need to select a year.28 days should be displayed in February.I am using Bootsrap for building the UI.I am initially thought of considering below option for implementing the same

1. Create one Dropdown where All the Months will be displayed (ie Jan,Feb,Mar..Dec)

2. Create another dropdown for loading Days.(1,2...31). This dropdown should be reloaded based on Month selection.

Is it possible to do the same using Tempus-Dominus Datetime picker ?? https://getdatepicker.com/5-4/

I have created sample fiddle .Where i want display similar like (Mar - 31) after selecting. Year should not be there in DateTimepicker.(By default consider Year as 2022.But it should not be displayed anywhere in Datetimepicker.)

      $('#datetimepicker1').datetimepicker({

       format: 'MM-DD'
    });

https://jsfiddle.net/8ck1tanb/1/

Can anyone suggest better user friendly design/approach for implementing this functionality. It will be more helpful if you can share sample code if it is already implemented.

Answer 1

You can make use of the tempus-dominus-datetimepicker events to split the month and the year and show only the month.

Here is an example fiddle.

   $('#datetimepicker1').on('show.datetimepicker update.datetimepicker change.datetimepicker',function(){
     if(typeof $(this).find('.picker-switch').html() !== "undefined"){
       $(this).find('.picker-switch').html($(this).find('.picker-switch').html().split(" ")[0]);
     };    
   });

• show.datetimepicker is triggered when the popup opens.
• update.datetimepicker is triggered when you use the 'next' 'previous' arrows
• change.datetimepicker is triggered when you select a date

UPDATE

This fiddle has the 29th of Febuary disabled for the next 3 leap years You can simply disable specific dates with the disabledDates option.

$('#datetimepicker1').datetimepicker({
    disabledDates: [new Date('2024-02-29'),new Date('2028-02-29'),new Date('2032-02-29')]
});