Limit Bootstrap Datepicker dates selection in jQuery and JavaScript

Last Reply 7 months ago By dharmendr

Posted 7 months ago

hello,

i am using this multi date picker, i want to apply a logic that user can select max upto 3 Dates not more than 3 dates

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script>
    $(document).ready(function () {
        $('[id*=TextBox1]').datepicker({
            startDate: new Date(),
            multidate: true,
            format: "mm/dd/yyyy",
            daysOfWeekHighlighted: "5,6",
            //datesDisabled: ['31/08/2017'],
            language: 'en'
        }).on('changeDate', function (e) {
            // e here contains the extra attributes
            $(this).find('.input-group-addon .count').text(' ' + e.dates.length);
        });
    });
</script>
<asp:TextBox ID="TextBox1" runat="server" placeholder="Date"></asp:TextBox>

 

Posted 7 months ago Modified on 7 months ago

Hi nauna,

Use a variable to store selected dates in an array.

Whenever dates are selected check the length of the data in the datepicker and if it is more than 3, then set Dates from the stored array and notify user.

Check this example. Now please take its reference and correct your code.

HTML

<head>
    <title>Set Bootstrap Datepicker dates selection limit</title>
</head>
<body>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var selectedDates = [];
            datePicker = $('[id*=TextBox1]').datepicker({
                startDate: new Date(),
                multidate: true,
                format: "mm/dd/yyyy",
                daysOfWeekHighlighted: "5,6",
                language: 'en'
            });
            datePicker.on('changeDate', function (e) {
                if (e.dates.length <= 3) {
                    selectedDates = e.dates;
                } else {
                    datePicker.data('datepicker').setDates(selectedDates);
                    alert('You can only select 3 dates.');
                }
            });
        });
    </script>
    <input id="TextBox1" type="text" readonly="readonly" placeholder="Date" />
</body>
</html>

Demo

Note: You have to replace the html textbox with ASP TextBox.

 

There is also another way to do is set limit for multiple date selection.

Just set multidate option with any number that you want to set as multiple date limit.

You will be able to select maximum three dates only.

But have one demerit is, it will remove the first selection upon the 4th date selection.

JavaScript

<script type="text/javascript">
    $(function () {
        var selectedDates = [];
        datePicker = $('[id*=TextBox1]').datepicker({
            startDate: new Date(),
            multidate: 3,
            format: "mm/dd/yyyy",
            daysOfWeekHighlighted: "5,6",
            language: 'en'
        });
    });
</script>