The calendar icon in the datepicjer is outside of the field

Eugene commented on Nov 1, 2023

the code:

<div class='modal fade' id='newDateModal' tabindex='-1' aria-labelledby='newDateModal' aria-hidden='true'>
    <div class='modal-dialog'>
        <div class='modal-content'>
            <div class='modal-header'>
                <h1 class='modal-title fs-5' id='exampleModalLabel'>Create a new date for the stock updating</h1>
                <button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>
            </div>
            <div class='modal-body'>
                <form id='setdateform'>
                    <div class='row'>

                        <?php
                        DateTimePicker::create(array(
                            'name' => 'setDate',
                            'format' => 'Do MMM, YYYY',
                        ));
                        $stock = ($this->params['barmode']) ? 3 : 2;
                        ?>

                        <input type="hidden" name="barmode" value=<?= $stock; ?>>
                    </div>
                </form>
            </div>
            <div class='modal-footer'>
                <button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Close</button>
                <button type='button' id='button_ok' class='btn btn-primary'>Create</button>
            </div>
        </div>
    </div>
</div>

What is the reason?

KoolReport commented on Nov 1, 2023

That's strange. Could you try the inspector and see if any css rule from theme or app that affects the calendar icon. Then we will know how to fix it.

Eugene commented on Nov 1, 2023

could it be due to I use bs5?

Eugene commented on Nov 1, 2023

I've just checked your demo. It should be outside but in my case there are issues with the alignment and the background

and if I compare your demo HTML with mine - the generated HTML look different This is mine:

<krwidget widget-name="setDate" widget-type="koolreport/inputs/DateTimePicker">
    <div id="setDate" class="input-group date">
        <input type="text" class="form-control">
        <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar fa fa-calendar"></span>
            </span>
    </div>
    <input name="setDate" value="2023-11-01 18:50:14" type="hidden">
    <script ...
    </script></krwidget>

KoolReport commented on Nov 1, 2023

Let try this:

                        DateTimePicker::create(array(
                            'name' => 'setDate',
                            'format' => 'Do MMM, YYYY',
                            "themeBase"=>"bs4"
                        ));

Let see if it resolve the issue.

Eugene commented on Nov 1, 2023

Better... but it still looks strange ))

so is it bs5 issue?

KoolReport commented on Nov 2, 2023

I guess it is, each version of bootstrap, they change the syntax of some component, that cause trouble. So for now, you may off the icon first by "icon"=>"", we will work on the bs5 package and the input package first.

Eugene commented on Nov 2, 2023

Without this icon, this component is unusable because the calendar opens after clicking on the icon...

KoolReport's Forum

The calendar icon in the datepicjer is outside of the field #3184

Build Your Excellent Data Report