Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

bootstrap3 DatetimePickerを使ったときに迷ったのでメモ

More than 3 years have passed since last update.

bootstrap3 DatetimePickerを使いたい・・・

こちらの記事Bootstrap 3でDatetimePickerを使いたいを参考に導入してみましたが、現バージョンと違うところがありハマってしまいました。
勝手ながら補足させていただきます。m(__)m

最新のjQueryだとうまく動かない!?

コピペで作ってみました

test.html
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <!--jquery 最新-->
    <script type="text/javascript" src="~/Scripts/jquery-3.1.0.min.js"></script>
    <!--日付処理用 最新-->
    <script type="text/javascript" src="~/Scripts/moment.js"></script>![無題3.jpg](https://qiita-image-store.s3.amazonaws.com/0/90337/1832aa85-5adf-471f-885d-2eab879e8345.jpeg)

    <!--bootstrap3 最新-->
    <script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
    <!--datetimepicker 最新-->
    <script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
    </script>
    <link rel="stylesheet" href="~/Content/bootstrap.css" />
    <link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.css" />
    <title>Index</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        </div>
</body>
</html>

あれ、なんかエラーがでます

無題3.jpg

何度も公式のプログラムと見比べてみました・・・

どうやらjqueryのバージョンが原因だったようです。公式のサンプルのソースと同じ2.1.1にしました

test.html
<script type="text/javascript" src="~/Scripts/jquery-2.1.1.min.js"></script>

無題.png
できた!!

kuzira_mood
世間の流れについて行けてないです
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away