CODEWITHSUNDEEP
javascriptjquerybootstrap-datepicker
user15539888
user15539888

Reputation: 79

Enable and show only specific dates and today date in bootstrap datepicker

I am using bootstrap datepicker in my website. I have an array of days which I want to enable plus today date and hide all other years, month and day from datepicker. How can I do this?

Also I have start date and end date. If start date is changed I want to set start date in end_date input. If end date is changed I want to set end date in start_date input.

<input type="text" name="start_date" class="form-control" id="start_date" placeholder="Enter date" readonly>
<input type="text" name="end_date" class="form-control" id="end_date" placeholder="Enter date" readonly>



var enabled_days = ['2021-06-03', '2021-06-04', '2021-06-05'];
$("#start_date").datepicker({
                format: 'yyyy-mm-dd',
                todayHighlight: true,
                todayBtn: 'linked',
                clearBtn: true,
                autoclose: true,
                // endDate: '0d',
                beforeShowDay: function(date) {
                    if (enabled_days.indexOf(formatDate(date)) < 0)
                        return {
                            enabled: false
                        }
                    else
                        return {
                            enabled: true
                        }
                },
                
            }).on('changeDate', function(selected) {
                var minDate = new Date(selected.date.valueOf());
                $('#end_date').datepicker('setStartDate', minDate);
            });

function formatDate(d) {
            var day = String(d.getDate())
            if (day.length == 1)
                day = '0' + day
            var month = String((d.getMonth() + 1))
           
            if (month.length == 1)
                month = '0' + month
            return d.getFullYear() + "-" + month + "-" + day
           
        }

Upvotes: 1

Views: 2361

Answers (1)

Swati
Swati

Reputation: 28522

You can use moment.js this will help us to format date according to given requirement .So , write on("show",function..) for datepicker this will get called whenever your datepicker is shown . Then , inside that event call some function to disabled your month/year from datepicker .

Demo Code :

var enabled_days = ['2021-06-03', '2021-06-04', '2021-06-05'];
var options = {
  format: 'yyyy-mm-dd',
  todayHighlight: true,
  todayBtn: 'linked',
  clearBtn: true,
  autoclose: true,
  // endDate: '0d',
  beforeShowDay: function(date) {
    if (enabled_days.indexOf(formatDate(date)) < 0)
      return {
        enabled: false
      }
    else
      return {
        enabled: true
      }
  }
}
$("#start_date").datepicker(options).on('changeDate', function(selected) {
  var minDate = new Date(selected.date.valueOf());
  $('#end_date').datepicker('setStartDate', minDate);
}).on("show", function(event) {
  do_disabled(); //call this..

});
$("#end_date").datepicker(options).on('changeDate', function(selected) {
  var minDate = new Date(selected.date.valueOf());
  $('#start_date').datepicker('setEndDate', minDate);
}).on("show", function(event) {
  do_disabled(); //call this..

});

function formatDate(d) {
  var day = String(d.getDate())
  if (day.length == 1)
    day = '0' + day
  var month = String((d.getMonth() + 1))

  if (month.length == 1)
    month = '0' + month
  return d.getFullYear() + "-" + month + "-" + day

}

function do_disabled() {
  //add disable to month..span tag 
  $(".month").addClass("disabled")
  //loop through month elemnet
  $(".month").each(function(index, element) {
    var el = $(this);
    //loop through array
    $(enabled_days).each(function(i) {
      var dates = new Date(enabled_days[i])
      //check if month jan,feb === our arrya month...
      if (el.text().trim() === moment(dates).format("MMM")) {
        el.removeClass("disabled") //remove disabled from there month..
      }
    })
  })
  //same for year
  $(".year").each(function(index, element) {
    var el = $(this);
    $(enabled_days).each(function(i) {
      var dates = new Date(enabled_days[i])
      if (el.text() != moment(dates).format("YYYY")) {
        el.addClass("disabled")
      }
    })

  })

}
.datepicker-years .datepicker-switch,
.prev,
.next {
  pointer-events: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />
<input type="text" name="start_date" class="form-control" id="start_date" placeholder="Enter date" readonly>
<input type="text" name="end_date" class="form-control" id="end_date" placeholder="Enter date" readonly>

Upvotes: 1

Related Questions