Developer Snippet Diary

Jquery daterangepicker disable some dates

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />


<script>

    $('input[name="daterange"]').daterangepicker({
        "minYear": 2022,
        
        isInvalidDate: function(date) {
            //BLOCK DATE RANGES
            var dateRanges = [
                { 'start': moment('2026-01-10'), 'end': moment('2026-01-15') },
                { 'start': moment('2022-12-01'), 'end': moment('2022-12-10') },
            ];
            return dateRanges.reduce(function(bool, range) {
                    return bool || (date >= range.start && date <= range.end);
            }, false);
            //BLOCK DATES AS ARRAYS
            var range = ["2022-11-25", "2022-11-26", "2022-11-27"];
            for(var ii = 0; ii < range.length; ii++){
                if (date.format('YYYY-MM-DD') == range[ii]){
                    return true;
                }
            }
            //BLOCK DATES ON CONDITIONS
            if (date.format('YYYY-MM-DD') >= '2022-11-25' && date.format('YYYY-MM-DD') <= '2022-11-30') {
                  return true; 
            }
        },
        locale: {
            format: 'DD-MM-YYYY',
            separator: " to "
        }
    }, function(start, end, label) {
        console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    });
</script>
Posted by: R GONDAL
Email: rizikmw@gmail.com