1

rails で bootstrap3-datetimepicker-rails の gemを導入し、
カレンダーの入力機能を実装しております。

デフォルトだと、AM・PMで入力時間が表示されるため、
24時間のフォーマットに変更しようと思っております。

調べていると以下のようにするとできるみたいなのですが、上手く行きませんでした。

$('#datetimepicker_05').datetimepicker({format: 'YYYY/MM/DD HH:mm'});

他にもこういうのとか、手当たり次第に試したのですが、ダメでした。
https://stackoverflow.com/questions/12974697/datetimepicker-am-pm-dropdown

原因がわからないのですが、どなたか、心当たりのある方はいらっしゃいますでしょうか?

ブラウザのjavascriptコンソールにはエラーが表示されず、AM/PM表記であれば問題なく表示されます。

3
  • 上手くいかない、というのがformatを指定しない場合と同じ動きをするということなら、YYYY/MM/DD を除いてみると日付選択は消えるでしょうか?また、初期化時に設定する代わりに $(...).data('DateTimePicker').format(...) とするとどうでしょうか?
    – unarist
    Commented 2016年5月25日 0:09
  • bootstrap3-datetimepicker-railsのサンプルをベースに試したところ、format指定がdata属性で行われていたのでこれを変更すると24時間表記にできました。 github.com/unarist/bs3dp-test/commit/a55184e
    – unarist
    Commented 2016年5月25日 0:35
  • ご回答ありがとうございます。 「format指定がdata属性で行われていたのでこれを変更すると‌​24時間表記にできました。」←こちらを試しますと、上手く行きました。本当にありがとうございます。javascriptの方ばかりを見ておりました。
    – zyosh
    Commented 2016年5月25日 2:18

5 件の回答 5

1

formatの形式に問題はないと思うので、以下のような点が考えられます。今回の場合は後者だったようですね。

  • 既に初期化されている場合、二回目の初期化はオプション含め無視されます

$('#datetimepicker1').datetimepicker();
$('#datetimepicker1').datetimepicker({format: 'YYYY/MM/DD HH:mm'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.14.30/src/js/bootstrap-datetimepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.14.30/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<div class="input-group date" id="datetimepicker1">
  <input type="text" class="form-control" />
  <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>

  • <input> 要素のdata属性でformatを指定していると、初期化時のformatは無視されます

$('#datetimepicker1').datetimepicker({format: 'YYYY/MM/DD HH:mm'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.14.30/src/js/bootstrap-datetimepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.14.30/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<div class="input-group date" id="datetimepicker1">
  <input type="text" class="form-control" data-date-format="YYYY/MM/DD" />
  <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>

1
  • 「format指定がdata属性で行われていたのでこれを変更すると‌​24時間表記にできました。」 ←こちらにて解決しました。また、解決策と異なる回答にチェックマークをつけてしまいましたため、チェックマークを更新しました。非礼をお許しください。
    – zyosh
    Commented 2016年5月25日 9:03
0

bootstrap-datetimepickerが使っているmomentのリファレンスによりますとHHHで24時間表示になります。(HHだと午前3時が03:00になりますが、Hだと3:00になります)

HHはもうすでに試したようですので、原因は$('#datetimepicker_05').datetimepicker({format: 'YYYY/MM/DD HH:mm'});の呼びがが早すぎるのではないかと思います。以下のようにdocument.readyで呼び出すと、ちゃんと表示されるはずです。

$(function () {
    $('#datetimepicker_05').datetimepicker({format: 'YYYY/MM/DD HH:mm'});
});
2
  • ご回答ありがとうございます。 document.readyで呼び出す方法でも試してみました。 しかし、ダメでした。 また、試しに sideBySide: true や showTodayButton: true をすると、上手くいきました。 そのため、余計に理由がわかりません・・・。
    – zyosh
    Commented 2016年5月24日 16:44
  • 1
    別の方からの回答で解決しました。 「format指定がdata属性で行われていたのでこれを変更すると‌​24時間表記にできました。」←こちらを試しますと、上手く行きましたjavascriptの方ばかりを見ておりview側は失念しておりました・・・。
    – zyosh
    Commented 2016年5月25日 2:19
0
$.datetimepicker.setLocale('ja');
  $('.some_class').datetimepicker({
        i18n:{
      ja:{
       months:[
        '1月','2月','3月','4月',
        '5月','6月','7月','8月',
        '9月','10月','11月','12月',
       ],
       dayOfWeek:[
        "日", "月", "火", "水",
        "木", "金", "土",
       ]
      }
     },
      format: 'Y-m-d H:i',///   hを大文字に変更すればOKでした!
      timepicker:true,
      lang:'ja'
  }
    );

(function( $ ){
  $.datetimepicker.setLocale('ja');
  $('.some_class').datetimepicker({
        i18n:{
      ja:{
       months:[
        '1月','2月','3月','4月',
        '5月','6月','7月','8月',
        '9月','10月','11月','12月',
       ],
       dayOfWeek:[
        "日", "月", "火", "水",
        "木", "金", "土",
       ]
      }
     },
      format: 'Y-m-d h:i',
      timepicker:false,
      lang:'ja',
      use24hours: true, << 24時間
   }
  );
})(jQuery)
-1

こちらではどうですか?

$('#datetimepicker_05').datetimepicker({
    format: 'Y/m/d H:i'
});
2
  • ありがとうございます。早速試したのですが、結果はダメでした。railsで実装しているのですが、何か他のgemなり、javascriptが干渉しているのでしょうか?少なくともjavascriptコンソールにはエラーが出ていないので、よくわからないですが・・・・。
    – zyosh
    Commented 2016年5月24日 7:48
  • 別の方からの回答で解決しました。 「format指定がdata属性で行われていたのでこれを変更すると‌​24時間表記にできました。」←こちらを試しますと、上手く行きましたjavascriptの方‌​ばかりを見ておりview側は失念しておりました・・・。
    – zyosh
    Commented 2016年5月25日 2:19
-1

formatで「H」は12時間のフォーマットになっています。
24時間のフォーマットを使いたい場合は「h」と書きます、例えば

$('#datetimepicker_05').datetimepicker({format: 'YYYY/MM/DD hh:mm'});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。