CODEWITHSUNDEEP
jquerybootstrap-4datepicker
bae
bae

Reputation: 125

Limit selected dates using Multi-Dates datepicker

i want to limit the dates to be selected to 3 dates only. I am using bootstrap4 multi-dates

I tried following this but I can't seem to make it work (Bootstrap Datepicker: How can I set limit to select 3 dates only?)

This is my original code:

 <input type="text" placeholder="RESERVATION DATE" class="form-control datepicker">

 <script>
 var datesForDisable = ["9 1 2019","9 2 2019","9 3 2019"]
 var today = new Date();
 var dd = String(today.getDate()).padStart(2, '0');
 var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
 var yyyy = today.getFullYear();

 $("input").datepicker({
         format: 'MM d, yyyy',
         autoclose: true,
         weekStart: 1,
         // calendarWeeks: true,
         todayHighlight: true,
         datesDisabled: datesForDisable,
         clearBtn: true,
         multidate: true,
         multidateSeparator: " , ",
         startDate: today,

         })
 </script>

I want the user to be able to select 3 dates MAXIMUM and to be able to save those 3 dates separately in database

Upvotes: 2

Views: 842

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

If you are using boostra4 and tempusdominus there is no more the changeDate event or a property for limiting the max number of dates.

Instead you can use change.datetimepicker event and date, [newDate] option in order to limit the max number of dates you can select.

The snippet:

var datesForDisable = [moment("30/09/2019", "DDMMYYYY"), moment("29/09/2019", "DDMMYYYY"), moment("28/09/2019", "DDMMYYYY")];
$('#datetimepicker2').datetimepicker({
    allowMultidate: true,
    format: 'MMM Do, YYYY',
    multidateSeparator: ',',
    disabledDates: datesForDisable,
    calendarWeeks: true,
    buttons: {
        showToday: true,
        showClear: false,
        showClose: true
    }
});
$('#datetimepicker2').on('change.datetimepicker', function (e) {
    if (e.date != false && $(this).datetimepicker('date').split(',').length > 3) {
        $(this).find('td.day.active:contains(' + moment(e.date).format("D") + ')').trigger('click');
    }
});
.bootstrap-datetimepicker-widget.dropdown-menu {
    width: fit-content !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" >


<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group-append date" id="datetimepicker2" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2" value=""/>
                    <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Thallius
Thallius

Reputation: 2619

I would suggest to use a popup select in that case. It is also much more user friendly and quicker to choose.

Upvotes: 1

Related Questions