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

I'm getting NaN value on my daterangepicker

there. I just updated my daterangepicker on my website.It's working really fine on fields for posting ( starts on / ends on ), but...In my profile, I had my date picker with value="{{$user->dob}}" which gaves me the date of birth of my profile. Now, I updated my datepicker from DOB with this line :
<input type="text" name="dob" id="dob" value="{{ $user->dob }}">
but I'm getting NaN at value and when it's open up it looks like that :
.
Here is my script
$(function() {
$('input[name="dob"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1901,
maxYear: 2099,
}, function(start, end, label) {
});
});
I'm using Daterangepicker : http://www.daterangepicker.com/

You should use the locale in your settings as described here:
http://www.daterangepicker.com/#example2
Because you need to specify in which format your date is passed to the component

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

Angularjs , How do i set the ng-model for the input to change Date and Time with auto-binding?

How to set the ng-model for the input to change Date and Time with auto-binding?
Here's the Plunker http://plnkr.co/edit/7kuvF6
I want to change the Date and Time in this case, but I don't know how to setup the ng-model for both input.
Thanks !

Here is a way setup the ng-model for date and time:
In your html file:
<div ng-controller="date">
DATE <input type="text" ng-model="date" jqdatepicker/><br />
TIME <input type="text" ng-model="time" /><br />
DateTTime: {{dateTtime}}<br />
</div>
In your directive:
myAPP.directive('jqdatepicker', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.datepicker({
changeYear: "true",
changeMonth: true,
dateFormat: 'yy-mm-dd',
showOtherMonths: true,
showButtonPanel: true,
onClose: function (selectedDate) {
scope.dateTtime = selectedDate + "T" + scope.time;
scope.$apply();
}
});
}
};
});
I assume you want to keep the format 2013-10-01T00:00 or will receive the data from somewhere in this format.
More detail in the working Plunker: http://plnkr.co/edit/P7BG6q?p=preview

You can assign it to the model defined in the scope in the callback function of the datepicker. You also need scope.$apply() to trigger the digest since the assignment is outside the AngularJS's.
onClose: function (selectedDate) {
scope.dateTtime = selectedDate;
scope.$apply();
}