jQuery UI datepickerで特定の日付を選択すると特定のHTMLコンテンツを表示するにはどうすればいいですか？

これは明白なことです（前に質問されたことがある場合）。しかし、これを書く前に検索しましたが、おそらく私の答えはどこかにありましたが、私はこれを初めて知ったので残念です私はそれを逃した場合。jQuery UI datepickerで特定の日付を選択すると特定のHTMLコンテンツを表示するにはどうすればいいですか？

私はアーカイブとしてカレンダーを設定するためにJquery UIのdatepickerを使用しようとしています。誰かがカレンダーから日付をクリックして、その日のイベントを詳細に表示することができます。

コード：人々が実際にイベントがある日を探し、目的なしに閲覧しないように、同じテーマで

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Datepicker - Icon trigger</title> 
    <link rel="stylesheet" href="vendors/js/jquery-ui.css"> 
    <script src="vendors/js/jquery-1.12.3.min.js"></script> 
    <script src="vendors/js/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "images/calendar.gif", 
     buttonImageOnly: true, 
     buttonText: "Select date" 
    }); 
    }); 
    </script> 
</head> 
<body> 

<p>Date: <input type="text" id="datepicker"> test</p> 

</body> 
</html>

、どのように私は、カレンダーに実際にイベントを持っている日付をマークすることができます？

出典

2016-04-13 elyiz

はイベントですか？いくつかのデータベースで？ – boomcode

@ yuri-tkachenko私はhtmlコードに追加するだけで、日付が選択されるまで非表示のままにしておくことをお勧めします。例：

Title details etc.

しかし、それができない場合は、どんな提案も良いでしょう。 – elyiz

を見てください：http://api.jqueryui.com/datepicker/#option-onSelect – user3284463

あなたの質問にちょうど非常に速い答えは、日付ピッカー（http://api.jqueryui.com/datepicker/#option-onSelect）に関数onSelectを定義して、表示するものを制御するために使用することができます。

私は非常に簡単なデモを行いました。

HTML：

<p>Date: <input type="text" id="datepicker" />Test</p> 

<div id="log"> 
    <div class="event" id="event-2016-04-13"> Title details etc. 13 </div> 
    <div class="event" id="event-2016-04-12"> Title details etc. 12 </div> 
</div>

CSS：

.event { 
    display: none; 
}

JS（修正）：

$(function() { 
    $("#datepicker").datepicker({ 
    showOn: "button", 
    buttonImage: "images/calendar.gif", 
    buttonImageOnly: true, 
    buttonText: "Select date", 
    //added 
    dateFormat: "yy-mm-dd", 
    onSelect: function(dateText, datepicker) { 
     // hide all events 
     $('#log').find('.event').hide(); 
     // show only one that selected 
     var event = '#event-' + dateText; 
     $(event).show(); 
    } 
    }); 
});

デモ：jsfiddle.net/m0y3fc9x/4

出典

2016-04-13 11:37:18

これはまさに私が探していたものです！どうもありがとうございました！もう1つの質問。どうすれば別の日付を選択しても前回の予定を再び隠すことはできますか？ – elyiz

@elyiz updated answer。 '$（ '＃log'）。find（ '。event'）。hide（）;'この行はトリックです！ ;） –

パーフェクト！ありがとうございました！そして、私は実際にそこにあなたの解説の助けを借りて、JSで起こっていることを理解しています！ – elyiz

jQuery UI datepickerで特定の日付を選択すると特定のHTMLコンテンツを表示するにはどうすればいいですか？

答えて

関連する問題