Posted about 1 year ago. Visible to the public.

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:

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 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; }

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Arne Hartherz
Last edit:
about 1 year ago
by Arne Hartherz
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more