Post
Ask Question

Enable Specific Dates By Using Bootstrap Date Picker In ASP.NET MVC

I wrote this article because of the difficulty enabling multiple dates with array object which I have faced. And with this article we will see how to enable specific dates by using Bootstrap date picker. And you can check out this bootstrap date picker. 
 
Description
 
In this we can learn how to enable the specific dates in Bootstrap Date Picker using the below array object format, because we have a disable multiple array dates feature already avaliable. 
 
Step 1
 
Here we apply date picker plugin with MVC helper controller. 
  1. @Html.TextBoxFor(m => m.doj, new { @class = "form-control", autocomplete = "off", @readonly = "readonly" })  
Here we can apply date picker plugin with html text element as shown below.
  1. <input type='text' name='doj' class='form-control' autocomplete='off' readonly />  
Step 2
 
Here the below code is prepared as array object for our refrence and by this formatted array object only can we handle it. 
  1. var enableDates = [{date: "03-12-2018"},{date: "05-12-2018"},{date: "07-12-2018"},{date: "10-12-2018"},{date: "12-12-2018"},{date: "14-12-2018"},{date: "17-12-2018"},{date: "19-12-2018"},{date: "21-12-2018"},{date: "24-12-2018"}, {date: "26-12-2018"},{date: "28-12-2018"}];  
Step 3
 
Here the below code is to get the minimum & maximum dates with above implemented array object.
  1. var sortDatesArry = [];
  2. var enableDatesArray=[];  
  3.    
  4.        for (var i = 0; i < enableDates.length; i++) {  
  5.              var dt = enableDates[i].date.replace('-', '/').replace('-', '/');  
  6.              var dd, mm, yyy;  
  7.              if (parseInt(dt.split('/')[0]) <= 9 || parseInt(dt.split('/')[1]) <= 9) {  
  8.                        dd = parseInt(dt.split('/')[0]);  
  9.                       mm = parseInt(dt.split('/')[1]);  
  10.                       yyy = dt.split('/')[2];  
  11.                      enableDatesArray.push(dd + '/' + mm + '/' + yyy);  
  12.                      sortDatesArry.push(new Date(yyy + '/' + dt.split('/')[1] + '/' + dt.split('/')[0]));  
  13.                 }  
  14.                 else {  
  15.                  enableDatesArray.push(dt);  
  16.                  sortDatesArry.push(new Date(dt.split('/')[2] + '/' + dt.split('/')[1] + '/' + dt.split('/')[0] + '/'));  
  17.            }  
  18.       }  
  19.   
  20.       var maxDt = new Date(Math.max.apply(null, sortDatesArry));  
  21.       var minDt = new Date(Math.min.apply(null, sortDatesArry));  
Step 4
 
Here the below code is to intilize the above-implemented array object as mixDt & maxDt objects to date picker as shown below.
  1. $('#doj').datepicker({  
  2.        format: "dd/mm/yyyy",  
  3.        autoclose: true,  
  4.        startDate: minDt,  
  5.        endDate: maxDt,  
  6.        beforeShowDay: function (date) {  
  7.               var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();  
  8.               return (enableDatesArray.indexOf(dt_ddmmyyyy) != -1);  
  9.           }  
  10. });  
Here is the final combined javascript code for easy understanding. 
  1. var enableDates = [{date: "03-12-2018"},{date: "05-12-2018"},{date: "07-12-2018"},{date: "10-12-2018"},{date: "12-12-2018"},{date: "14-12-2018"},{date: "17-12-2018"},{date: "19-12-2018"},{date: "21-12-2018"},{date: "24-12-2018"}, {date: "26-12-2018"},{date: "28-12-2018"}];   
  2.   
  3. var enableDatesArray=[];  
  4. var sortDatesArry = [];   
  5.        for (var i = 0; i < enableDates.length; i++) {  
  6.              var dt = enableDates[i].date.replace('-', '/').replace('-', '/');  
  7.              var dd, mm, yyy;  
  8.              if (parseInt(dt.split('/')[0]) <= 9 || parseInt(dt.split('/')[1]) <= 9) {  
  9.                        dd = parseInt(dt.split('/')[0]);  
  10.                       mm = parseInt(dt.split('/')[1]);  
  11.                       yyy = dt.split('/')[2];  
  12.                      enableDatesArray.push(dd + '/' + mm + '/' + yyy);  
  13.                      sortDatesArry.push(new Date(yyy + '/' + dt.split('/')[1] + '/' + dt.split('/')[0]));  
  14.                 }  
  15.                 else {  
  16.                  enableDatesArray.push(dt);  
  17.                  sortDatesArry.push(new Date(dt.split('/')[2] + '/' + dt.split('/')[1] + '/' + dt.split('/')[0] + '/'));  
  18.            }  
  19.  }  
  20.        var maxDt = new Date(Math.max.apply(null, sortDatesArry));  
  21.        var minDt = new Date(Math.min.apply(null, sortDatesArry));  
  22.   
  23.        $('#doj').datepicker({  
  24.               format: "dd/mm/yyyy",  
  25.               autoclose: true,  
  26.               startDate: minDt,  
  27.               endDate: maxDt,  
  28.               beforeShowDay: function (date) {  
  29.                  var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();  
  30.                  return (enableDatesArray.indexOf(dt_ddmmyyyy) != -1);  
  31.               }  
  32.           });  

This below expected picture is what we can get once the above implementation is completed.

 

Conclusion

I hope this article is very helpful for those who are working with Bootstrap Jquery Date picker plugin. Actually the disable the dates feature exists in the bootstrap date picker plugin, but I have given a solution to enable dates using arry object in a specific format only. We can easily understand this feature as per the given picture. Kindly drop your feedback and comments in the comments section below.


Similar Articles