25149


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表記であれば問題なく表示されます。


CC BY-SA 3.0
2016-05-23T14:07:11.427
25115
2018-12-27T09:02:23.623
2018-12-27T09:02:23.623
76
13175
question
javascript ruby-on-rails jquery
datetimepickerでAM/PM表記から24時間表記に変更できない。


こちらではどうですか？

[code]

    $('#datetimepicker_05').datetimepicker({
        format: 'Y/m/d H:i'
    });
    
[/code]


CC BY-SA 3.0
2016-05-24T05:04:20.650
25130
2016-05-24T05:04:20.650
15614
25115
answer


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

[code]

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


CC BY-SA 3.0
2016-05-24T08:52:55.477
25133
2016-05-24T08:52:55.477
15619
25115
answer


bootstrap-
datetimepickerが使っている[momentのリファレンス](http://momentjs.com/docs/#/displaying/format/)によりますと`HH`か`H`で24時間表示になります。(`HH`だと午前3時が03:00になりますが、`H`だと3:00になります)

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

[code]

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


CC BY-SA 3.0
2016-05-24T11:03:34.050
25138
2016-05-24T11:03:34.050
14928
25115
answer


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

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

[code]

    $('#datetimepicker1').datetimepicker();
    $('#datetimepicker1').datetimepicker({format: 'YYYY/MM/DD HH:mm'});
[/code]

[code]

    <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>
[/code]

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

[code]

    $('#datetimepicker1').datetimepicker({format: 'YYYY/MM/DD HH:mm'});
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2016-05-25T03:12:32.110
25149
2016-05-25T03:12:32.110
8000
25115
answer

[code]

    $.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'
      }
        );
    
[/code]

* * *
[code]

    (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)
    
[/code]


CC BY-SA 4.0
2016-07-27T10:53:45.267
27885
2018-12-27T07:26:55.970
2018-12-27T07:26:55.970
31539
17300
25115
answer