Read more

Bootstrap 4 skin for the Rome datepicker

Arne Hartherz
March 18, 2019Software engineer at makandra GmbH

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

Illustration online protection

Rails professionals since 2007

Our laser focus on a single technology has made us a leader in this space. Need help?

  • We build a solid first version of your product
  • We train your development team
  • We rescue your project in trouble
Read more Show archive.org snapshot

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:

Example Image

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.

rome(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:

.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;
}
Posted by Arne Hartherz to makandra dev (2019-03-18 18:10)