更改下拉选择选项取决于datepicker选择

Question

更改下拉选择选项取决于datepicker选择

Mar*_*ria 5 html javascript jquery datepicker twitter-bootstrap

嘿伙计们,我正在尝试创建一个可以选择一天的搜索.

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

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

Run Code Online (Sandbox Code Playgroud)

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

这是可能的还是我应该更喜欢这些？

任何反馈都会有所帮助

Answer 1

A W*_*A W 4

可以通过格式化日期输出格式 ( $( "#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();
	  //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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，5 月前
查看次数：	3028 次
最近记录：	8 年，5 月前