My requirement is that I only want date to be enable in range that is from today date to next 72 hours date will be enable.

I have implement the code from sample link as

In this link back date are set to be disable which is good but including that I also want that from today to next 72 hours(2 days more) the date should be enable and after all date be disable.

The code I tried is

Jquery

var date = new Date();
date.setDate(date.getDate());

$('.date').datepicker({ 
    startDate: date
});

HTML

<input class="date" data-provide="datepicker">

Some Bootstrap link as set in above link

FOR EXP : if Today date is 01/05/2018(MM/dd/yyyy) in that case I want red highlighted date to be enable i.e. 05,06,07 as enable else all should be disable

My requirement is that I only want date to be enable in range that is from today date to next 72 hours date will be enable.

I have implement the code from sample link as https://codepen.io/ahmetcadirci25/pen/NpMNzJ

In this link back date are set to be disable which is good but including that I also want that from today to next 72 hours(2 days more) the date should be enable and after all date be disable.

The code I tried is

Jquery

var date = new Date();
date.setDate(date.getDate());

$('.date').datepicker({ 
    startDate: date
});

HTML

<input class="date" data-provide="datepicker">

Some Bootstrap link as set in above link

FOR EXP : if Today date is 01/05/2018(MM/dd/yyyy) in that case I want red highlighted date to be enable i.e. 05,06,07 as enable else all should be disable

• javascript
• jquery
• twitter-bootstrap
• datepicker

• you should use minDate : 0 (today) and maxDate: +3D – cucuru Commented Jan 5, 2018 at 12:01

2 Answers 2

You can define start and end date for a datepicker. like

$('#dateTimeinput').datepicker({

    startDate : todayDate,
    endDate : maxDate,
});

Demo fiddle

you could use beforeShowDay for this. here is an example.

$(function(){
    $("input").datepicker(
        {
        beforeShowDay: function (date) {
            var today= new Date();

            var afterTwoDays = new Date();
            afterTwoDays.setDate(today.getDate() + 2);

            //Now return the enabled and disabled dates to datepicker
            return [(date.getDate() >= today.getDate() && date.getDate() <= afterTwoDays.getDate()), ''];
        }
    });
});

  <link rel="stylesheet" href="//code.jquery./ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery./jquery-1.12.4.js"></script>
  <script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="foo" />