Title: How to restrict date range for 15 days only
Tags: javascript;jquery
Question: I want to restrict date for fifteen days only, I have written some code but don't know where I am going wrong.  If anyone can guide me it would be helpful.
this is my full code, I am applying condition also to check if date is greater then 15 but it's not working
<body&gt;
<form&gt;
<div class="container"&gt;
<h4&gt;Start Date:</h4&gt;
<input  type="text" id="startdate" name="fromdate" width="276"
placeholder="dd/mm/yyyy" required onchange="checkDate()" /&gt;
<h4&gt;End Date:</h4&gt;
<input  type="text" id="enddate" name="todate" width="276"
placeholder="dd/mm/yyyy" required onchange="checkDate()"/&gt;
</div&gt;
<input type="submit" value="submit"&gt;
</form&gt;
<script&gt;
var today = new Date(new Date().getFullYear(), new Date().getMonth(),
new Date().getDate());
$('#startdate').datepicker({
uiLibrary : 'bootstrap4',
iconsLibrary : 'fontawesome',
format : 'dd/mm/yyyy',
maxDate : function() {
return $('#enddate').val();
}
});
$('#enddate').datepicker({
uiLibrary : 'bootstrap4',
iconsLibrary : 'fontawesome',
format : 'dd/mm/yyyy',
minDate : function() {
return $('#startdate').val();
}
});
//function to check wether date is more than 15 its not workin
//all plugins are there u just have to run
function checkDate(){
var start = $('#startdate').val();
var end = $('#enddate').val();
//convert strings to date for comparing
var startDate = new Date(start);
var endDate = new Date(end);
// Calculate the day diffrence
var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
var diffDays = Math.abs((endDate.getTime() - startDate.getTime()) / (oneDay));
if(diffDays &gt; 15){
alert("Days are more then fifteen");
}
}
</script&gt;
</body&gt;
</html&gt;
here is the fiddle
Comment: wait bro i am making fiddle of this code

Comment: try `endDate: "+15d" ` option . reference https://bootstrap-datepicker.readthedocs.io/en/1.3.0-rc.4/options.html#enddate

Comment: Can you make a fiddle for this?

Here is the accepted answer: It's because your datepicker has format dd/mm/yyyy but Date constructor converts it as if it was mm/dd/yyyy.
var date = '01/03/2018'
var d = new Date(date);
console.log(d.toString())
You need to adapt your code to work with dd/mm/yyyy format
function checkDate(start, end){

//convert strings to date for comparing
var startDate = createDate(start);
var endDate = createDate(end);
// Calculate the day diffrence
var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
var diffDays = Math.abs((endDate.getTime() - startDate.getTime()) / (oneDay));
if(diffDays &gt; 15){
console.log("Days are more then fifteen");
} else {
console.log("Less than 15 days")
}
}

function createDate(datestr){
var datearr = datestr.split("/");
var d = new Date(datearr[2], Number(datearr[1]) - 1, datearr[0])
return d;
}

checkDate("01/02/2018", "10/02/2018")
checkDate("01/02/2018", "30/02/2018")
jsfiddle
Comment for this answer: Added link to jsfiddle. I moved those functions to html snippet, jsfiddle seems to have trouble with handlers declared in js snippet

Here is another answer: Look at this answer, here I have used a moment.js library also. this will restrict to 15 days. Hope this sample will give you a solution
$(document).ready(function(){
$('#date-of-ending').datepicker({
autoclose: true,
format:"dd/mm/yyyy"
$('#date-of-starting').datepicker({
autoclose: true,
format:"dd/mm/yyyy"
}).on('changeDate', function (selected) {
var xDays = 15;
var selectedDate = moment(selected.date,"DD/MM/YYYY").format("MM/DD/YYYY")
var maxDate = moment(selectedDate.valueOf()).add(xDays, 'days').format('DD/MM/YYYY'); // This is from moment js library
$('#date-of-ending').datepicker('setEndDate', maxDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;</script&gt;
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"&gt;</script&gt;
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/&gt;
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"&gt;</script&gt;
<input id="date-of-starting" type="text" name="startDate" value="" readonly class="form-control" required /&gt;
<input id="date-of-ending" type="text" name="endDate" value="" readonly class="form-control" required /&gt;
Comment for this answer: yes. if i am using format:dd/mm/yyyy. it is giving wrong result
Comment for this answer: i already tried this one the to date calendar  shows wrong result
Comment for this answer: @dheerajkumar below the `autoclose:true` you can add this line ` format: 'dd/mm/yyyy',`
Comment for this answer: I have edited my answer. if the answer is correct mark it as the answer too.
Comment for this answer: The answer has edited. but always make sure to use mm/dd/yyyy format for days.

Here is another answer: The issue is with the date format you're using. 'dd/mm/yyyy' is not a format Date.parse() can handle.
String value representing a date. The string should be in a format
recognized by the Date.parse() method
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Parameters
So you can either change the format to 'mm/dd/yyyy' or you can use moment.js to handle your date manipulations.
If you prefer to stick with the same format and Date library, then you have a solution here
PS: I noticed you have asked the same question before and having issues with the accepted answer. When this happens, please comment on the answer instead of making a duplicate

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2018:00:10/03/18', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery>', 'Title': 'How to restrict date range for 15 days only', 'ViewCount': 1397, 'id': 52621271, 'user_AboutMe': None, 'user_AccountId': None, 'user_DisplayName': None, 'user_Reputation': None, 'user_Views': None, 'user_id': None}}