This plugin provides the capability to restrict the available dates within your Gravity Forms Datepicker fields. It empowers you with precise control over the selectable date range through a user-friendly interface, simplifying the management process.
Add a Date field to your form.
Open the field’s settings, navigate to the Restrict Dates section, and check enable restrict dates options.
Options will open to configure. Just configure it according to your requirements and save it. And it's ready to use.
For the Minimum Date selection, you have two options: Current Date (today’s date) or a Specific Date.
If you choose Specific Date, a new date picker will appear, allowing you to select a date. All previous dates will be unavailable for selection.
If you choose Current Date, three additional fields will appear:
Plus (+) / Minus (-), Optional value, Day/Month/Year
For example, if today is September 1st and you want to select September 3rd, you would choose Current Date -> Plus (+) -> 2 -> Day
For the Maximum Date selection, you have two options: Current Date (today’s date) or a Specific Date.
If you choose Specific Date, a new date picker will appear, allowing you to select a date. All previous dates will be unavailable for selection.
If you choose Current Date, three additional fields will appear:
Plus (+) / Minus (-), Optional value, Day/Month/Year
For example, if today is September 1st and you want to select maximum September 10rd, you would choose Current Date -> Plus (+) -> 10 -> Day
Restrict Dates will automatically perform front-end and back-end validation based on the configuration settings.You can add a custom validation message for invalid date.
The inline date picker is an excellent feature. You can activate it by clicking on ‘Enable inline date picker.’ All other options will function according to the date configuration settings.
You can add exception dates to the date picker. By clicking the Add Exception button, a date picker field will appear for selecting your exception date. You can add multiple exception dates as needed.
You can disable specific weekdays in the date picker. Checkboxes with the names of the days will be provided, allowing you to select multiple days. The selected weekdays will then be disabled in the date picker.
You can easily localize your calendar by selecting a language from the language dropdown. This step is optional, and 65 languages are available for selection.
Use those CSS codes to change the default gravity forms datepicker look. It will add a pretty look to your datepicker. Note: This style/css will work only with Gravity Forms 2.5 Theme.
:root {
--rsd-primary-color: #0077FF;
--rsd-text-color: #1D1D1F;
--rsd-background-color: #f7f7f7;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker th {
border: 0;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker {
background: var(--rsd-background-color);
border-color: transparent;
padding: 16px;
width: max-content;
border-radius: 6px;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker table.ui-datepicker-calendar {
margin-bottom: 0;
margin-top: 10px;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker-title select {
padding: 10px 18px;
border: 1px solid transparent;
border-radius: 6px;
margin: 0 5px !important;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
background-position: 98% 98%;
background-repeat: no-repeat;
background: #ffffff;
text-align: center;
font-weight: 700;
margin: 0 auto;
text-align-last: center;
outline: 0;
color: #000000;
font-size: 15px;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker-title select:focus {
border-color: var(--rsd-primary-color);
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker-prev,
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker-next {
background: #ffffff;
border-radius: 100%;
box-shadow: 0 1px 0 1px rgba(0, 14, 51, 0.05);
top: 50%;
transform: translateY(-50%);
cursor: pointer;
border: 0;
height: 36px;
width: 36px;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker .ui-datepicker-prev:hover,
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker .ui-datepicker-next:hover {
box-shadow: 0;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker .ui-datepicker-header {
background: #f5f5f5;
border: 0;
position: relative;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker th {
padding: 13px;
font-size: 15px;
font-weight: 400;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-state-default,
.gform-theme-datepicker.ui-widget-content .ui-state-default {
padding: 11px 15px;
text-align: center;
border-radius: 6px;
background: #ffffff;
border: 0;
box-shadow: 0 1px 0 1px rgba(0, 14, 51, 0.05);
color: var(--rsd-text-color);
font-size: 15px;
width: 100%;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-state-default.ui-state-active {
background: var(--rsd-primary-color);
color: #ffffff;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-state-default:hover {
background: var(--rsd-primary-color);
color: #ffffff;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker-calendar td {
height: auto;
width: auto;
padding: 2.5px;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker a.ui-datepicker-prev:before {
height: 12px;
width: 12px;
content: '';
border-left: 2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(45deg);
border-radius: 1px 0 1px 2px;
margin-left: 5px;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker th span {
height: auto;
width: auto;
color: var(--rsd-text-color);
font-size: 14px;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-disabled span {
background: #e7e7e7;
opacity: .4;
cursor: not-allowed;
color: rgb(0 0 0 / 58%);
border-radius: 6px;
border: none;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker-other-month.ui-state-disabled span {
background: transparent;
box-shadow: none;
color: rgba(0, 23, 84, 0.15);
}
.gform-theme-datepicker.ui-datepicker-title {
width: 65%;
display: flex;
justify-content: center;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker-prev.ui-state-disabled {
opacity: .5;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker a.ui-datepicker-next:before {
width: 12px;
content: '';
border-right: 2px solid #000;
border-top: 2px solid #000;
transform: rotate(45deg);
border-radius: 1px 2px 1px 0;
margin-right: 5px;
height: 12px;
}
@media only screen and (max-width: 767px) {
.gform-theme-datepicker.gravity-theme.ui-datepicker {
width: 100%;
max-width: 310px;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker-title select {
font-weight: 600;
font-size: 14px;
padding: 8px 12px;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker {
padding: 12px;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-state-default,
.gform-theme-datepicker.ui-widget-content .ui-state-default {
padding: 15px;
font-size: 14px;
}
.gform-theme-datepicker.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-disabled span {
width: 100%;
}
}
Currently, 65 languages are supported in Restrict Dates for Gravity Forms. You will supported languages here.
Albanian
Afrikaans
Armenian (Հայերեն)
Arabic
Azerbaijani
Belarusian
Bulgarian
Bosnian
Chinese Hong Kong (繁體中文)
Chinese Simplified (简体中文)
Chinese Traditional (繁體中文)
Catalan
Czech
Croatian
Danish
Dutch (Nederlands)
English/UK
Esperanto
Estonian (eesti keel)
Finnish (suomi)
Faroese (føroyskt)
French (Français)
Farsi/Persian
Galician
German (Deutsch)
Georgian
Greek (el)
Hebrew
Hindi
Hungarian (Magyar)
Indonesian (Bahasa Indonesia)
Icelandic
Italian
Japanese
Kazakh
Khmer
Korean
Karrikas-ek
Kyrgyz
Luxembourgish
Lithuanian (lietuviu kalba)
Latvian (Latvieöu Valoda)
Macedonian
Malayalam
Malaysian
Norwegian Bokmål
Norwegian Nynorsk
Norwegian
Polish (Polski)
Portuguese
Romansh
Romanian (Română)
Russian (Русский)
Spanish (Español)
Slovak (Slovencina)
Slovenian (Slovenski Jezik)
Serbian (српски језик)
Swedish (Svenska)
Tamil (தமிழ்)
Thai (ภาษาไทย)
Tajiki
Turkish (Türkçe)
Ukranian (Українська)
Vietnamese (Tiếng Việt)
Welsh/UK
© 2024 PluginsCafe. All Rights Reserved.