Bootstrap 4 skin for the Rome datepicker

Here is how to make Rome datepicker look like the rest of your Bootstrap 4 application.

Rome comes with very little basic styling. While we could redefine its classes, we can configure the classes Rome applies to its elements to make it look like this:

Since Bootstrap 4 comes with several helpful utility classes, and requires fewer markup/containers, we can achieve Bootstrap 4 experience by applying a few classes via the styles setting.

You still need to include rome/dist/rome.css for its basic positioning styles.

Copyrome(element, {
  weekStart: 1, // Monday
  weekdayFormat: 'short', // Mon
  styles: {
    // Picker overlay
    container: 'rd-container border rounded-lg shadow bg-white p-2',

    // Top bar
    back: 'px-3 py-1 rd-back',
    next: 'px-3 py-1 rd-next',
    monthLabel: 'py-1',

    // Month sheet
    dayTable: 'table table-sm table-borderless',
    dayHeadElem: 'border-bottom',

    // Time picker
    selectedTime: 'btn btn-outline-primary dropdown-toggle',
    time: 'rd-time dropup',
    timeList: 'rd-time-list dropdown-menu shadow',
    timeOption: 'dropdown-item'
  }
})

Note how we applied the dropup class to the time select container. This will open the dropdown menu upwards. If you don't want that, simply omit the time style.

Also note how we did not configure classes for days of the previous/next month, or the currently selected day. This is because Rome also uses styles internally Show archive.org snapshot as selectors which breaks internal behavior for space-separated strings or when using the same CSS class for multiple properties (e.g. text-muted for dayPrevMonth and dayNextMonth).

You need to redefine such styles manually, for example like so:

Copy.rd-day-selected {
  background: $primary;
  color: $white;
  font-weight: bold;
  border-radius: $border-radius-lg;
}

.rd-day-next-month {
  color: $text-muted;
}

.rd-day-prev-month {
  color: $text-muted;
}