22
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AdminLTEのdaterangepickerをDatePickerまたはDatetimePickerとして使いたい

Posted at

AdminLTEを使ってる方で、DatePickerとdaterangepickerさらにDatetimePickerがpluginに入ってなかったから別でダウンロードして、結局同じようなpluginを3つも読み込んで使ってたりしてませんか?
それぞれオプションが全く違うし、イライラされてるんではないでしょうか。
そこで、daterangepickerのみ読み込んでDatePicker、DatetimePickerとして使う方法を紹介します。
##ソース

<!DOCTYPE html>
<html>
  <head>
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="admin_lte/css/AdminLTE.css">
    <link rel="stylesheet" href="admin_lte/css/skins/skin-black.css">
    <!-- daterange picker -->
    <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- jQuery 2.1.4 -->
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="admin_lte/js/app.min.js"></script>
    <!-- daterange picker -->
    <script src="plugins/daterangepicker/moment-with-locales.js"></script>
    <script src="plugins/daterangepicker/daterangepicker.js"></script>
    <script type="text/javascript">
    $(function(){
    	moment.locale('ja');
    	$('input.form-control.date').daterangepicker({
    		timePicker: false,
    		singleDatePicker: true,
    		format: 'YYYY-MM-DD'
    	});

    	$('input.form-control.datetime').daterangepicker({
    		timePicker: true,
    		timePickerIncrement: 10,
    		singleDatePicker: true,
    		format: 'YYYY-MM-DD HH:mm'
    	});
    });
    </script>
  </head>
  <body>
  <div class="container">
    <div class="row">
        <div class='col-sm-3'>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>日付</span>
                    <input type="text" class="form-control date" />
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>日時</span>
                    <input type="text" class="form-control datetime" />
                </div>
            </div>
        </div>
    </div>
  </div>
  </body>
</html>

##日付
2016-01-12_13h42_49.png
##日時
2016-01-12_13h43_02.png

##まとめ
これですっきりしましたね!

22
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?