jQuery UI Support

‹ Back

jQuery UI is not supported out of the box in Ornament, however it is easy to add. Follow these steps:

Add the jQuery UI gem (then bundle and restart your server):

gem 'jquery-ui-rails', '~> 6.0.1'

Add the jQuery UI imports to vendor.js:

// =========================================================================
// jQuery UI
// =========================================================================

//= require jquery-ui/widget
//= require jquery-ui/widgets/datepicker
//= require libs/jquery-ui-timepicker-addon

Add the jQuery UI imports to core.scss, along with the ornament jQuery UI theme:

// =========================================================================
// jQuery UI
// =========================================================================

@import "jquery-ui/datepicker";
@import "ornament/jquery-ui-theme";

Finally, enable jQuery UI support in form-datepicker.js:

enabled: true

You can check for jQuery UI support at any time by executing the following in your console:


Legacy jQuery UI support

jquery-ui-rails is a gem that likes to rearrange their assets every now and then causing major breaking changes.

It's likely that following this guide with a different version of jquery-ui-rails will not work as expected.

The easiest method for discovering the correct includes paths to use in your js and css is by running bundle open jquery-ui-rails and exploring the folder structure.

It's likely one of these:

  • jquery.ui.foo
  • jquery-ui/foo
  • jquery-ui/widgets/foo

Some older versions will require a core file to be included before working properly.

If you find the theme isn't working, try the previous version of the theme file.