How to change the layout of the Date Picker widget?

Hi Jotform team,

Your date picker widget greatly helps me for my next project except for 3 points. I suppose this could be resolved with css, but I'am really not an expert with that. Can you help me  ?

1) How can I change the layout of the pop up caldendar (I would like to replicate the size and the colors of the actual "Date reservation" widget wich is bigger, more readable, and more comprehensible (unselected date, selected date,...) see my test form beneath.

2) How can I change the pop up calendar, in a fix calendar (like the date reservation widget) I think it's more visual and more pleasant

3) Is it possible to improve a little bit the date picker widget an add the possibility to select more than one date (like in the date resevation) ? I need to offer the possibility to my users to select 3 dates (in certain dynamic range).

Thanks in advance for your precious help

Gerard

PS: If you want you can directly edit my form (it is a test form :-)

I tried copying the Date Reservation widget and here's what it looks like:

Here's the Custom CSS Code that I have injected to my cloned form:

div.calendar tr.days td {

    width: 3em;

    height: 2em;

    color: #1c97c9;

    text-align: right;

    font-weight: bold;

}

div.calendar tr.days td:hover:not(.unselectable), div.calendar td.button:hover:not(.unselectable) {

    background-color: #f9dfb3;

    cursor: pointer;

}

To inject a Custom CSS Code to your form, please follow this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

If you want a Larger Date Picker widget, please visit this link: https://widgets.jotform.com/app/large_date_picker

Here's the demo form: http://form.jotformpro.com/form/50072861762960

You can find more Date widget on this link: https://widgets.jotform.com/search/date

Unfortunately, the Date Picker tool does not offer the same functionality of other widgets. However, we can provide you a Custom CSS Code if you want to change the color, size, font, etc. 

I hope that helps. If you have questions, please contact us again

Hi John,

Thanks for your quick reaction, the large date picker is also great but it have less fonctionnalities then the usual date picker (desactived of the weekend days, creation of time limits,...). Can you provide me a custom css Code as you mention in your message, where I would like to able to change :

1) title of the months with 2 chars (like in the "date reservation" widget) + color and bold

2) The color of the non selectable dates + not bold

3) The colors of the blue vertical colomn + not bold

4) The selectable dates (in my case I define that only the monday, wednesday & friday would be selectionnable) should be more visible. I like the fact that the date in the reservation widget are in square area  with light background you directly see what you select wich ones are disabled. I would like to have something like that.

5) And finally the date selected by the user should in red with a light red background.

In fact the different states of the dates should be very clear for the user.

- disable dates

- dates selectable

- date choose by the user

Thanks for your help

Gerard

Hello Gerard,

Changing the name of the days to two character will be quite a task. I will try to work on your requirement and will get back to you on this soon. I will also ask my colleague to look into this.

Thank you!