Skip to content

Instantly share code, notes, and snippets.

@spivurno
Last active June 26, 2020 07:04
Show Gist options
  • Save spivurno/e4b00678717e068fcb45 to your computer and use it in GitHub Desktop.
Save spivurno/e4b00678717e068fcb45 to your computer and use it in GitHub Desktop.
Gravity Wiz // Gravity Forms // Kayak-style Datepicker
/**
* Gravity Wiz // Gravity Forms // Kayak-style Datepicker
* Style your Gravity Forms Datepickers like Kayak.com
*/
.datepicker-clean.ui-datepicker {
background-color: #fff;
width: 516px !important;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;
padding-left: 20px;
position: relative;
border: 1px solid #ddd;
}
.datepicker-clean.ui-datepicker:before {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #ddd;
top: -15px;
}
.datepicker-clean.ui-datepicker:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
top: -13px;
}
.datepicker-clean .ui-datepicker-group {
float: left !important;
padding: 20px 20px 20px 0;
}
.datepicker-clean .ui-datepicker-header {
background: none !important;
text-shadow: none !important;
color: #333 !important;
border: 0 !important;
margin-bottom: 6px !important;
}
.datepicker-clean .ui-datepicker-title {
font-size: 15px !important;
}
.datepicker-clean .ui-datepicker-year {
font-weight: normal !important;
}
.datepicker-clean.ui-datepicker thead {
border: 0 !important;
background: none !important;
}
.datepicker-clean.ui-datepicker th {
font-size: 12px !important;
font-weight: bold;
color: #ccc !important;
}
.datepicker-clean.ui-datepicker tbody tr {
border: 0 !important;
}
.datepicker-clean.ui-datepicker tbody td {
background-color: transparent;
border: 0 !important;
padding: 1px !important;
}
.datepicker-clean .ui-datepicker-prev {
position: absolute;
left: 10px;
line-height: 30px !important;
background: none !important;
}
.datepicker-clean .ui-datepicker-prev:after {
content: '◀';
color: #f6861f !important;
}
.datepicker-clean .ui-state-disabled.ui-datepicker-prev:after {
color: #ccc !important;
}
.datepicker-clean .ui-icon.ui-icon-circle-triangle-w {
display: none;
}
.datepicker-clean .ui-datepicker-next {
position: absolute;
right: 10px;
line-height: 30px !important;
background: none !important;
}
.datepicker-clean .ui-icon-circle-triangle-e {
display: none;
}
.datepicker-clean .ui-datepicker-next:after {
content: '▶';
color: #f6861f !important;
}
.datepicker-clean .ui-state-disabled.ui-datepicker-next:after {
color: #ccc !important;
}
.datepicker-clean .ui-datepicker-calendar .ui-state-default {
background: #f5f5f5 !important;
font-weight: normal !important;
font-size: 13px !important;
text-shadow: none !important;
border: 1px solid #f5f5f5 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.datepicker-clean .ui-datepicker-calendar .ui-datepicker-today a {
font-weight: bold !important;
}
.datepicker-clean .ui-datepicker-calendar .ui-datepicker-current-day a {
background-color: #f6861f !important;
color: #fff !important;
border: 1px solid #f6861f !important;
}
.datepicker-clean .ui-datepicker-calendar .ui-state-hover {
background-color: #fff !important;
border: 1px solid #f6861f !important;
}
.datepicker-clean .ui-datepicker-unselectable.ui-state-disabled {
background: none !important;
}
.datepicker-clean .ui-datepicker-unselectable.ui-state-disabled span {
background: none !important;
font-weight: normal !important;
color: #eee !important;
border: 1px solid transparent !important;
}
.datepicker-clean .ui-datepicker-calendar .ui-datepicker-other-month span {
color: #ccc !important;
}
.datepicker-clean .ui-datepicker-calendar .wrong {
background-color: #ff0000 !important;
}
.datepicker-clean div.ui-datepicker-group-first td:not(.ui-datepicker-other-month) ~ td.ui-datepicker-other-month {
visibility: hidden;
}
.datepicker-clean div.ui-datepicker-group-last td {
visibility: hidden;
}
.datepicker-clean div.ui-datepicker-group-last td.ui-datepicker-other-month ~ td:not(.ui-datepicker-other-month),
.datepicker-clean div.ui-datepicker-group-last td:not(.ui-datepicker-other-month),
.datepicker-clean div.ui-datepicker-group-last td:not(.ui-datepicker-other-month) ~ td.ui-datepicker-other-month {
visibility: visible;
}
/**
* Gravity Wiz // Gravity Forms // Kayak-style Datepicker
* Style your Gravity Forms Datepicker like Kayak.com.
*/
( function( $ ) {
if( window.gform ) {
gform.addFilter( 'gform_datepicker_options_pre_init', function( options, formId, fieldId ) {
var className = 'datepicker-clean';
if( ! $( '#input_' + formId + '_' + fieldId ).parents( 'li.gfield' ).hasClass( className ) ) {
return options;
}
var beforeShow = options.beforeShow,
onClose = options.onClose;
options.numberOfMonths = 2;
options.changeMonth = false;
options.changeYear = false;
options.showOtherMonths = true;
options.dayNamesMin = [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ];
options.beforeShow = function() {
beforeShow();
$( '#ui-datepicker-div' ).addClass( className );
};
options.onClose = function() {
onClose();
var closeInterval = setInterval( function() {
var $dp = $( '#ui-datepicker-div' );
if( ! $dp.is( ':visible' ) ) {
$dp.removeClass( className );
clearInterval( closeInterval );
}
}, 100 );
};
return options;
} );
}
} )( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment