datetimepickerの値を取得

bootstrapのdatetimepickerで変更された値を取得して、取得した日付をもとに一覧の表示をしようとしているのですが
変更された日付が取得できません。

console.log(dateText)で確認しても何も表示されず、onSelect: function(dateText, inst)の内の処理に入ってこない
ことまで確認しました。ググったのですが、なぜこの処理に入らないのかがわかりませんでした。

すいません、お分かりの方いらっしゃいましたらご教授お願い致します。

html
1    <div class="col-xs-2 input-group month pull-left">
2        <input type="text" id="select_ym" name="">
3        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
4    </div>
5
6    <script type="text/javascript">
7
8        $(function(){
9            var date = new Date();
10	        var year = date.getFullYear();
11	        var month = date.getMonth();
12
13	        var currentMonth = new Date(year, month, 1);
14
15	        $('#select_ym').datetimepicker({
16		        locale: 'ja',
17		        format : 'YYYYMM',
18		        viewMode: "months",
19                defaultDate: moment(currentMonth, 'YYYYMM')
20	        });
21
22            $('#select_ym').datetimepicker({
23                onSelect: function(dateText, inst) {
24                    console.log(dateText);
25                }
26            });
27        });
28    </script>

行動規範の内容に同意します

回答1件

ベストアンサー

http://eonasdan.github.io/bootstrap-datetimepicker/
のサンプルでdp.changeとなっておりますので

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

</head>
<body>
    <div class="col-xs-2 input-group month pull-left">
        <input type="text" id="select_ym" name="">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>

    <script type="text/javascript">

        $(function(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth();

            var currentMonth = new Date(year, month, 1);

            $('#select_ym').datetimepicker({
                locale: 'ja',
                format : 'YYYYMM',
                viewMode: "months",
                defaultDate: moment(currentMonth, 'YYYYMM')
            })
            .on("dp.change", function(e) {
                console.log(e.date.format(e.date._f));
            });
        });
    </script>
</body>
</html>

これでコンソールに出るのは確認しました

投稿2017/12/22 06:59