Geek Answers Handbook

Create a date dating shortcut in click, not focus

eternicode twitter bootstrap datepicker appears as soon as the field <input>to which it is attached receives focus, as you can see by tabbing on the datepicker field on the official demo page.

Instead, I want it to open only when clicked. Ideally, a dumper will simply appear by clicking on the calendar icon.

How can I prevent it from appearing when focusing?

+4
source share
2 answers

There is no official support for what you want to do in the current version of the library. In the list of documents all kinds of markup you can create an instance of datepicker on and what happened as a result of the behavior. It is very clear that when instantiating a datepicker in an element<input>

focusing the input (click or tab in it) will show the collector.

There is no markup you can create a datepicker instance that trivially will give you what you want. There are also no configuration options that let you choose which events will trigger the date display.

As a result, some reverse engineering of the library will be required to complete the necessary actions. Fortunately, this is pretty easy.

- datepicker <input>, , focus click:

$('#my-input').datepicker()
              .off('focus')
              .click(function () {
                  $(this).datepicker('show');
              });

, http://jsfiddle.net/E4K56/1/

(, ), , :

$('#some-button').click(function () {
    $('#my-input').datepicker('show');
});
+9

, :

<label for="datepickerFrom" class="control-label input-group">Set the date from:</label>
<div class="form-group">
    <div class='input-group date' id='datepickerFrom'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

:

var options = {
    language: 'cs'
}
$('#datepickerFrom').datetimepicker(options);
$('#datepickerFrom input').off('focus')
    .click(function () {
        $(this).parent().data("DateTimePicker").show();
    })
0

More articles:


All Articles