During this lockdown period I have decided to help a local sports charity by finishing-off an online management system written using, primarily bootstrap 4 and php.
One thing I want to do is a system to set up dates that sessions will be available for forthcoming term. So I set up a form with 6 inputs, one for each day Mon - Sat. I have then looked for a data picker add-in that allows multi dates to be picked. I came across 2 jquery ones that should work: Bootstrap-Datepicker that doesn't seem to work with Bootstrap 4 and Tempusdominus which I am trying to use.
Being completely new to, and not understanding javascript/jquery, I cannot see how to have more than one such datepicker on a single page.
I have used the code for Tempusdominus as on their examples page, but don't understand how to link a separate datepicker to each input.
For each edit/picker the code is:
The only difference, at the moment, is that each day input has a different id ("monclasses" in the above example)
Any help thankfully received!
One thing I want to do is a system to set up dates that sessions will be available for forthcoming term. So I set up a form with 6 inputs, one for each day Mon - Sat. I have then looked for a data picker add-in that allows multi dates to be picked. I came across 2 jquery ones that should work: Bootstrap-Datepicker that doesn't seem to work with Bootstrap 4 and Tempusdominus which I am trying to use.
Being completely new to, and not understanding javascript/jquery, I cannot see how to have more than one such datepicker on a single page.
I have used the code for Tempusdominus as on their examples page, but don't understand how to link a separate datepicker to each input.
For each edit/picker the code is:
HTML:
<label class="col-md-2 control-label" for="monclasses">Monday:</label>
<div class="col-md-9">
<div class="input-group date" id="datetimepicker14" data-target-input="monclasses">
<input id="monclasses" type="text" class="form-control datetimepicker-input" data-target="#datetimepicker14"/>
<div class="input-group-append" data-target="#datetimepicker14" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="col-md-1"></div>
Code:
<script type="text/javascript">
$(function () {
$('#datetimepicker14').datetimepicker({
allowMultidate: true,
multidateSeparator: ','
});
});
</script>
Any help thankfully received!