Datepicker: Fix the navigation buttons

Hi, my calendar widget layout has changed for some reason. The arrows to navigate between the months are all on one side making a big space on the top of the calendar. Can they be changed to display evenly across the top of the calendar? And also, is it possible to get rid of the arrows to navigate between the years, and only display the arrows for the months? Please help me out if that's possible, and what CSS code I would need. Also, if possible, to eliminate the "Today" button.

Hi Clark,

Thanks for reaching out to Jotform Support. Please inject the provided CSS code.

/*Fix the Date Picker calendar buttons and removed today - 17303531*/

button.button.todayButton {

    display: none !important;

}



div.calendar .button {

    color: #f9621a !important;

}



tr {

    display: flex !important;

    justify-content: space-around !important;

}



div#calendar_46 > table > thead > tr:nth-child(3) {

    background: #ddd !important;

}

/*Code ends here*/

Here's how to do it:

1. In Form Builder, on the right side of the screen, click on the Paint Roller icon.

2. On the right panel, go to Styles.

3. Scroll down to Inject Custom CSS.

4. Paste the provided CSS code.

Give it a try and let us know how it goes.

Yes that spread the buttons out and also eliminated the Today button! Could I also eliminate the Year (<< and >>) buttons? I have people accidentally using those to navigate to the next month and then selecting the wrong date.

Hi Clark,

Please inject the provided CSS code to remove the year buttons.

/*Remove the navigation button for Year on the Date Picker form element - 17303531*/

div#calendar_46 > table > thead > tr:nth-child(2) > button:nth-child(1) {

    display: none !important;

}



div#calendar_46 > table > thead > tr:nth-child(2) > button:nth-child(5) {

    display: none !important;

}

/*Code ends here*/

Give it a try and let us know how it goes.

That worked, thanks!