您的位置: 首页  >  技术问答  >  无法在我的Rails应用程序中显示日期选择器样式

无法在我的Rails应用程序中显示日期选择器样式

分类: 技术问答 • 2022-05-04 10:03:37
问题描述：

我正在使用Rails 4.2.3。我已经包含了这些宝石无法在我的Rails应用程序中显示日期选择器样式

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();

，但我遇到麻烦日期选择器样式显示在我的页面上。我有这个在我的./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文件以使datepicker样式出现？

+0

你是否在为你的application.css使用CSS或SASS？ '// = require jquery-ui'将需要datepicker。 – Leito

+0

我不知道 - 我只是建立了我的项目，并没有编写任何涉及SASS的程序。 application.css文件基本上是为我自动生成的（我在我的问题中包含了完整的文件）。我如何确定它是CSS还是SASS？ – Dave

+0

好吧，'@ import'告诉我是sass，扩展名应该是'.scss'（让我们从那里开始），但是你说'application.css'。如果你按照jquery-rails安装看，他们不使用@imports，而是'// = require'。首先，我们首先解决jquery-ui问题，然后担心引导，不要试图啃咬太多。请更新您的问题 – Leito

答

遵守其README如何设置查询-UI-轨说明：

而不是使用@import语句，使用链轮：

/* 
*= require jquery-ui 
*/

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

相关推荐