ドロップダウンの選択オプションを変更する日付ピッカーに応じて選択

おはよう私は1日を選択するオプションを持つ検索を作成しようとしています。ドロップダウンの選択オプションを変更する日付ピッカーに応じて選択

私はこのオプションにドロップダウン選択とカレンダーを付けたいと考えています。

私はBootstrapとJQuery-UIのdatepickerを使用しています。私のコードが動作している

、オプションの両方が動作しているが、ユーザが同様に動的にドロップダウンの日付を変更するには、カレンダー上の日付を選択すると

は私がしたいです。ここで

は私のコードです：

<div class="input-group col-lg-2 col-md-12 col-sm-12 search"> 
 
     <label class="bd-form-label" style="float: left;width: 100%;">Dates</label> 
 
     <select name="name" id="name_id" style="width: 80%;float: left;"> 
 
      <option value="">Any Month</option> 
 
      <option value="October 2017">October 2017</option> 
 
      <option value="November 2017">November 2017</option> 
 
      <option value="December 2017">December 2017</option> 
 
      <option value="January 2018">January 2018</option> 
 
     </select> 
 
     <input type="hidden" id="datepicker" class="hasDatepicker" value="16-Oct-2017" style=""> 
 
      <img class="ui-datepicker-trigger" src="http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" alt="..." title="..."> 
 
    </div>

例えば、私は<input type="hidden" />として私の入力を持っているので、2019年10月を表示するカレンダー上でユーザーがクリック2019年10月オプションを選択した場合。

これは可能なのでしょうか、それともどちらか一方が好きなのですか？

任意のフィードバックは、日付の出力形式（$("#datepicker").datepicker("option", "dateFormat", "MM yy");）をフォーマットし、その値（$('#name_id').val($('#datepicker').val());）ドロップダウンを設定することによって行うことができる

出典

2017-10-16 Maria

だから、あなたがしたい：ユーザーは2017年10月23日を選択した場合は、ドロップダウン選択したオプションは、2017年10月すべきですか？ –

@MayankPatelはいそうです。さらに、月の前に別のオプションを追加して両方を変更できる場合はさらに便利です – Maria

有用であろう。コードスニペットまず

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Datepicker - Format date</title> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    $("#datepicker").datepicker(); 
 
\t //Below line will set format for date "Month year" .Note This format is custom,according to the drop down value 
 
     $("#datepicker").datepicker("option", "dateFormat", "MM yy"); 
 
\t //On change of Date from date picker, this will set value in select dropdown 
 
\t $('#datepicker').change(function(){ 
 
\t \t \t $('#name_id').val($('#datepicker').val()); 
 
     }); 
 
    }); 
 
    
 
    
 
    </script> 
 
</head> 
 
<body> 
 
    
 
<p>Calendar: <input type="text" id="datepicker" size="30"></p> 
 
    
 

 
<div class="input-group col-lg-2 col-md-12 col-sm-12 search"> 
 
     <label class="bd-form-label" style="float: left;width: 100%;">Dates</label> 
 
     <select name="name" id="name_id" style="width: 80%;float: left;"> 
 
      <option value="">Any Month</option> 
 
      <option value="October 2017">October 2017</option> 
 
      <option value="November 2017">November 2017</option> 
 
      <option value="December 2017">December 2017</option> 
 
      <option value="January 2018">January 2018</option> 
 
     </select> 
 
</div> 
 
    
 
    
 
</body> 
 
</html>

出典

2017-10-16 13:07:59

カレンダーで2017年1月を選択すると、2017年1月は[日付]ドロップダウンに挿入されません。 –

ドロップダウンには2017年ではなく2018年1月の静的値があるため、2018年1月から任意の日付の日付を選択すると、ドロップダウンが表示されます。あなたは先に進んで静的なドロップダウンに特定の月の値を追加することができます。 –

ああ！私はそれを得た。明確化のためにありがとう。 –

の下に実行してみてください、私は日付の解釈のためのモーメントのライブラリを使用していることをお伝えしたいと思います。

あなたのコード（CDN）には、以下のライブラリリンクを含める必要があります。

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js。

さて、私はそれinitialization.In日付ピッカーのためのjQuery UI-日付ピッカーを使用している、私が選択した日付を取得するためにonSelect変更イベントを使用していました。

次に、月と年をフォーマットMMMM-YYYYで取得するために瞬間を使用しました。

そして最後に、私はオプションがすでに存在する場合にも、月がなることを、あなたが選択されますどんな日、だから、ドロップダウンに

を挿入しないでください、チェックドロップdown.Iでこのオプションを設定していますドロップダウンに挿入され、選択されます。

以下は、フィドルリンクです。

Fiddle link

それはあなたのrequirements.Thanksに合うなら、私を知ってみましょう！

$('#date1').datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showButtonPanel: true, 
 
    dateFormat: "mm/dd/yy", 
 
    onSelect: function(dateText) { 
 
    var monthObj=moment(dateText,"MM/DD/YYYY"); 
 
    var drop_option=monthObj.format('MMMM YYYY'); 
 
    if($("#name_id option[value='"+drop_option+"']").length == 0){ 
 
    \t $('#name_id').append('<option value="'+drop_option+'">' + drop_option + '</option>'); 
 
    } 
 
    \t $("#name_id option[value='"+drop_option+"']").prop('selected', true); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 
 
<div class="input-group col-lg-2 col-md-12 col-sm-12 search"> 
 
     <label class="bd-form-label" style="float: left;width: 100%;">Dates</label> 
 
     <select name="name" id="name_id" style="width: 80%;float: left;"> 
 
      <option value="">Any Month</option> 
 
      <option value="October 2017">October 2017</option> 
 
      <option value="November 2017">November 2017</option> 
 
      <option value="December 2017">December 2017</option> 
 
      <option value="January 2018">January 2018</option> 
 
     </select> 
 
     <input type="hidden" id="datepicker" class="hasDatepicker" value="16-Oct-2017" style=""> 
 
      <img class="ui-datepicker-trigger" src="http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" alt="..." title="..."> 
 
    </div> 
 
    <input type="text" id="date1" name="date1"/> <br/>

出典

2017-10-16 13:09:34

ドロップダウンの選択オプションを変更する日付ピッカーに応じて選択

答えて

関連する問題