戻る

Rails6.0


民泊サイトの構築 Rails6.0

  (0)
3,000円

タスク4-3   jQuery日付ピッカー

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




jqueryはすでにインストールされているので、「jquery-ui」をインストールします。


コマンド
yarn add jquery-ui


記述追加 config\webpack\environment.js(14行目)
 environment.toWebpackConfig().merge({ 
    resolve: { 
        alias: { 
            'jquery': 'jquery/src/jquery' 
        } 
    } 
}); 



config\webpack\environment.js
 
const { environment } = require('@rails/webpacker') 

module.exports = environment 

const webpack = require('webpack') 

environment.plugins.append('Provide', 
    new webpack.ProvidePlugin({ 
        $: 'jquery/src/jquery', 
        jQuery: 'jquery/src/jquery', 
        Popper: ['popper.js', 'default'] 
    }) 
) 

environment.toWebpackConfig().merge({ 
    resolve: { 
        alias: { 
            'jquery': 'jquery/src/jquery' 
        } 
    } 
}); 



「app\javascript\packs\application.js」ファイルに以下の記述を追加します。


記述追加 app\javascript\packs\application.js(11行目)
 require('jquery'); 
require("jquery-ui/ui/widgets/datepicker"); 



app\javascript\packs\application.js
 
// This file is automatically compiled by Webpack, along with any other files 
// present in this directory. You're encouraged to place your actual application logic in 
// a relevant structure within app/javascript and only use these pack files to reference 
// that code so it'll be compiled. 

require("@rails/ujs").start() 
require("turbolinks").start() 
require("@rails/activestorage").start() 
require("channels") 
require('jquery'); 
require("jquery-ui/ui/widgets/datepicker"); 

window.Noty = require("noty") 
window.Dropzone = require("dropzone") 
window.BulmaCarousel = require("bulma-extensions/bulma-carousel/dist/js/bulma-carousel") 

$(document).on('turbolinks:load', () => { 
    $('.toggle').on('click', (e) => { 
        e.stopPropagation(); 
        e.preventDefault(); 
        $('#' + e.target.getAttribute('aria-controls')).toggleClass('is-hidden'); 
    }) 
}) 

// Uncomment to copy all static images under ../images to the output folder and reference 
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) 
// or the `imagePath` JavaScript helper below. 
// 
// const images = require.context('../images', true) 
// const imagePath = (name) => images(name, true) 

require("trix") 
require("@rails/actiontext") 



記述追加 app\views\reservations\_form.html.erb(28行目)
  1. <script>
  2.   $(function() {
  3.     $('#reservation_start_date').datepicker({
  4.       dateFormat: 'dd-mm-yy'
  5.     });
  6.     $('#reservation_end_date').datepicker({
  7.       dateFormat: 'dd-mm-yy'
  8.     });
  9.   });
  10. </script>



app\views\reservations\_form.html.erb
 
<%= form_for([@room, @room.reservations.new]) do |f| %> 
    <div class="field is-horizontal"> 
        <div class="field-body"> 
            <div class="field"> 
            <p class="control is-expanded has-icons-left"> 
                <%= f.text_field :start_date, readonly: true, placeholder: "イン", class: "input is-primary is-rounded" %> 
                <span class="icon is-small is-left"> 
                <i class="far fa-calendar-alt"></i> 
                </span> 
            </p> 
            </div> 
            <div class="field"> 
            <p class="control is-expanded has-icons-left has-icons-right"> 
                <%= f.text_field :end_date, readonly: true, placeholder: "アウト", class: "input is-primary is-rounded" %> 
                <span class="icon is-small is-left"> 
                <i class="far fa-calendar-alt"></i> 
                </span> 
            </p> 
            </div> 
        </div> 
    </div> 
    <%= f.submit "予約する", class: "button is-danger is-fullwidth m-t-10 m-b-10"  %> 
<% end %> 
<script> 
  $(function() { 
    $('#reservation_start_date').datepicker({ 
      dateFormat: 'dd-mm-yy' 
    }); 
    $('#reservation_end_date').datepicker({ 
      dateFormat: 'dd-mm-yy' 
    }); 
  }); 
</script> 



以下のサイトで日付ピッカーのデザインを変更することができます。
https://code.jquery.com/


デザインの名前をコピーしてリンクの名前を変更します。
今回は「sunny」を使います。


デザインの名前



記述追加 app\views\layouts\application.html.erb(14行目)
     <!-- 日付ピッカー デザインsunny--> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css"> 
    <!-- 日付ピッカーの日本語化--> 
    <script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script> 



この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

民泊サイトの構築 Rails6.0

3,000円

Rails6.0で民泊サイトを構築します。
ホストは部屋を登録し、ゲストは宿泊予約できます。
ゲストはクレジットカードで支払いをし、ホストには料金の80%が自動で口座に振り込まれます。
Googleマップによる表示、AJAX検索、日付カレンダーによる予約ができます。
リアルタイムメッセージにより連絡がとれます。
予約確認メールの送信も可能。
写真のアップロード機能、アマゾンS3の利用方法も解説。
レビュー機能の実装方法解説。
フルカレンダー による予約管理。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 128