Posted 3 months 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.

Copy
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:

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

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
3 months ago
by Arne Hartherz
Attachments:
rome-bootstrap4.png
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