更改下拉选择选项取决于日期选择器选择答案

【问题标题】：Change dropdown select option depend on datepicker select更改下拉选择选项取决于日期选择器选择
【发布时间】：2018-03-27 22:43:37
【问题描述】：

我正在尝试创建一个可以选择一天的搜索。

我想通过下拉选择和日历提供该选项。

我正在使用 Bootstrap 和 JQuery-UI 日期选择器。

我的代码正在运行，两个选项都在运行，但是

我希望当用户在日历上选择一天时也可以动态更改下拉列表中的日期。

这是我的代码：

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

例如，如果用户单击 2019 年 10 月日历，则选择显示 2019 年 10 月的选项，因为我的输入为 <input type="hidden" />。

这可能吗，还是我应该只选择其中之一？

【问题讨论】：

那么，你想要：如果用户选择 2017 年 10 月 23 日，下拉选择的选项应该是 2017 年 10 月？
@MayankPatel 是的，没错。如果我可以在月前添加另一个选项并更改它们，那就更好了

标签： javascript jquery html twitter-bootstrap datepicker

【解决方案1】：

可以通过格式化日期输出格式（$( "#datepicker" ).datepicker( "option", "dateFormat", "MM yy" );）然后设置下拉值（$('#name_id').val($('#datepicker').val());）来完成。尝试运行下面的代码 sn -p

<!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();
	  //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" );
	  //On change of Date from date picker, this will set value in select dropdown
	  $('#datepicker').change(function(){
			$('#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 年 1 月，则 2017 年 1 月不会插入到日期下拉列表中。
因为，Dropdown 的静态值是 2018 年 1 月而不是 2017 年。如果您尝试选择 2018 年 1 月以后的任何日期，则会填充下拉菜单。您可以继续在静态下拉列表中添加特定月份值。
@AniketWarey 我添加了另一个带有日期的选择选项。也有可能得到一天吗？我尝试添加 $( "#datepicker" ).datepicker( "option", "dateFormat", "d" ); //从日期选择器更改日期时，这将在选择下拉列表中设置值 $('#datepicker').change(function(){ $('#day_id').val($('#datepicker').val ());});但不工作

【解决方案2】：

首先，我想告诉你，我使用 Moment 库来解释日期。

您只需在您的代码（CDN）中包含以下库链接。

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

现在，我使用 Jquery ui-Datepicker 进行日期选择器初始化。在其中，我使用 onSelect 更改事件来获取所选日期。

然后，我利用这个时刻以MMMM-YYYY 的格式获取月份和年份。

最后，我已经在下拉菜单中设置了这个选项。我还会检查选项是否已经存在，不要将其插入下拉菜单中

因此，无论您选择什么日期，该月份都会被插入到下拉列表中并被选中。

下面是小提琴链接。

Fiddle link

如果它符合您的要求，请告诉我。谢谢！

$('#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){
    	 $('#name_id').append( '<option value="'+drop_option+'">' + drop_option + '</option>');
    }
  	$("#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/>

【讨论】：