The problem is while user selecting input date field then display only month and year not date. i had tried mm/yy in my jquery but didn't worked for me. here is my code.
var onDateSelect = function(selectedDate, input) {
if (input.id === 'Start') { //Start date selected - update End Date picker
$("#End").datepicker('option', 'minDate', selectedDate);
} else { //End date selected - update Start Date picker
$("#Start").datepicker('option', 'maxDate', selectedDate);
}
};
var onDocumentReady = function() {
var datepickerConfiguration = {
dateFormat: "dd/mm/yy",
onSelect: onDateSelect
};
///--- Component Binding ---///
$('#Start, #End').datepicker(datepickerConfiguration);
};
$(onDocumentReady); // jQuery DOM ready callback registration
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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>
<input type="text" id="Start" name="start" min="2000-03" required>
<input type="text" id="End" name="start" min="2000-03" required>
I'm choose first date field it also should display month and year & second field do as same as first field except don't display previous date accordingly first date so it is working finely except displaying month & year
Not a perfect solution, but you can use <input type="month">.
<label for="start">Start month:</label>
<input type="month" id="start" name="start"
min="2020-08" value="2020-10">
You can get use mm/yy
to display only month and year ,also to you need to get date manually and then set in your datepicker. i.e :
var onDateSelect = function(selectedDate, input) {
if (input.id === 'Start') {
//getting start date
var start = $('#Start').datepicker("getDate");
console.log("start - "+start);
//setting it has mindate
$("#End").datepicker('option', 'minDate', start);
} else if(input.id === 'End'){
//getting end date
var end = $('#End').datepicker("getDate");
console.log("end - "+end);
//passing it max date in start
$("#Start").datepicker('option', 'maxDate', end);
}
};
var onDocumentReady = function() {
var datepickerConfiguration = {
onSelect: onDateSelect,
dateFormat: "mm/yy",
};
///--- Component Binding ---///
$('#Start, #End').datepicker(datepickerConfiguration);
};
$(onDocumentReady); // jQuery DOM ready callback registration
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<input type="text" id="Start" name="start" min="2000-03" required>
<input type="text" id="End" name="start" min="2000-03" required>
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