更改下拉選擇選項取決於datepicker選擇

嘿傢伙我試圖創建一個搜索，可以選擇一天的選項。更改下拉選擇選項取決於datepicker選擇

我想給下拉選擇和日曆以及該選項。

我正在使用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>

e.g如果日曆2019年10月選擇選項用戶點擊顯示2019年10月，因爲我有我的輸入作爲<input type="hidden" />。

這是可能的，還是應該我更喜歡這些？

任何反饋將是有益的

來源

2017-10-16 Maria

所以，你想：如果用戶選擇23 - 10月2017年，下拉選擇的選項應該是2017年十月？ –

@MayankPatel是的。甚至更好，如果我可以在月前添加另一個選項並更改它們兩者 – Maria

它可以通過格式化日期輸出格式（$("#datepicker").datepicker("option", "dateFormat", "MM yy");），然後設置下拉值（$('#name_id').val($('#datepicker').val());）來完成。下面的代碼嘗試運行片斷

<!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月不會插入到日期下拉列表中。 –

因爲，Dropdown的靜態值爲2018年1月，而非2017年。如果您嘗試從2018年1月起選擇任何日期，則會填充下拉菜單。您可以繼續在靜態下拉菜單中添加特定的月份值。 –

哦！我明白了。謝謝澄清。 –

首先，我想告訴你，我已經使用了瞬間庫日期解釋。

您只需在代碼中包含以下庫鏈接（CDN）。

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

，我已經使用了jQuery UI的，日期選擇器的日期選擇器initialization.In它，我已經使用了onSelect變化事件獲得選定的日期。

然後，我用這一刻得到格式爲MMMM-YYYY的月份和年份。

最後，我已在下拉菜單中就弄傷這個選項也檢查選項已經存在，不要在下拉

那麼插入它，你會選擇什麼日期，該月會插入到下拉列表中並且選中。

下面是小提琴鏈接。

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

更改下拉選擇選項取決於datepicker選擇

回答

相關問題