在引导程序日期选择器中启用并仅显示特定日期和今天日期

Question

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 }

Answer 1

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>