Rails 및 Bootstrap4에서 캘린더 형식의 날짜 입력 양식 구현

하고 싶은 일

Rails로 이런 느낌의 날짜의 입력 폼을 구현한다.

환경

Ruby 2.3

Rails 5.0.7

Bootstrap4

할 일

Tempus Dominus 설치

moment.js 설치

font-awsome 설치

HTML에 쓰기

이 기사에서는 Bootstrap4의 설치는 기재하지 않습니다만 이 기사 뭔가가 참고가 될까 생각합니다.
htps : // 이 m / 나이키 시무라 / ms / c8db09이다 f5c11이다 df

1. Tempus Dominus 설치

먼저, Bootstrap에서 실행되는 "Tempus Dominus"라는 플러그인을 사용합니다.
htps : /// m 뿌 s 도미누 s. 기주 b. 이오 / 보오 tst 등 p-4 /

이쪽은 Bootstrap4용의 플러그 인이 되고 있습니다.

각 프레임워크에 대한 설치 방법은 Tempus Dominus 홈페이지에 있습니다.
htps : /// m 뿌 s 도미누 s. 기주 b. 이오 / 보오 tst et al p 4 / in s tat g / # 라이 ls

이번에는 Rails이므로 그에 따라

Gemfile에 쓰기

Gemfile

gem "bootstrap4-datetime-picker-rails"

bundle install 실행

터미널

XXX-MacBook-Pro:sample-app ユーザー$　bundle install 

application.js에 쓰기

/app/assets/javascripts/application.js

//= require tempusdominus-bootstrap-4.js

application.scss에 쓰기

/app/assets/stylesheets/application.scss

@import "tempusdominus-bootstrap-4.css";

를 실행하여 설치를 완료합니다.

2. moment.js 설치

moment.js는 자바스크립트의 날짜, 시간 등을 다루기 쉽게 만드는 라이브러리입니다.
Tempus Dominus를 실행하는 데 필요하므로 여기도 설치합니다.

gemfile에 쓰고 bundle install 실행

Gemfile

gem 'momentjs-rails'

터미널

XXX-MacBook-Pro:sample-app ユーザー$　bundle install 

인스톨 후에는 application.js에의 기입도 실시한다.
* 이때 moment.js의 require 문은 Tempus Dominus의 require 문 앞에 씁시다.
(moment.js는 Tempus Dominus보다 먼저로드해야하기 때문에)

/app/assets/javascripts/application.js

//= require moment
//= require moment/ja.js
//= require tempusdominus-bootstrap-4.js

캘린더를 일본어로 하고 싶은 경우는 moment/ko.js도 require합시다.

3. font-awesome 설치

Tempus Dominus에서는 font-awesome 아이콘을 사용하고 있으므로 여기도 설치합니다.

gemfile에 기재되어 bundle install.

Gemfile

gem "font-awesome-rails"

터미널

XXX-MacBook-Pro:sample-app ユーザー名$　bundle　install 

설치 후 application.scss로 import합시다.

/app/assets/stylesheets/application.scss

@import "font-awesome";
@import "tempusdominus-bootstrap-4.css";

이때 font-awesome의 import문은 TempusDominus의 import문보다 위에 기재합시다. 그렇지 않으면 TempusDominus가 font-awesome을 참조 할 수 없게됩니다.

4. HTML에 쓰기

여기까지 할 수 있으면 마지막에 HTML에 태그를 써 갑니다.

달력 포함 · 날짜 만 · 시간 만
라는 표시의 변형은 TempusDominus 홈페이지에 기재되어 있습니다.
htps : /// m 뿌 s 도미누 s. 기주 b. 이오 / 보오 tst 등 p-4 / 토끼 /
여기서 입력 폼이 닿는 상태이므로, 실제로 만져 보고 자신의 목적에 맞는 것을 선택합시다.

기본적으로, 여기의 페이지에 실려 있는 HTML 코드를 기재하면 화면상에 입력 폼이 나타납니다.

덧붙여서 이 기사의 시작 부분에 게재한 폼의 코드는 이하와 같다. (haml로 쓰고 있으므로 .erb 파일은 적절하게 읽어주세요...)

_form.html.haml

-#フォーム部分のみ記載

= form_for [任意のモデル] do |f|
  .form-group.event__name
    = f.label :name do
      イベント名
    = f.text_field :name, class: "form-control"

  .form-group.event__start-time
    = f.label :start_time do
      開始日時
    = f.text_field :start_time, class: "form-control datetimepicker-input", id: "start_time", data: {toggle: "datetimepicker", target: "#start_time"}

  = f.submit "実行", class: "btn w-100"

이 양식에서 제출 버튼을 누르면 문자열 형식으로 컨트롤러에 날짜와 시간 정보가 전달됩니다.

# 文字列型でparameterに渡される（"start_time"は入力フォームの項目名）
 "start_time"=>"2019/01/30 10:30"

그리고는 각각, 테이블에 보존되는 표시가 되어 데이터를 사용합시다.

이상이 Rails와 Bootstrap에서 달력 형식의 날짜 입력 양식을 만드는 단계입니다.
지적, 실수 등이 있으면 코멘트를 부탁드립니다.

끝까지 봐 주셔서 감사합니다.