Develop Reference

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 can I disable the date selected previously for a reservation?

Im using the datetimepicker here (https://xdsoft.net/jqplugins/datetimepicker/)
I'm trying to a reservation, and I want that if the first datetime selected is the 20th of september at 12o'clock, i'd that in the second input I can only select of the previously selected day and above the previously selected hour
Can sombedy help please ? Thank's a lot in advance!
(the variable "nextDayReservation" is a date that's been been echo from the database, don't worry about it)
$("#datetimeFrom").datetimepicker({
minDate:nextDayReservation,
maxDate: '+1970/02/01',
format:'d/m/Y H:i', // d/m/Y H:i
minTime: '09:00',
maxTime: '22:00'
});
$("#datetimeTo").datetimepicker({
minDate:reservationDate,
format:'d/m/Y H:i',
maxDate: '+1970/02/01',
minTime:'09:00',
maxTime:'22:00'
});

Following works for date:
$("#datetimeFrom").datetimepicker({
format: 'Y/m/d H:i',
onShow: function(ct) {
this.setOptions({
maxDate: jQuery('#datetimeTo').val() ? jQuery('#datetimeTo').val() : false,
})
}
});
$("#datetimeTo").datetimepicker({
format: 'Y/m/d H:i',
onShow: function(ct) {
this.setOptions({
minDate: jQuery('#datetimeFrom').val() ? jQuery('#datetimeFrom').val() : false,
})
}
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<input id="datetimeFrom" type="text">
<input id="datetimeTo" type="text">

How to have a dynamic maximum end date in Bootstrap Date Picker

I am using the following date picker on my website for a start and end date selection:
https://bootstrap-datepicker.readthedocs.org/en/latest/index.html
The rules are:
start date can be between today and + 30 days, no more
end date can be no more than 1 year after the selected start date
So when the form loads, I've set the endDate option to "+1y -1d" which works great. But if the customer picks a start date of +30 days for example, I need the endDate option on the second field to extend to "current start date +1y -1d" again.
I've started the code but really not sure how to acheive this:
<script type="text/javascript">
$(function() {
$(".startdate").datepicker({
format: 'd MM yyyy',
startDate: '+0d',
endDate: '+30d',
autoclose: true,
startView: 0,
minViewMode: 0,
todayHighlight: true,
orientation: "top"
});
$(".enddate").datepicker({
format: 'd MM yyyy',
startDate: '+1d',
endDate: '+1y -1d',
autoclose: true,
startView: 0,
minViewMode: 0,
todayHighlight: true,
orientation: "top"
});
$("#startdate").change(function() {
var startdate = new Date ( $("#startdate").val() ) ;
//alert(startdate);
var newendatemaximum;
$(".enddate").datepicker({
endDate: ???????
});
});
});
</script>
Work In Progress Solution:
$(".startdate").change(function() {
//alert("start date change");
var newendatemaximum = new Date ( $(".startdate").val() ) ;
newendatemaximum.setYear(newendatemaximum.getFullYear() + 1);
alert(newendatemaximum);
$(".enddate").datepicker("option", "endDate", newendatemaximum);
});

You don't have to use json to set datepicker options. You can set them directly. Once you have the new max date that you want to use as a javascript date, you can just set that option directly:
$("#startdate").change(function() {
var newendatemaximum = new Date ( $("#startdate").val() ) ;
newendatemaximum.setYear(newendatemaximum.getFullYear() + 1);
$(".enddate").datepicker("option", "endDate", newendatemaximum);
});

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
});