Show Dropdown Year and Month

Hi,

Please, check the range of years, because if the range of years has no been defined correctly the datepicker is not displayed.

Could you send me the link to your webpage to check the form in detail, please?

Best regards.

Sure. Here it is https://ddc.websitedesign.ge/

Year Range [help?]: -10:+10

is it correct?

Here is the screenshot https://www.picz.ge/img/s3/1604/19/3/384dd83c6768.jpg

Hi,

The field is configured correctly, but the issue is caused because your webpage is loading multiple instances of the module: jquery datepicker.

Please, go to the settings page of the plugin, through the menu option: “Settings/Calculated Fields Form”, select the “Classic” option for the attribute: “Script load method”, and press the “Update” button.

Please, let me know the results.

Best regards.

Hi,

I did it and it works now but with the issue – because of white color I can’t see the months and years in dropdown menu.

Screenshot https://www.picz.ge/img/s1/1604/19/5/5bbf7de87368.jpg

Hi,

The issue with the text color is caused by the theme active in your website, specifically in the style definition:

.ui-datepicker .ui-datepicker-title {
margin: 0 2.3em;
line-height: 1.8em;
text-align: center;
color: #fff;
font-weight: 700;
font-size: 16px;
}

included in the file:

https://ddc.websitedesign.ge/wp-content/themes/inspiry-medicalpress/css/datepicker.css

Please, follow the steps below to correct the issue without modify the theme’s files:

Insert in the form a “HTML Content” field, and enter as the field’s content, the piece of code:

<style>
.ui-datepicker-header * {
    color: #000 !important;
}
.ui-widget-content .ui-icon {
    background-image: url(https://ddc.websitedesign.ge/wp-content/plugins/calculated-fields-form/css/cupertino/images/ui-icons_72a7cf_256x240.png) !important;
}
</style>

and that’s all.
Best regards.

Great. Thanks.

Just noticed one more issue – day numbers are white after mouse over.

Hi,

The issue is caused by the style’s definition:

.ui-datepicker td a:hover{
    color: #fff;
}

in the theme’s file:

https://ddc.websitedesign.ge/wp-content/themes/inspiry-medicalpress/css/datepicker.css

You should add to the previous field the style definition:

.ui-datepicker td a:hover{
    color: #2779aa !important;
}

Remember all the styles should be defined into the pair of tags: <style></style>

Best regards.