

webデザインを初めて1年目の素人です。  
お答え頂ければ幸いです。

現在、プルダウンと連動したカレンダー機能を作成しているのですが、うまくいきません。

希望の表示としては、  
・カレンダーアイコンをクリックするとカレンダーが表示される。  
・カレンダーの日付をクリックするとプルダウンも連動して変わる。

カレンダーアイコンをクリックしてカレンダーが表示する部分はうまくいきました。

最初、プルダウンを年と月と日を分けて作成していて、その時は連動して表示ができたのですが、  
年と月を合体させた表示で連動させようとすると、年月のプルダウンは変化せず、  
日の部分に月の数字が入ってしまうといった表示になります。

参考にしたサイトは  
[https://beanb.wordpress.com/2014/10/29/フォームとカレンダーを連動（プルダウン）/](https://beanb.wordpress.com/2014/10/29/%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%A8%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E3%82%92%E9%80%A3%E5%8B%95%EF%BC%88%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%EF%BC%89/)  
<http://www.tabikobo.com/>  
の2つを参考にしました。

カレンダー部分の記述を簡単に書いていくと、  
【HTML】

[code]

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <script src="../js/script.js"></script>
    </head>
    
    <body>
        <dd id="date" class="form-inline-fix calender">
    
            <div class="sp-block">
                <select  id="year_month" class="form-control w-s">
                    <option value="">指定なし</option>
                </select><span>月</span>
    
                <select  id="day" class="form-control w-s">
                    <option value="">指定なし</option>
                </select><span>日</span>
                <input type="hidden"  name="" value="" />
            </div>
        </dd>
    </body>
    
[/code]

【JS】

[code]

    //以下は日程のプルダウンとカレンダー
    function updateSelected(date){
        console.log(date);
        $('#year_month').val(date.substring(0, 4)+'-'+date.substring(5, 7));
        $('#day').val(date.substring(8, 10));
    }
    $(function(){
    
        var myD = new Date();
        var myYear = myD.getFullYear();
        var myMonth = myD.getMonth() + 1;
        for (i = myMonth; i <= 12; i++) {
            var val = myYear + '-' + ('00' + i).slice(-2);
            var html = myYear + '年' + ('00' + i).slice(-2) + '月';
            $('#year_month').append($('<option />').val(val).html(html));
        }
        var myYear = myYear + 1;
        for (i = 1; i <= myMonth; i++) {
            var val = myYear + '-' + ('00' + i).slice(-2);
            var html = myYear + '年' + ('00' + i).slice(-2) + '月';
            $('#year_month').append($('<option />').val(val).html(html));
        }
        //1〜31の数字を生成
        for (var i = 1; i <= 31; i++) {
            if (i < 10) {
                i = '0' + i;
            }
            $('#day').append($('<option />').val(i).html(i));
        }
    
        //カレンダーからプルダウンを更新
        $('.calender').each(function() {
            var id = '#' + $(this).attr('id');
            $(id + ' input').bind('change', function() {
                var i = 0;
                var dates = $(this).val().split('/');
                $(id + ' select').each(function() {
                var year = dates[0];
                    $(this).val(dates[i]);
                    i++;
                });
            });
        });
    
        //プルダウンからカレンダーを更新
        $('.calender').each(function() {
            var id = '#' + $(this).attr('id');
            $(id + ' select').bind('change', function() {
                var i = 1;
                var dates = new Array(3);
                $(id + ' select').each(function() {
                    dates[i] = $(this).val();
                    i++;
                });
                var newdate = dates[0] + '/' + dates[1] + '/' + dates[2];
                $(id + ' input').val(newdate);
            });
        });
    
        //カレンダーの表示
        var date = new Date();
        var year = date.getFullYear();
        $.datepicker.setDefaults({
            showOn: 'button',
            buttonText:'',
            //buttonImage: '../img/calender.jpg',
            //buttonImageOnly: false,
            closeText: '閉じる',
            prevText: '前',
            nextText: '次',
            currentText: '今日',
            monthNames: ['1月','2月','3月','4月','5月','6月',
                         '7月','8月','9月','10月','11月','12月'],
            monthNamesShort: ['1月','2月','3月','4月','5月','6月',
                              '7月','8月','9月','10月','11月','12月'],
            dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
            dayNamesShort: ['日','月','火','水','木','金','土'],
            dayNamesMin: ['日','月','火','水','木','金','土'],
            weekHeader: '週',
            dateFormat: 'yy/mm/dd',
            firstDay: 0,
            isRTL: false,
            showMonthAfterYear: true,
            yearSuffix: '年',
            minDate: new Date(year, 1 - 1, 1),
            maxDate: new Date(year + 1, 12 - 1, 31)
        });
        $('.calender input').datepicker();
    
        //$('#ui-datepicker-div').hide();
    });
    
[/code]

という形になっています。

JSの設定の問題かと思うのですが原因がわかりません。

どなたかご教授お願いいたします。


CC BY-SA 3.0
2016-03-10T11:39:16.337
22988
2017-08-24T07:13:02.087
2016-03-10T23:16:24.133
12732
14733
question
javascript html5
カレンダーとプルダウンを連動させるjavascriptの設定の仕方がわかりません。


以下の二つ部分を修正すれば、問題ないになります

**【JS】**

[code]

    //カレンダーからプルダウンを更新
    $('.calender').each(function() {
        var id = '#' + $(this).attr('id');
        $(id + ' input').bind('change', function() {
            var i = 0;
            var dates = $(this).val().split('/');
            $(id + ' select')[0].value = dates[0]+'-'+dates[1];
            $(id + ' select')[1].value = dates[2];
        });
    });
    
    //プルダウンからカレンダーを更新
    $('.calender').each(function() {
        var id = '#' + $(this).attr('id');
        $(id + ' select').bind('change', function() {
            var i = 0;
            var dates = new Array(2);
            $(id + ' select').each(function() {
                dates[i] = $(this).val();
                i++;
            });
            var newdate = dates[0].replace('-','/') + '/' + dates[1];
            $(id + ' input').val(newdate);
        });
    });
    
[/code]

修正した後の結果：

[code]

    //以下は日程のプルダウンとカレンダー
    function updateSelected(date){
        console.log(date);
        $('#year_month').val(date.substring(0, 4)+'-'+date.substring(5, 7));
        $('#day').val(date.substring(8, 10));
    }
    $(function(){
    
        var myD = new Date();
        var myYear = myD.getFullYear();
        var myMonth = myD.getMonth() + 1;
        for (i = myMonth; i <= 12; i++) {
            var val = myYear + '-' + ('00' + i).slice(-2);
            var html = myYear + '年' + ('00' + i).slice(-2) + '月';
            $('#year_month').append($('<option />').val(val).html(html));
        }
        var myYear = myYear + 1;
        for (i = 1; i <= myMonth; i++) {
            var val = myYear + '-' + ('00' + i).slice(-2);
            var html = myYear + '年' + ('00' + i).slice(-2) + '月';
            $('#year_month').append($('<option />').val(val).html(html));
        }
        //1〜31の数字を生成
        for (var i = 1; i <= 31; i++) {
            if (i < 10) {
                i = '0' + i;
            }
            $('#day').append($('<option />').val(i).html(i));
        }
    
        //カレンダーからプルダウンを更新
        $('.calender').each(function() {
            var id = '#' + $(this).attr('id');
            $(id + ' input').bind('change', function() {
                var i = 0;
                var dates = $(this).val().split('/');
                $(id + ' select')[0].value=dates[0]+'-'+dates[1];
       $(id + ' select')[1].value=dates[2];
            });
        });
    
        //プルダウンからカレンダーを更新
        $('.calender').each(function() {
            var id = '#' + $(this).attr('id');
            $(id + ' select').bind('change', function() {
                var i = 0;
                var dates = new Array(2);
                $(id + ' select').each(function() {
                    dates[i] = $(this).val();
                    i++;
                });
                var newdate = dates[0].replace('-','/') + '/' + dates[1];
                $(id + ' input').val(newdate);
            });
        });
    
        //カレンダーの表示
        var date = new Date();
        var year = date.getFullYear();
        $.datepicker.setDefaults({
            showOn: 'button',
            buttonText:'○',
            //buttonImage: '../img/calender.jpg',
            //buttonImageOnly: false,
            closeText: '閉じる',
            prevText: '前',
            nextText: '次',
            currentText: '今日',
            monthNames: ['1月','2月','3月','4月','5月','6月',
                         '7月','8月','9月','10月','11月','12月'],
            monthNamesShort: ['1月','2月','3月','4月','5月','6月',
                              '7月','8月','9月','10月','11月','12月'],
            dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
            dayNamesShort: ['日','月','火','水','木','金','土'],
            dayNamesMin: ['日','月','火','水','木','金','土'],
            weekHeader: '週',
            dateFormat: 'yy/mm/dd',
            firstDay: 0,
            isRTL: false,
            showMonthAfterYear: true,
            yearSuffix: '年',
            minDate: new Date(year, 1 - 1, 1),
            maxDate: new Date(year + 1, 12 - 1, 31)
        });
        $('.calender input').datepicker();
    
        $('#ui-datepicker-div').hide();
    });
[/code]

[code]

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" media="all" />
    </head>
    
    <body>
        <dd id="date" class="form-inline-fix calender">
    
            <div class="sp-block">
                <select  id="year_month" class="form-control w-s">
                    <option value="">指定なし</option>
                </select><span>月</span>
    
                <select  id="day" class="form-control w-s">
                    <option value="">指定なし</option>
                </select><span>日</span>
                <input type="hidden"  name="" value="" />
            </div>
        </dd>
    
    
    </body>
    
    </html>
[/code]


CC BY-SA 3.0
2016-06-06T07:41:16.057
26500
2017-08-24T07:13:02.087
2017-08-24T07:13:02.087
14019
14019
22988
answer