読者です 読者をやめる 読者になる 読者になる

jQueryでDateTimePickerの実装

DatePickerはよく使っていましたが、DateTimePickerもあるみたいです。
使い方は簡単。(Rails3アプリで実装しています)

jQueryのインストール

Gemfile に一行追加します

gem 'jquery-rails'

jQueryをインストールします

$ rails g jquery:install

アプリの設定

app/views/layouts/application.html.erb に追加します

<!-- Themaは自分の好きなものをDLしてください -->
<link type="text/css" href="/stylesheets/black-tie/jquery-ui-1.8.9.custom.css" rel="stylesheet" />  

<!-- jqueryui -->                                                                                 
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jqueryui', '1.8.9');
</script>

<!-- datetimepicker -->
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(function(){
  $('.datetimepicker').datetimepicker({
    inline: true,
    dateFormat: 'yy/mm/dd'
  });
});
</script>

あとはdatetimepickerを適用したいフォームをこんな感じで書けばOKです。

<%= f.text_field :created_at, :size => 15, 
 :class => 'datetimepicker',
 :value => f.object.created_at ? f.object.created_at.strftime('%Y/%m/%d %H:%M') : '' %>

f:id:t-taira:20110219005750p:image