質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.58%

カレンダーとプルダウンを連動させるjavascriptの設定の仕方がわかりません。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,386

score 30

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】

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


【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の設定の問題かと思うのですが原因がわかりません。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

以下の箇所を

//カレンダーからプルダウンを更新 
    $('.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/11 21:46

    if文を入れて条件分岐させる発想が抜け落ちていました。
    助かりました!ありがとうございます!

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

    の部分なんですが、$(id + ' select').eachの部分をそのまま
    $('#year_month').val('2016-03');
    $('#day').val('10');
    にセットしてみたところカレンダーのアイコンが消えてしまったのですが、
    どのような記述にしたら良いでしょうか?

    当方の理解不足ですいません。
    答えていただけたら幸いです。よろしくお願いいたします。

    キャンセル

  • 2016/03/12 16:39 編集

    updateSelected関数を元にコードを書いたのですが、
    問題があるコードだったんですね…。

    申し訳ないですが、時間が経ってしまって再現する環境を消してしまいました。
    再度環境を作る時間が取れません。
    自分はjQueryも詳しくないので、' select'について調べてもらうか、
    新たに質問してもらったほうが良いかもしれません。

    //プルダウンからカレンダーを更新
    $(id + ' input').val(newdate);

    上記の記述に問題がないようなのでちょっと合ってるかわかりませんが、
    $('#year_month select').val('2016-03');
    $('#day select').val('10');
    でうまくいったりしないでしょうか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る