Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to have several datepickers on same HTML page

Status
Not open for further replies.

rogerte

Programmer
Nov 9, 2001
164
GB
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:
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>
The only difference, at the moment, is that each day input has a different id ("monclasses" in the above example)

Code:
<script type="text/javascript">
            $(function () {
                $('#datetimepicker14').datetimepicker({
                    allowMultidate: true,
                    multidateSeparator: ','
                });
            });
        </script>

Any help thankfully received!
 
Finally found a completely different way of doing this so please ignore this question
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top