datetimepickerでAM/PM表記から24時間表記に変更できない。


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




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]




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]

