Dynamic Date Time Plugin

Item type plugin for Picking Date/Time

Date Navigation

Navigation Title and styling

Navigation Title and styling

Item Attributes =>Setting=>DatePicker Title option can be used to set the date picker title with custom text and styling.
Examples:
Single Date Picker Title: 
"days":"Check In:
MM, yyyy"
Single Month Picker Title: 
"months":"Year:yyyy"
Single Year Picker Title: 
"years":"Decade:yyyy1 - yyyy2"
Single Date Picker for all views, date, month, year Title: 

"days":"Check In:MM, yyyy","months":"Year:yyyy","years":"Decade:yyyy1 - yyyy2"

Navigation Icons Setting

In the Component Settings=> Dynamic Date Time Picker [Plug-in] there is option to set the DatePicker Navigation Icons

CSS Styling

 

CSS Styling

Set monClass class of the item in Item Attributes =>Advance=>CSS Classes
The following css was used to achieve the coloring in the example above:
.monClass nav.datepicker--nav,
.monClass div.datepicker--content,
.monClass div.datepicker--time,
.monClass div.datepicker--buttons {
    color: white;
    background-color: #121535
}

.monClass div.datepicker--time {
    color: #24baff;
}

.monClass div.datepicker--days div.datepicker--cell-day.-other-month- {
    background-color: green;
}

.monClass div.datepicker--cell-day.-weekend- {
    background-color: #2577cf;
}

.monClass div.datepicker--cell-day.-current- {
    background-color: yellow!important;
}

CSS Styling

CSS Structure for Date Picker
  • class = "datepicker -right-top- -from-right- monClass"
    • i tag class = "datepicker--pointer"
    • Header Area: nav class = "datepicker--nav"
      • side Nav: div class = "datepicker--nav-action -disabled-" data-action = "prev"
        • < svg>
      • Title: div class = "datepicker--nav-title"
      • Side side Nav: div class = "datepicker--nav-action" data-action = "next"
        • < svg>
    • Body: div class = "datepicker--content"
      • class = "datepicker--days datepicker--body active"
        • Days Header Container: div class = "datepicker--days-names"
          • attribute for each cell: data-date="7" data-month="1" data-year="2017"
          • div class="datepicker--day-name"
          • div class="datepicker--day-name -weekend-"
          • div class="datepicker--day-name -other-month-"
          • div class="datepicker--day-name -weekend- -other-month-"
        • Days cells Container:div class="datepicker--cells datepicker--cells-days"
          some of days classes for days, weekend, other month days, disabled days
          • div class="datepicker--cell datepicker--cell-day -current-"
          • div class="datepicker--cell datepicker--cell-day -weekend- -other-month-"
          • div class="datepicker--cell datepicker--cell-day -other-month- -disabled-"
    • div class="datepicker--time -am-pm-"
      • div class="datepicker--time-current"
        • span class="datepicker--time-current-hours"
        • span class="datepicker--time-current-colon"
        • span class="datepicker--time-current-minutes"
        • span class="datepicker--time-current-ampm
      • div class="datepicker--time-sliders"
        • CSS selector for slider: .datepicker--time-row input[type=range]
        • div class="datepicker--time-row"
          • input type="range" name="hours"
        • div class="datepicker--time-row"
          • input type="range" name="minutes"
    • Buttons Area:div class="datepicker--buttons"
      • span class="datepicker--button" data-action="today"
      • span class="datepicker--button" data-action="clear"