Why is it impossible to set the time manually in the calendar component?

Question

css

Hello!
There is such a markup.

<a class="btn btn-primary btn-large" href="#testModal" data-toggle="modal">Запустить демонстрацию модального элемента</a>
    <div id="testModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <h3>Тест header</h3>
        </div>
        <div class="modal-body" style="clear: both;">
            <h3>Тест body</h3>
            <div>
<code lang="php">


                <?
                $APPLICATION->IncludeComponent('bitrix:main.calendar', '', Array(
                        'SHOW_INPUT' => 'Y',
                        'FORM_NAME' => '',
                        'INPUT_NAME' => 'date_from',
                        'INPUT_NAME_FINISH'=> 'date_to',
                        'INPUT_VALUE' => '',
                        'INPUT_VALUE_FINISH' => '',
                        'SHOW_TIME' => 'Y',
                        'HIDE_TIMEBAR' => 'N',
                        'INPUT_ADDITIONAL_ATTR' => 'placeholder="дд.мм.гггг чч:мм:сс"'
                    )
                );
                ?>
</code>
            </div>
        </div>
        <div class="modal-footer">
            <h3>Тест footer</h3>
        </div>
    </div>

When the component is in a modal window, it is not possible to set the time manually, but when the component is called just on the page (not in the modal window), then it is possible to manually set the time.
What could be the problem?
Modal window from bootstrap 2

Answer 1

unable to set time manually

- i.e. put the cursor in the input and print it does not work?

Answer 2

Examine the page with, for example, Firebug.
- It is possible that something is wrong with the CSS and the input is simply covered by another block with transparency