how to link two datetimepicker fields?

PHPMaker General Discussion (PHPMaker)
1

I have “start” and “end” date fields on a custom page form. Both use the DateTimePicker extension…

loadjs.ready(["fcalendaradd", "datetimepicker"], function () {
    let format = "yyyy-MM-dd HH:mm",
    options = {
        localization: {
            locale: ew.LANGUAGE_ID
        },
        display: {
            icons: {
                previous: ew.IS_RTL ? "fas fa-chevron-right" : "fas fa-chevron-left",
                next: ew.IS_RTL ? "fas fa-chevron-left" : "fas fa-chevron-right"
            }
        },
        meta: {
            format,
            numberingSystem: ew.getNumberingSystem()
        },
        stepping: 15
    };
    ew.createDateTimePicker("fcalendaradd", "start_date", jQuery.extend(true, {"useCurrent":false}, options));
});

I want to link the fields so that the minDate / maxDate values update automatically, so I took this code from the TempusDominus site:

<script type="text/javascript">
    $("#start_date").on("change.datetimepicker", function (e) {
        $('#end_date').datetimepicker('minDate', e.date);
    });
    $("#end_date").on("change.datetimepicker", function (e) {
        $('#start_date').datetimepicker('maxDate', e.date);
    });
</script>

…but I can’t get it to work :(As shown, the browser console reports that “.datetimepicker” is not a function, so I tried changing “.datetimepicker” to “.tempusdominus”, but that generated this:

Uncaught Error: TD:: ".0" in not a known option.Did you mean "viewDate.nonLeapLadder.0"?, ".1" in not a known option.Did you mean "viewDate.nonLeapLadder.1"?, ".2" in not a known option.Did you mean "viewDate.nonLeapLadder.2"?, ".3" in not a known option.Did you mean "viewDate.nonLeapLadder.3"?, ".4" in not a known option.Did you mean "viewDate.nonLeapLadder.4"?, ".5" in not a known option.Did you mean "viewDate.nonLeapLadder.5"?, ".6" in not a known option.Did you mean "viewDate.nonLeapLadder.6"?
    at ErrorMessages.unexpectedOptions (tempus-dominus.js:462:27)
    at l (tempus-dominus.js:1587:45)
    at Function._mergeOptions (tempus-dominus.js:1617:13)
    at TempusDominus._initializeOptions (tempus-dominus.js:3347:38)
    at new TempusDominus (tempus-dominus.js:3142:34)
    at Object.jQueryHandleThis (tempus-dominus.js:3539:16)
    at S.fn.init.jQueryInterface [as tempusDominus] (tempus-dominus.js:3524:30)
    at HTMLInputElement.<anonymous> (calendar:449:17)
    at HTMLInputElement.dispatch (jquery-3.6.0.min.js:2:43064)
    at HTMLInputElement.v.handle (jquery-3.6.0.min.js:2:41048)
TdError @ tempus-dominus.js:428
unexpectedOptions @ tempus-dominus.js:462
l @ tempus-dominus.js:1587
_mergeOptions @ tempus-dominus.js:1617
_initializeOptions @ tempus-dominus.js:3347
TempusDominus @ tempus-dominus.js:3142
jQueryHandleThis @ tempus-dominus.js:3539
jQueryInterface @ tempus-dominus.js:3524
(anonymous) @ calendar:449
...

Can anyone point me in the right direction?

2

Note that loadjs is used to load JavaScripts and stylesheets asynchronously, if you add your own tag, you can use loadjs() and loadjs.ready() functions in your tags. See Server Events → Page_Head → Example 5 in the help file.In fact, you better put your code in the Startup Script so no tag or loadjs.ready() is required.

3

I used what’s in the example code on the tempus-dominus site, and the linked fields work as expected there - here’s their example:

<div class="container">
    <div class='col-md-5'>
        <div class="form-group">
           <div class="input-group date" id="datetimepicker7" data-target-input="nearest">
                <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker7"/>
                <div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class='col-md-5'>
        <div class="form-group">
           <div class="input-group date" id="datetimepicker8" data-target-input="nearest">
                <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker8"/>
                <div class="input-group-append" data-target="#datetimepicker8" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker7').datetimepicker();
        $('#datetimepicker8').datetimepicker({
            useCurrent: false
        });
        $("#datetimepicker7").on("change.datetimepicker", function (e) {
            $('#datetimepicker8').datetimepicker('minDate', e.date);
        });
        $("#datetimepicker8").on("change.datetimepicker", function (e) {
            $('#datetimepicker7').datetimepicker('maxDate', e.date);
        });
    });
</script>
4

You cannot use the exact code from TempusDominus site, since PHPMaker has its own way to display the DateTimePicker control in the generated web applications.

Please note that PHPMaker uses ew.createDateTimePicker Javascript function. Please always refer to the generated code of your web application for more info and example how to use it and related code for that function.

5

You used some outdated code for older version of the datetime picker, make sure you see the docs for v6, see Examples using jQuery and Events .