Menu
I am trying to create a search that has as option to choose a day.
I want to give that option with drop-down select and with a calendar as well.
I am using Bootstrap and JQuery-UI datepicker.
My code is working, both of options are working BUT
I want when user select a day on calendar to change dynamically the date on dropdown as well.
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>e.g If user click on calendar October 2019 select option to display Oct 2019, because I have my input as <input type="hidden" />.
Is that possible or should I just prefer have one of these?
615
It can be done by formatting the date output format ($( "#datepicker" ).datepicker( "option", "dateFormat", "MM yy" );) and then setting the drop down value($('#name_id').val($('#datepicker').val());).
Try running below code snippet
<!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>Firstly, I want to tell you that I have used the Moment library for the Date interpretation.
You just need to include the below library link in your code(CDN).
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js.
Now, I have used the Jquery ui-Datepicker for the date picker initialization.In it, I have used the onSelect change event to get the selected date.
Then, I have used the moment to get the month and year in the format MMMM-YYYY.
And finally, I have set this option in the drop-down.I also check if option already exists, don't insert it in the dropdown
So, whatever date you will select, that month will be inserted into the drop-down and also selected.
Below is the fiddle link.
Fiddle link
Let me know if it fits your 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){
$('#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/>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
