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...

Eugene commented on Nov 12

Hi, one year ago I created this topic. Today I try to use datetime picker in my project in the CustomBoard and everything is the same.

And one more point - The controls should look similar but now they are not:

on the left side Selcet2 control in multiple mode

Eugene commented on Nov 12

Adding 'themeBase' => 'bs4' has helped but styles are still different

KoolReport's Forum

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

Build Your Excellent Data Report