소개

개인적으로 추천하는 Datetimepicker에 대해 소개하겠습니다.
도입이 엄청 간단합니다.

완성 예

이런 식으로 날짜와 시간을 선택하면 구현할 수 있습니다.



개인적으로이 datetimepicker가 우수하다고 느끼는 점은 다음과 같습니다.

처음부터 캘린더와 시간이 표시됩니다

버튼을 클릭하는 횟수를 두 번 입력 할 수 있습니다

다른 datetimepicker라면, 일자를 클릭하지 않으면 시간의 란이 표시되지 않기 때문에 작업량을 한순간에 파악할 수 없습니다.
미묘한 차이이지만, 유저가 조금이라도 편한 분을 생각했습니다.

사용법

우선, GemFile 에 이하의 gem 를 기재해, bundle install 를 해 주세요.

GemFile

gem 'jquery-datetimepicker-rails'

$ bundle install

그런 다음 app/assets/stylesheets/application.css에 다음 줄을 추가하십시오.

app/assets/stylesheets/application.css

*= require jquery.datetimepicker

그런 다음 app/assets/javascripts/application.js에 다음 줄을 추가하십시오.
(코멘트는 그대로 괜찮습니다.)

app/assets/javascripts/application.js

//= require jquery.datetimepicker

다음의 2행을 추가하는 것으로, 일본어 대응의 datetimepicker를 적용할 준비가 되었습니다.
(나의 환경에서는 일본어 대응이 되지 않았습니다. 누구인지 아는 분이 있으면 가르쳐 주셨으면 한다..)

application.js 에 다음을 쓰고 있습니다만, 각 모델에만 적용하고 싶은 경우는 coffee script에 써도 문제 없습니다. (단, 그 경우는 coffee script로의 변환이 필요.)

app/assets/javascripts/application.js

// 日本語化対応用
$.datetimepicker.setLocale('ja');

// datetimepickerクラスにdatetimepickerを適用する。
$('.datetimepicker').datetimepicker();

이번에는 예로서 post 모델의 post_datetime 열에 datetimepicker를 적용하고 있습니다.
요점은 클래스에 datetimepicker를 추가하는 것입니다. 이렇게하면 해당 부분에 적용됩니다.
슬림에 익숙하지 않은 분, 죄송합니다. .

new.html.slim

= form_for @post do |f|
  = label :post, :post_datetime
  = f.text_field :post_datetime, value: "", class: "datetimepicker", autocomplete: "off"
// class に datetimepicker をつけるとその部分に適用される。

요약

어떻습니까? 도입이 쉬웠습니까?
미비 등이 있으면 신청하십시오.

참고

GitHub(jquery-datetimepicker-rails)

htps : // 기주 b. 코 m / 엔ゔ ぇ k / j 쿠에 ry-다테 치메 피 C 케 루 라 ls