I am using datepicker-ui. I get the date that user choose and put that month in a dropdown option like this.
<!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>
It is working for month and year. Is it possible to add another select option like this :
<select name="name" id="name_id_day" style="width: 80%;float: left;">
<option value="">Any Day</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
Next to date and change the day like i am doing with the month/year?
I tried by changing the js script from :
$( 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());
});
} );
To:
$( 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", "D MM yy" );
//On change of Date from date picker, this will set value in select dropdown
$('#datepicker').change(function(){
$('#name_id').val($('#datepicker').val());
});
} );
By adding on dateFormat the day D MM YY
but after that is not working at all.
Any feedback?
You can add this code
<script type="text/javascript">
var monthyearData = "";
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: false,
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
dateFormat: 'dd MM YY',
yearRange: '2017:2020'
});
$("#datepicker").datepicker("option", "dateFormat", "d MM yy");
$('#datepicker').change(function() {
monthyearData = $('#datepicker').val().split(" ");
$('#cruise_date').val(monthyearData[1] + " " + monthyearData[2]);
$('#cruise_date_1').val(monthyearData[0]);
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.