All geek questions in one place

The choice of the drop-down list option depends on the choice of date.

Hi guys, I'm trying to create a search that has the ability to select a day.

I want to provide this option with a drop-down menu and with a calendar.

I am using Bootstrap and jQuery-UI datepicker.

My code works, both options work, BUT

I want when the user selects a day on the calendar to dynamically change the date in the drop-down menu.

Here is my code:

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

For example, if a user clicks on a calendar in October 2019, select the option to display October 2019, because I have my input as <input type="hidden" />.

Is this possible, or do I just need to have one of them?

Any feedback would be helpful.

+4
source share
2 answers

, ($( "#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>
Hide result
+3

-, , Moment .

(CDN).

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

JQuery ui-Datepicker . onSelect, .

, MMMM-YYYY.

, , . , ,

, , , .

.

, . !

$('#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/>
Hide result
+1

Source: https://habr.com/ru/post/1687551/

More articles:


All Articles