无法在我的Rails应用程序中显示datepicker样式

时间：2016-02-11 22:32:17

标签： jquery ruby-on-rails datepicker styles

我正在使用Rails 4.2.3。我已经包含了这些宝石

gem 'jquery-rails'
gem 'jquery-ui-rails'

我想在我的页面上使用日期选择器，我已经在我的咖啡脚本中这样做了...... 

$(document).on 'ready page:load', -> $('#datepicker').datepicker
    dateFormat: 'mm/dd/yy'
    altField: '#user_object_day'
    onSelect: (date) ->
      update();

但是我无法将datepicker样式显示在我的页面上。我在./app/assets/stylesheets/application.css文件

中有这个 
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */
@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap/theme'
@import "jquery.ui.core"
@import "jquery.ui.theme"
@import "jquery.ui.datepicker"

但是，日期选择器的样式不会出现。这是我的HTML中产生的内容...... 

    <head>
    <title>My Application</title>
    <link rel="stylesheet" media="all" href="/assets/scaffolds.self-f7b997caf712f3060ad616e13504564b0a9628b98eaf796c98a22c85e4807b99.css?body=1" data-turbolinks-track="true" />
    <link rel="stylesheet" media="all" href="/assets/user_exercises.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
    <link rel="stylesheet" media="all" href="/assets/application.self-806fd2c66749900d7cd54ad2f2f8b72f2057fe85c9ec5b553242f0f13bec856e.css?body=1" data-turbolinks-track="true" />
    <script src="/assets/jquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/core.self-93be4d22eda916787802a64d8f88b52db8a9027d4ccbbc0942625324a7d12d44.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/widget.self-c1602241ddc51216b58391768667068867b8e15b9efc722befcd25771eda6819.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/accordion.self-c95f320275150a94241b004a91e21eef9c5ae9965a793cb3e2475f6078a1670d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/position.self-e693ced4ecfa1a276f0b794f32c1d30d792764b08788bf68ecfa3b388c291333.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/menu.self-7abc1c9401509a7e4fc609b1e461be6fd17e8116e8fda19cc59d05ba79aefb68.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/autocomplete.self-3befc48aba87cead090cfd014562b2771a662ac6d2c8197b24c08b2d9f3d9f2d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/button.self-4d4f21ba77bbf8cc08ae65e2b6329a7a1b952b32c3ba7bffca8313e7e8c93d0c.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/datepicker.self-6267be6d4d0f0e8665be3b4d6ac07f40ba23a32aff8eaa5d1bfc00f76a9eeae7.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/mouse.self-c513294e8da73f31f84ba3ef11e2a1180a47faea0eb2fea4a53fc26153dd21fd.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/draggable.self-debcca3d0d5d9afe2fe91a6fd1aebdb41ca0a55f2f6017352e6c02b6d8a6e64c.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/resizable.self-60b870565f3cd62982c1907828119bb51f42ec8228d5e23868153edc3abc685c.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/dialog.self-5a6c7980dfa3f6b74445b0f4b20eed799ee65363163500ed7f032e603d6b022d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/droppable.self-a7a2b4c2cec8fc176f51e4e4291d92bfd3eec40b6a580b47fc54c16334d52882.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect.self-3acdb29e7da09c8f0195b994d2f04d73bfef50dc539c84fd2c835d964d33e5c1.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-blind.self-ed102209d7aa0b7374f3db8478cc7dcff5f9980d3146e8bf9fbfab959c6d5d8a.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-bounce.self-bfcb9288797ecd234ddeedf4fbc5b4c9de94a4e6d8d44e6faa5b5e9836fad9fd.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-clip.self-7368e4597c32360b162d264ff8bbd0cf9fb1535eb9b4564e6eb7c1db3c774bf3.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-drop.self-294aaa72126ad9c94d6558cca792eb3716754713aca98f18a9dd7c493150ed92.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-explode.self-68e74dc114a52f3f4d7033e40c39196961bdcf439652daa2e98baa115c7bb44b.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-fade.self-42d542a5253e0a610717460102ee6bee339c656cc188e491d89eb0779043c963.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-fold.self-ad9967f153423916300dbf1104b00f7ad7bbd6a222a0fcc1012ebe251bcb13c8.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-highlight.self-f922b7179ab8ccfa7865141f38865bba0a3d2bdceba7561c27ca14544dbfd996.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-size.self-368aecefa09656a2be5c72dc8e685b120363a3df812134cbd2dd998bafa179fd.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-scale.self-884a5abcb6d90fcd9f9a071aa8329638184df688afced1b1d3b6be6c69f4dd7f.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-puff.self-93415831093923a70f671d73e8d0b3d94deb37ac7472a036a4add545f565c166.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-pulsate.self-eb107c0d136eccdfbd8a2f0f2ee71e0f6911cb300c6b63cc2fe4f6532e6a9a97.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-shake.self-63bcc14897aac5b84e10690be94d64d5724f864aa14c913b4d1030c461a256ad.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-slide.self-c93054a4a80d1f986760806d81ab067e4a4120bf103337e152ecc24d36e785f6.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-transfer.self-181245634ec522320fc1081f6dbf94fd982f34eefa03555f76817dedfcdea336.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/progressbar.self-a259ff5a2a5e7aef0ec21bda94edd0f6bc1e9821128d901de415956edf212b0d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/selectable.self-42e53fc2f95211314e36a8094c42560f869c207f16d68cfc206aa37201dcdc03.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/selectmenu.self-09dbcac573f0e508194bd9deff254db090889b380d030261857860309c0918e8.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/slider.self-8af8d2a0661743ba88b4cfb99d5c8c874cfa3fc6528ae4e9252366b388def0b7.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/sortable.self-df2d80a36f9dfbe0facc596ccd92af83ca50d38e4cd6a84810aaf5d40b8cd181.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/spinner.self-3c8c95a7bc9c877d0f9c16789246bbedda6b8e8fbf5927951babdab775aed02e.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/tabs.self-dc07b44bf1b926c8d28ccd2658e30933881e5329348caf70cf305c3943f6bbd7.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/tooltip.self-38f04ac3a6c8fb2391ec6832b68845671cc9013a94371b7eb239478f4835eb73.js?body=1" data-turbolinks-track="true"></scipt>
    <script src="/assets/jquery-ui.self-52111578aa54225c9ebfe06f78a62771020ee548bb27d62228ee3f5e6633969d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery_ujs.self-d602bdfe68ffc63b9f9cc512872aa3cfff046228a0a36e90dd476e8ef54c1b09.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/user_exercises.self-ebd6c787c7885684d8edc3ce54d013ea6715290fa04091d45a109b1965d4fc4b.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/application.self-f8806224e027f3e3f0138ea9ce99319e298dfdb323304d1f1be6eae8e8c74724.js?body=1" data-turbolinks-track="true"></script>
    <meta name="csrf-param" content="authenticity_token" />
    <meta name="csrf-token" content="rensyCNrdgwj8yyZinV+5JrceZ06gG7wj8tIsaV/5YonD5c+CIbp+wHxL6s+gtnOaMPjA3j8zwUeJ+8S6jXjAA==" />
    </head>

如何编辑application.css文件以显示日期选择器样式？

1 个答案:

答案 0 :(得分：2)

按照有关如何从README设置 query-ui-rails 的说明进行操作：

使用sprockets：

，而不是使用@import语句 
/*
 *= require jquery-ui
 */

这应该需要所有必要的文件，包括 jquery-ui / datepicker.css

相关问题
最新问题