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

Update Bootstrap Date Range Datepicker to only allow for end date to be within the start date's fiscal year

I'd like to preface this saying I know very little JavaScript.
I have a Bootstrap datepicker using a date range, picked up from eternicode.
My goal is to select a day in startDate and then have the days available to endDate only be on or after startDate and within startDate's financial year.
Examples:
If I chose Oct 1st 2016, the endDate should cap out at Sep 30th 2017
If I chose Jan 12th 2017, the endDate should cap out at Sep 30th 2017
If I chose Sep 30th 2017, the endDate should also be Sep 30th 2017
Pretty much, if the startDate month is in [Oct, Nov, Dec] then
endDate caps out at Sep 30th (startDate year + 1) else endDate caps
out at Sep 30th (startDate year)
In my reportWebpage.cshtml file I have:
<div class="col-md-2">
Date Range:
</div>
<div class="col-md-5" id="dateRangeContainer">
<div class="input-daterange input-group" id="datepicker">
#Html.TextBox("startDate", "", new { #class = "input-sm form-control", name= "startDate" })
<span class="input-group-addon">to</span>
#Html.TextBox("endDate", "", new { #class = "input-sm form-control", name = "endDate" })
</div>
</div>
In my related.js I have a very basic datepicker setup:
$(function () {
$('#dateRangeContainer .input-daterange').datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true
});
});
I know there is a datesDisable property I can set, and while it's functionality is what I want it seems to be based off an array of dates which seems like the wrong idea here.
As a test, I replaced the datapicker js code above with what is shown below.
Like in this SO Answer I've tried adding an onSelect property to just the #startDate datepicker, but I'm not getting a response from the alert embedded, nor is Google Chrome's Dev Tools hitting the debug point placed on it:
$('#startDate').datepicker({
onSelect: function() {
var date = $(this).datepicker('getDate'),
day = date.getDate(),
month = date.getMonth() + 1, // Offset the zero index to match normal month indexes
year = date.getFullYear();
alert(day + '-' + month + '-' + year);
}
});
I was hoping that by doing that I could at least start building some if else loops or something.
I'm struggling to figure out how to even start with this problem, so any help or suggestions will be very much appreciated!
Edit 1:
I figured out that trying to disable a huge range of dates was the wrong way to view this problem, and that I should instead focus on utilizing the setStartDate and setEndDate properties.
Using some combined tips from these SO answers:
Bootstrap datepicker change minDate/startDate from another datepicker
Print Var in JsFiddle (This was mostly just a helper, giving credit where credit is due)
I mashed together this JSFiddle: http://jsfiddle.net/wsodjsyv/203/
Where it currently is, it does it's job of restricting to the proper financial year. I just need to tweak it so that when I clear End Date I'm able to move Start Date past that point again. Right now it'll require a refresh if I determine I want to move Start Date past Sept. 30 (whatever year got chosen)

Here is my new related.js file pertaining to the date picker; with this code I am able to restrict the date range to Start Date's fiscal year:
$(function () {
// Ranged datepickers
$('#dateRangeContainer .input-daterange').datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true
});
$('#startDate').datepicker().on('changeDate', function(selected) {
var endDate_Bottom = null;
var endDate_Cap = null;
if (selected.date != null) {
endDate_Bottom = new Date(selected.date.valueOf());
endDate_Cap = new Date(selected.date.valueOf());
if (endDate_Bottom.getMonth() >= 9 && endDate_Bottom.getMonth() <= 11) {
endDate_Cap = new Date(endDate_Bottom.getFullYear() + 1, 8, 30);
} else {
endDate_Cap = new Date(endDate_Bottom.getFullYear(), 8, 30);
}
}
$('#endDate').datepicker('setStartDate', endDate_Bottom);
$('#endDate').datepicker('setEndDate', endDate_Cap);
});
$("#endDate").datepicker().on('changeDate', function(selected) {
var startDate_Cap = null;
if (selected.date != null) {
startDate_Cap = new Date(selected.date.valueOf());
}
$('#startDate').datepicker('setEndDate', startDate_Cap);
}).on('clearDate', function(selected) {
var startDate_Cap = null;
$('#startDate').datepicker('setEndDate', startDate_Cap);
});
});
I've added some checks for when the date is null to avoid the console log being filled with errors when .valueOf() is called on an empty date.
I also brought back the dateRangeContainer block to handle the repeated options and to allow for the styling that highlights the date range selected in the calendar.

Daterangepicker - Change End date only. But, present default plugin not allows

Using daterangepicker plugin for this booking. Additional requirement needed for improvement.
Used below script to load 'Select departure date' on click input date field. But, once user clicked 'start' date. Have to change text to 'Select return date'.
With current behaviour of plugin, return date is not changable. Have to change both start & end date. Is it possible to change only 'end' date if user mistakenly selected wrong date? no changes in 'start' date until user changes.
HTML:
<input class="form-control input-lg" id="returnTripDepart" name="ReturnTrip" />
JS:
$('#returnTripDepart').click(function(){
$('.daterangepicker').addClass('returnTripDatePicker');
$('.departure--date').hide();
$(".returnTripDatePicker").prepend("<div class='departure--date'>Select Departure Date</div>");
});
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$('input[name="ReturnTrip"]').daterangepicker({
"autoApply": true,
"autoUpdateInput": false,
"minDate": today,
"maxDate": maxLimitDate,
"locale": {
format: 'DD MMM YYYY'
}
},function(start:any, end:any) {
$("#returnTripDepart").val(start.format('DD MMM YYYY'));
$("#returnTripReturn").val(end.format('DD MMM YYYY'));
});

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