CODEWITHSUNDEEP
bootstrap-datetimepicker
Lajos Arpad
Lajos Arpad

Reputation: 76814

How to keep keyboard input for Bootstrap datetimepicker?

I am trying to use Bootstrap datetimepicker and it works well, however, there is a problem that I need to resolve. When a date was already chosen, I would like to be able to type keyboard input and to keep that whatever it is, even if it's not a valid date on focus loss.

This is a minimal reproducible example:

<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker({
                    format: "MM/DD/YYYY hh:mm A",
                    keepOpen: false,
                });
            });
        </script>
    </div>
</div>

Fiddle: https://jsfiddle.net/qfn6mz9t/2/

Reproduction steps: - choose a date - click into the input - type any text, for example "example" - click outside the input - the input has something else as a value than what I typed

How to ensure that my input stays even if focus is lost?

Upvotes: 0

Views: 625

Answers (1)

Lajos Arpad
Lajos Arpad

Reputation: 76814

I have managed to solve the issue. This is how I initialize a datetimepicker:

$('#start_date').datetimepicker({
    format: "MM/DD/YYYY hh:mm A",
    keepOpen: false,
    useCurrent: false,
    keepInvalid: true,
    useStrict: true
});

The keepInvalid part is helpful here. I have also needed to replace the datetimepicker-input class with datetimepicker class, because for some reason invalid dates resulted in stackoverflow exceptions thrown. Now, the new problem was that on focus loss the datetimepicker will not close, so I had to programmatically make sure that it closes:

function hideDateTimePicker() {
    $("#" + this.id).datetimepicker("hide");
}

and

$("#start_date, #end_date").on("focusout", hideDateTimePicker);

Upvotes: 1

Related Questions