How to restrict date range for 15 days only

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>
<form>
    <div class="container">
       <h4>Start Date:</h4>
            <input  type="text" id="startdate" name="fromdate" width="276"
                placeholder="dd/mm/yyyy" required onchange="checkDate()" />
            <h4>End Date:</h4>
            <input  type="text" id="enddate" name="todate" width="276"
                placeholder="dd/mm/yyyy" required onchange="checkDate()"/>
    </div>
    <input type="submit" value="submit">
    </form>
    <script>
    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 > 15){
                 alert("Days are more then fifteen");

            }
        }
    </script>
</body>
</html>

here is the fiddle

try `endDate: "+15d" ` option . reference https://bootstrap-datepicker.readthedocs.io/en/1.3.0-rc.4/options.html#enddate — Shiv Kumar Baghel, Oct 03 '18 at 07:23

SilentCoder · Answer 1 · 2018-10-03T07:50:22.427

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"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

 <input id="date-of-starting" type="text" name="startDate" value="" readonly class="form-control" required />
 
 <input id="date-of-ending" type="text" name="endDate" value="" readonly class="form-control" required />

yes. if i am using format:dd/mm/yyyy. it is giving wrong result — , Oct 03 '18 at 07:36
@dheerajkumar below the `autoclose:true` you can add this line ` format: 'dd/mm/yyyy',` — SilentCoder, Oct 03 '18 at 07:36
I have edited my answer. if the answer is correct mark it as the answer too. — SilentCoder, Oct 03 '18 at 07:38
i already tried this one the to date calendar shows wrong result — , Oct 03 '18 at 07:40
The answer has edited. but always make sure to use mm/dd/yyyy format for days. — SilentCoder, Oct 03 '18 at 07:53

Ms.Tamil · Answer 2 · 2018-10-03T07:28:46.803

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

barbsan · Accepted Answer · 2018-10-03T07:36:39.723

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 > 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

Added link to jsfiddle. I moved those functions to html snippet, jsfiddle seems to have trouble with handlers declared in js snippet — barbsan, Oct 03 '18 at 07:39

How to restrict date range for 15 days only

3 Answers3