質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

1回答

6207閲覧

PHP(laravel)でjqueryの"datepicker"を 利用しようとしている中でdatepickerにcssが反映されない。

yuki1218

総合スコア12

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2019/07/10 13:19

編集2022/01/12 10:55

前提・実現したいこと

)PHP(laravel)でjqueryの"datepicker"を
利用しようとしている中で,datepickerの読み込みには成功しましたが、
CSSが反映されないという問題が発生しました。
Laravel5.5を利用。以下のようにcssが適用されていないdatepickerとなってしまいました。
下記に導入手順を書きました。ご指摘ありましたらよろしくお願いいたします。

イメージ説明

該当のソースコード

以下はapp.scssの中身

scss

1// Fonts 2@import url('https://fonts.googleapis.com/css?family=Nunito'); 3 4// Variables 5@import 'variables'; 6 7// Bootstrap 8@import '~bootstrap/scss/bootstrap'; 9 10//jquery-ui ↓ここを追加 11@import '~jquery-ui/themes/base/datepicker.css'

試したこと

以下の流れでdatepickerを導入しました。

  1. datepicker(jquery-ui)をインストールする。

npm install --save-dev jquery-ui
npm install --save-dev jquery-ui-sass

2.jquery.uiをrequireする。

Resourcesのjsのbootstarap.jsの12,3行目に
require('jquery-ui/ui/widgets/datepicker');
require('jquery-ui/ui/i18n/datepicker-ja');
を入れてrequireする。

3.resourcesのsassのapp.scssに

//jquery-ui
@import '~jquery-ui/themes/base/datepicker.css'
を記入。

4.ビルドする。
C:\Users\naina\shisetsu360v2>npm run dev

5.bladeファイルに

<p>日付: <input type="text" id="datepicker" /></p> を書く。

6.resourcesのjsのapp.jsに
$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
$( "#datepicker" ).datepicker()
を書く。

補足情報(FW/ツールのバージョンなど)

sassのスタイルもインストールもしてみましたがこちらを適用するコードの書き方がわかりませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

最近jqueryUIは更新されていないので、使い方が難しいのであれば、以下の日付カレンダー表示ライブラリがおすすめです。
flatpickrを使ったデモ
flatpickr

投稿2019/07/10 13:46

aro10

総合スコア4106

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuki1218

2019/07/10 13:51

回答ありがとうございます。もう少し粘って難しければこちらのライブラリ参考にさせて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問