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

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

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

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

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

参考にしたサイトは
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】

                        <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>

【JS】
//以下は日程のプルダウンとカレンダー

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();

});

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

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

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

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

回答1件

ベストアンサー

以下の箇所を

//カレンダーからプルダウンを更新
$('.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 + ' input').bind('change', function() { 
        var i = 0; 
        var dates = $(this).val().split('/'); 
        $(id + ' select').each(function() {

if (i == 0) {
$(this).val(dates[0] + '-' + dates[1]);
} else {
$(this).val(dates[2]);
}
i++;
});
});
});

にすれば直ると思います。

$(id + ' select').eachでは、年月、日という順番にコントロールが入ってくるようですが、
セットしているのは年、月、日なので、2番目のコントロールに月がセットされるのだと思います。

また、余計なお世話かもしれませんが、$(id + ' select').eachではなく、
$('#year_month').val('2016-03');
$('#day').val('10');
のようにセットした方がわかりやすいコードになると思います。

投稿2016/03/10 12:03

編集2016/03/10 12:13

ToshinoriNamiki

総合スコア18

KyutoYosihama

2016/03/11 12:46

if文を入れて条件分岐させる発想が抜け落ちていました。助かりました！ありがとうございます！あと $(id + ' select').eachではなく、 $('#year_month').val('2016-03'); $('#day').val('10'); のようにセットした方がわかりやすいコードになると思います。の部分なんですが、$(id + ' select').eachの部分をそのまま $('#year_month').val('2016-03'); $('#day').val('10'); にセットしてみたところカレンダーのアイコンが消えてしまったのですが、どのような記述にしたら良いでしょうか？当方の理解不足ですいません。答えていただけたら幸いです。よろしくお願いいたします。

ToshinoriNamiki

2016/03/12 07:40 編集

updateSelected関数を元にコードを書いたのですが、問題があるコードだったんですね…。申し訳ないですが、時間が経ってしまって再現する環境を消してしまいました。再度環境を作る時間が取れません。自分はjQueryも詳しくないので、' select'について調べてもらうか、新たに質問してもらったほうが良いかもしれません。 //プルダウンからカレンダーを更新 $(id + ' input').val(newdate); 上記の記述に問題がないようなのでちょっと合ってるかわかりませんが、 $('#year_month select').val('2016-03'); $('#day select').val('10'); でうまくいったりしないでしょうか？

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