Search code examples
javascripttwitter-bootstrapdatepickereonasdan-datetimepicker

Select only 2 days of Workdays?


I have to select only 2 workdays after today at my datepicker.

Ps: If today is Friday, I can't select Saturday and Sunday, the datepicker have to skip to Monday and Thursday

I'm using PHP, JS, Bootstrap.

My current code:

$('.datepickerVencBoleto').datetimepicker({
    format: "DD/MM/YYYY",
    minDate: new Date(),
    daysOfWeekDisabled: [0, 6],
});

// DATEPICKER
$('.datepicker,.datepickerHojeMin').datetimepicker({
    format: "DD/MM/YYYY",
    showTodayButton: true,
    locale: moment.locale('pt-br'),
    showClear: true,
    showClose: true
});

The red circle means the days I have to enable. (Image Example)

Example


Solution

  • You can use enabledDates to specify which days should be enabled.

    You can determine which days should be enabled depending on the day of the week (see momentjs isoWeekday for example).

    Here a live sample using clone() and add():

    function next2Workdays(){
      var today = moment().startOf('day');
      if( today.isoWeekday()>=1 && today.isoWeekday()<=4 ){ // Today is Monday - Wednesday
        return [ today.clone(), today.clone().add(1, 'd') ];
       } else if( today.isoWeekday() == 5 ){  // Today is Friday
        return [ today.clone(), today.clone().add(3, 'd') ];
      } else if( today.isoWeekday() > 5 ){ // Today is Saturday or Sunday
        var startWeek = today.clone().startOf('isoWeek');
        var newWeek = startWeek.clone().add(1, 'week');
        return [ newWeek.clone().isoWeekday(1), newWeek.clone().isoWeekday(2)];
      }
    }
    
    $('.datepickerVencBoleto').datetimepicker({
        format: "DD/MM/YYYY",
        minDate: moment().startOf('day'),
        enabledDates: next2Workdays(),
        locale: 'pt-br',
    });
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date datepickerVencBoleto'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>