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

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

ただいまの
回答率

90.51%

  • Ruby on Rails

    8857questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • jQuery

    8157questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Rails4.2 datetimeカラムに対して TimepickerとDatepickerを使用する方法

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,422
退会済みユーザー

退会済みユーザー

一つのdatetimeカラム(limit_dayカラム)に対してjQuery TimepickerとDatepickerを同時に使用する方法はありますでしょうか?


<div class="input-group">
              <span class="input-group-btn">
                <button class="btn" type="button"><span class="fui-calendar"></span></button>
              </span>
                <%= text_field_tag :limit_date, params[:limit_date],#ここでモデルと関連付いていないテキストフィールドを定義
                                   data: {:default => Time.now + 14.day,
                                          :start_year => Time.zone.now.year,
                                          :end_year => Time.zone.now.year + 1, :minute_step => 10  },
                                   autocomplete: "on",
                                   class: 'form-control datepicker',
                                   placeholder: '2016/09/28',
                                   id:"datepicker-01"%>
              </div>
            </div>


            <div class="col-sm-9 col-md-4 col-lg-4">

              <div class="input-group">
              <span class="input-group-btn">
                <button class="btn" type="button"><span class="fui-time"></span></button>
              </span>
                <%= text_field_tag :limit_time, params[:limit_time],
                                   data: {:default => Time.now + 14.day,
                                          :start_year => Time.zone.now.year,
                                          :end_year => Time.zone.now.year + 1,
                                          :minute_step => 10  },
                                   autocomplete: "off",
                                   placeholder: ' 12:30 PM',
                                   class: 'form-control timepicker',
                                   id: "timepicker-01"%>
              </div>
            </div>









def new
    @item = current_user.items.build
end


def create
    @item = current_user.items.build(item_params)
    limit_day_str = "#{params[:limit_date]} #{params[:limit_time]}"
    @item.limit_day = limit_day_str


    respond_to do |format|
      if @item.save
        format.html { redirect_to items_continue_url, notice: 'アイテムを登録しました' }

        #@user = User.find_by(id: current_user.id)
        # deliverメソッドを使って、メールを送信する
        # ItemMailer.item_email(@user, @item).deliver

        format.json { render :show, status: :created, location: @item }
      else
        format.html { render :new }
        format.json { render json: @item.errors, status: :unprocessable_entity }
      end
    end
  end


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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

JQueryのパーツを使うなら、いっそDateTimePickerを使うって言うのはどうでしょう?

http://xdsoft.net/jqplugins/datetimepicker/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/26 17:26

    デザインフレームワークを使用していて、それがJQueryのパーツなのです。

    キャンセル

  • 2015/06/26 17:30

    なるほど、ピッカー同士を横に並べて使う、というのはどうでしょうか?
    http://ryus.co.jp/blog/datepickertimepicker/
    受けるController側で送られたtext_fieldの文字列を結合、それをパースしてモデルに格納すると。

    キャンセル

0

フレームワークを利用していて、これ以外使えないとのことなので
いったん普通のフィールドで(モデルと関連付いていないフィールドで)
日付と時間を受け取って、それを連結してからモデルの属性に格納するというのはどうでしょう?

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn" type="button"><span class="fui-calendar"></span></button></span>
      <%= text_field_tag :limit_date, #ここでモデルと関連付いていないテキストフィールドを定義
        data: {:default => Time.now + 7.day, 
               :start_year => Time.zone.now.year,
               :end_year => Time.zone.now.year + 1, :minute_step => 10  },
        autocomplete: "off", 
        class: 'form-control datepicker',
        placeholder: '2016/09/28', 
        id:"datepicker-01"%>
</div>

<div class="input-group">
  <span class="input-group-btn">
   <button class="btn" type="button"><span class="fui-time"></span></button></span>
   <%= text_field_tag :limit_time,  #ここでモデルと関連付いていないテキストフィールドを定義
     data: {:default => Time.now + 7.day, 
            :start_year => Time.zone.now.year,
            :end_year => Time.zone.now.year + 1, 
            :minute_step => 10  },
     autocomplete: "off", 
     class: 'form-control timepicker',
     id: "timepicker-01"%>
</div>

で、Controllerでは
def create
  hoge = Hoge.new
  hoge.attributes = params[:hoge]
  limit_day_str = "#{params[:limit_date]} #{params[:limit_time]}"
  hoge.limit_day = limit_day_str
  if hoge.save
  # 以下略
 # ・・・
end

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/27 15:21

    ありがとうございます。試したところうまくいきませんでした。Controller部分を追記しましたが、画像のような状態となりカレンダーも表示されません

    キャンセル

  • 2015/06/28 00:23

    おっと、カレンダーの表示まではできていて、それ以降の値の受け渡しの部分が問題なのだと思っていました。
    すみません。

    提示したコードは、あくまで理解のためのサンプルであって、
    動作確認したものではありません。
    こちらをコピペしても、きちんと動作するかに関しては全く保証できません。

    あなたが利用されているJQueryのDatePickeとTimePickerがどのようなもので、
    実際にどのようにされているかについては、こちらもググって調べたに過ぎません。

    私の理解では、TimePickerとDatePickerはJQueryの処理で時間が選択された時に、
    対応するTextFieldに指定された書式のテキスト(yyyy-mm-dd, HH:MM:SS)が格納され、
    それがsubmitでPOSTされるもの、という認識だけです。

    その前提で、TextFieldに格納された値をどうやってModelのdateime属性に格納するのかで悩んでいるのだと思っていました。

    キャンセル

  • 2015/06/28 01:31

    カレンダー表示はできているのですが、f.text_fieldをtext_field_tagに変えると画像のようになってしまうのです。

    キャンセル

  • 2015/06/28 02:20

    見たところ、テキストフィールドタグをレンダリングする過程で、うまいことパラメータが渡されずに、テキストフィールドのValueとして解釈されているようですね。
    フォームヘルパのtext_fileldは、
    f.text_field :attribute_name, options
    で指定したattributeの値がValueのデフォルトに設定されますが、
    text_field_tag :param_name, value, options
    の書式で、デフォルト(ロードされたときに設定される値)は、valueに設定されたものとなります。
    ちょっと自信がありませんが、
    <%= text_field_tag :limit_time,
    Time.now + 7.day, # <-- これを追加
    data: {:default => Time.now + 7.day,
    :start_year => Time.zone.now.year,
    :end_year => Time.zone.now.year + 1,
    :minute_step => 10 },
    autocomplete: "off",
    class: 'form-control timepicker',
    id: "timepicker-01"%>
    とやってみたら、うまいことテキストフィールドがレンダリングされませんか?
    これでもレンダリングがうまくいかないのであれば、optionsの引き渡しがうまくいっていない可能性もあるので、value以降を{}で囲むなどして見たらどうでしょうか?

    キャンセル

  • 2015/06/28 18:29

    ありがとうございます。正しく挙動するようになりました。
    validate時ににも値を保持したいのでparams[:limit_date]、params[:limit_time]をそれぞ引数としました。

    attributesの使い方がわからないので下記のようにしました。
    @item = current_user.items.build(item_params)
    limit_day_str = "#{params[:limit_date]} #{params[:limit_time]}"
    @item.limit_day = limit_day_str

    お助けいただき感謝します。

    キャンセル

同じタグがついた質問を見る

  • Ruby on Rails

    8857questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • jQuery

    8157questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。