更改下拉选择选项取决于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选择

回答

相关问题