DateTimePicker Input Field to Expand when focused #2107

Closed Keith opened this topic on on May 28, 2021 - 3 comments

Keith commented on May 28, 2021

Is there an option to expand the calendar when the input field is clicked/focussed so I don't have to click the Calendar Icon?

                 DateTimePicker::create(array(
                "name" => "single_date",
                "format" => "MMMM YYYY",
                "attributes" => array(
                  "class"=>"form-control"
                ),
                  
                ));

Keith commented on May 28, 2021

I have tried adding input toggling to options, but that doesn't seem to work.

              DateTimePicker::create(array(
                "name" => "single_date",
                "format" => "MMMM YYYY",
                "attributes" => array(
                  "class"=>"form-control"
                ),
                "options" => array(
                  "allowInputToggle" => TRUE
                )
                ));

Sebastian Morales commented on May 31, 2021

Pls try to add an event listener to the input and toggle the datetimepicker like this:

    DateTimePicker::create(array(
        "name"=>"startDatePicker",
        ...
        "onReady" => "function() {
            document.querySelector('#startDatePicker > input').addEventListener('focus', function() { $('#startDatePicker').data('datetimepicker').toggle(); }); 
        }"
    ));

Keith commented on May 31, 2021

This worked. Thank you!

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo

Labels

help needed

Related package Inputs

KoolReport's Forum

DateTimePicker Input Field to Expand when focused #2107

Build Your Excellent Data Report