Post
Ask Question

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

I wrote this article because of the difficulty of enabling multiple dates with an array of objects that I have faced. And with this article, we will see how to enable specific dates by using Bootstrap date picker. You can also check out this bootstrap date picker.

Description

In this, we can learn how to enable the specific dates in Bootstrap Date Picker using the array object format below because we have a disable multiple array dates feature already available.

Step 1. Here, we apply the date picker plugin with the MVC helper controller.

@Html.TextBoxFor(m => m.doj, new { 
    @class = "form-control", 
    autocomplete = "off", 
    @readonly = "readonly" 
})

Here, we can apply the date picker plugin with the html text element as shown below.

<input type='text' name='doj' class='form-control' autocomplete='off' readonly />

Step 2. Here, the code below is prepared as an array object for our reference, and only by this formatted array object can we handle it.

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 the above-implemented array object.

var sortDatesArry = [];
var enableDatesArray = [];
for (var i = 0; i < enableDates.length; i++) {
    var dt = enableDates[i].date.replace('-', '/').replace('-', '/');
    var dd, mm, yyy;

    if (parseInt(dt.split('/')[0]) <= 9 || parseInt(dt.split('/')[1]) <= 9) {
        dd = parseInt(dt.split('/')[0]);
        mm = parseInt(dt.split('/')[1]);
        yyy = dt.split('/')[2];
        enableDatesArray.push(dd + '/' + mm + '/' + yyy);
        sortDatesArry.push(new Date(yyy + '/' + dt.split('/')[1] + '/' + dt.split('/')[0]));
    } else {
        enableDatesArray.push(dt);
        sortDatesArry.push(new Date(dt.split('/')[2] + '/' + dt.split('/')[1] + '/' + dt.split('/')[0] + '/'));
    }
}
var maxDt = new Date(Math.max.apply(null, sortDatesArry));
var minDt = new Date(Math.min.apply(null, sortDatesArry));

Step 4. Here, the code below is to initialize the above-implemented array object as mixDt & maxDt objects to the date picker, as shown below.

$('#doj').datepicker({
    format: "dd/mm/yyyy",
    autoclose: true,
    startDate: minDt,
    endDate: maxDt,
    beforeShowDay: function (date) {
        var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
        return (enableDatesArray.indexOf(dt_ddmmyyyy) != -1);
    }
});

Here is the final combined javascript code for easy understanding.

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" }
];
var enableDatesArray = [];
var sortDatesArry = [];
for (var i = 0; i < enableDates.length; i++) {
    var dt = enableDates[i].date.replace('-', '/').replace('-', '/');
    var dd, mm, yyy;
    if (parseInt(dt.split('/')[0]) <= 9 || parseInt(dt.split('/')[1]) <= 9) {
        dd = parseInt(dt.split('/')[0]);
        mm = parseInt(dt.split('/')[1]);
        yyy = dt.split('/')[2];
        enableDatesArray.push(dd + '/' + mm + '/' + yyy);
        sortDatesArry.push(new Date(yyy + '/' + dt.split('/')[1] + '/' + dt.split('/')[0]));
    } else {
        enableDatesArray.push(dt);
        sortDatesArry.push(new Date(dt.split('/')[2] + '/' + dt.split('/')[1] + '/' + dt.split('/')[0] + '/'));
    }
}
var maxDt = new Date(Math.max.apply(null, sortDatesArry));
var minDt = new Date(Math.min.apply(null, sortDatesArry));
$('#doj').datepicker({
    format: "dd/mm/yyyy",
    autoclose: true,
    startDate: minDt,
    endDate: maxDt,
    beforeShowDay: function (date) {
        var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
        return (enableDatesArray.indexOf(dt_ddmmyyyy) != -1);
    }
});

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

Implementation

Conclusion

I hope this article is very helpful for those who are working with the 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 an array object in a specific format only. We can easily understand this feature from the picture. Kindly drop your feedback and comments in the comments section below.


Similar Articles