Develop Reference

Date Picker control not working as expected for 'dd-mm-yyyy' format in MS Edge

I am using the Datepicker via bootstrap JavaScript. I have this code:
<div class="col-sm-4">
#Html.TextBoxFor(m => m.Trust.EstablishmentDate, "{0:dd-MM-yyyy}", new { id = "establishmentDate", #readonly = "readonly", #class = "datefield form-control" })
#Html.ValidationMessageFor(m => m.Trust.EstablishmentDate, null, new { #class = "help-block" })
</div>
$(document).ready(function () {
$("#establishmentDate").datepicker({
changeMonth: true,
changeYear: true,
format: 'dd-mm-yyyy',
});
});
The above code worked fine while publishing it in IE, displaying and recognizing the date in the required dd-mm-yyyy format from date picker.
But the same code is not working as expected in the Edge browser where the below error is getting prompted:
The required field must be a date.
It's recognizing the format as mm-dd-yyyy and hence the above error appears when it finds the month as invalid for the cases like 22-06-22, where as for cases like 02-06-22, its recognizes as 6th Feb.

Bootstrap datepicker - Display in M YYYY, Send data to server in MMYYYY format

Using bootstrap datepicker to pick a date. Everything works fine as expected. But, because of server restriction we need to send data on submit like "022021" instead of "Feb 2021" now.
Not sure how to send data after formatting from original? Can help to provide any documentation or hints?
Thanks
$.fn.datepicker.defaults.format = 'M yyyy';
$('[data-key="from_date"]').datepicker({
format: 'M yyyy',
viewMode: 'months',
minViewMode: 'months',
autoclose: true,
todayHighlight: true,
endDate: new Date()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="from_date" data-key='from_date' />
<input type="submit" class="submit-date">

I test it in Fiddle.
Bootstrap v4.5.2
Datepicker for Bootstrap v1.9.0
This code should work.
<input type="text" class="form-control" id="date">
And this is the simple Javascript
$('#date').datepicker({
format: 'mmyyyy',
});
The result is
022021

Here you can set 2 formats 1 for display and 1 for getting data from backend.
$('.datepicker').datepicker({
format: {
toDisplay: function (date, format, language) {
var d = new Date(date);
d.setDate(d.getDate() - 7);
return d.toISOString();
},
toValue: function (date, format, language) {
var d = new Date(date);
d.setDate(d.getDate() + 7);
return new Date(d);
}
},
autoclose: true
});

jquery datepicker onselect event shows invalid date in IE 11

I have this code in my web application (see jsfiddle) ..
https://jsfiddle.net/6cgzuymh/2/
The problem is my users use both IE and chrome and this code works fine on chrome but not on IE 11.
and when I try to run the above jsfiddle on IE 11 it doesn't work. Does any body has any solution for this ?
The alert in first onselect method throws invalid date in IE but works fine in Chrome.
I have found one thing that if I remove the date format it works in IE as well, but I need dd-M-yy format as the client is from UK.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
From:
</td>
<td>
<input type="text" id="txtFrom" />
</td>
<td>
</td>
<td>
To:
</td>
<td>
<input type="text" id="txtTo" />
</td>
</tr>
</table>
$("#txtFrom").datepicker({
changeMonth: true,
changeYear: true,
showAnim: "slideDown",
dateFormat: "dd-M-yy",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
alert(dt); /// <<-------------------------------- throws invalid date in IE
$("#txtTo").datepicker("option", "minDate", dt);
}
});
$("#txtTo").datepicker({
changeMonth: true,
changeYear: true,
showAnim: "slideDown",
dateFormat: "dd-M-yy",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
///$("#txtFrom").datepicker("option", "maxDate", dt);
}
});

Your date format is wrong. Instead of dd-M-yy you need to write yy-mm-dd.
$("#txtFrom").datepicker({
changeMonth: true,
changeYear: true,
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
onSelect: function (selected) { }
});
https://jsfiddle.net/zfgh0ce2/
You want to make a date from new Date('04-Nov-2019') which isn't a IETF-compliant RFC 2822 or ISO 8601 date string.
-> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

How to create multiple bootstrap datetime picker while doing itereation

Hi guys am iterating the database records in jsp using iterator. Here per each iteration text,startdatetime picker and end datetime picker. i have used date time picker with id creates a problem. I dont know how many rows i gonna iterate how can i solve this?
In fiddle you may suggest me like this run one for loop with 5 iteration with in the first column some simple text second column start datetime picker and third column end datetime picker
<s:iterator value="%{#session.subjectlist}" status="resultstatus">
<td><s:property value="#resultstatus.count" /></td>(this is serial number like 1,2,3 etc used as id in datetime picker)
<td><s:property /></td>(this is a simple text)
<td>
<div class='input-group date' id="<s:property value="#resultstatus.count"/>">
<input type='text' name="examDate1" class="form-control" readonly="readonly" onClick="activateDatePicker()" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar">/span></span>
</div>
</td>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$('#datetimepicker7').datetimepicker({
format : 'yyyy-mm-dd hh:ii',
startDate : new Date(),
autoclose : 1
}).on('changeDate',function(selected) {
var minDate = new Date(selected.date.valueOf());
$('#datetimepicker8').datetimepicker('setStartDate',minDate);
$('#adminTimeTableForm').bootstrapValidator(
'revalidateField', 'examDate1');
});
$('#datetimepicker8').datetimepicker({
format : 'yyyy-mm-dd hh:ii',
startDate : new Date(),
autoclose : 1
}).on('changeDate',function(selected) {
var minDate = new Date(selected.date.valueOf());
$('#datetimepicker7').datetimepicker('setEndDate', minDate);
$('#adminTimeTableForm').bootstrapValidator('revalidateField', 'examDate2');
});
});
});
</script>

Put age restriction of 18 years - Bootstrap Datepicker

I am using Bootstrap Datepicker.
I want to put an Age Restriction of 18 Years.
Dates less than Age 18 Years from current date should be disabled.
Here is my Fiddle:
http://jsfiddle.net/kGGCZ/17/
JS:
$(function()
{
$('#datepicker').datepicker(
{
viewMode: "years",
defaultDate: '-2yr',
}
);
});

Simply put endDate: '-18y' if you only want to allow user whose age is 18 years and above.
<input type="text" class="datepicker">
<script>
$('.datepicker').datepicker({
endDate: '-18y'
});
</script>
Working Example: https://jsfiddle.net/sparshturkane/w46euf5q/1/
Please refer Bootstrap Date picker docs for more options and instructions

This is the JavaScript you are after:
var dt = new Date();
dt.setFullYear(new Date().getFullYear()-18);
$('#datepicker').datepicker(
{
viewMode: "years",
endDate : dt
}
);
But your fiddle is using coffeescript so here is the same in coffee:
dt = new Date()
dt.setFullYear new Date().getFullYear() - 18
$("#datepicker").datepicker
viewMode: "years"
endDate: dt
working example: http://jsfiddle.net/Ln5x6/1/

You can use yearRange, to let users choose only years which comes under 18+ from current year. Like,
jQuery('#dateob').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-110:-18',
showButtonPanel: true
});