CODEWITHSUNDEEP
jquerytwitter-bootstrap
Joakim Carlsson
Joakim Carlsson

Reputation: 1580

Auto Close Bootstrap-TimePicker?

I'm using bootstrap time picker, it works great but when I press tab between my fields the time picker remains open, so I have to click somewhere else to close it.

How can I make it close it self? Using the time picker like this:

<div class="form-group">
    <label class="col-md-4 control-label">Starttid:</label>
    <div class="col-md-7">
        @Html.TextBox("startTime", Model.Times.StartTime, new { @class = "form-control timepicker timepicker-24" })
    </div>
</div>
<div class="form-group">
    <label class="col-md-4 control-label">Sluttid:</label>
    <div class="col-md-7">
        @Html.TextBox("endTime", Model.Times.EndTime, new { @class = "form-control timepicker timepicker-24" })
    </div>
</div>
<div class="form-group">
    <label class="col-md-4 control-label">Rastlängd:</label>
    <div class="col-md-7">
        @Html.TextBox("breakTime", Model.Times.BreakTime, new { @class = "form-control timepicker timepicker-24" })
    </div>
</div>

These are the settings for my timepicker:

    $.fn.timepicker.defaults = {
    defaultTime: 'current',
    disableFocus: false,
    disableMousewheel: true,
    isOpen: false,
    minuteStep: 15,
    modalBackdrop: true,
    orientation: { x: 'auto', y: 'auto'},
    secondStep: 15,
    showSeconds: false,
    showInputs: true,
    showMeridian: false,
    template: 'dropdown',
    appendWidgetTo: 'body',
    showWidgetOnAddonClick: true
  };

Upvotes: 0

Views: 5066

Answers (5)

mark_b
mark_b

Reputation: 1471

I have multiple timepickers on my page (it's a time sheet application). My solution was to give each of my timepickers a class. Have an onchange event to run the calculations I needed on the value, and also an on keyup event that would close all timepickers, and open one on this timepicker.

$('.timepicker').timepicker({

    // timepicker options here

}).on('change', function() {

    // calculations on the value here

}).on('keyup', function(e) {
    if(e.keyCode == 9) {
        $('.timepicker').timepicker('hideWidget');
        $(this).timepicker('showWidget');
    }
});

Yes, I know that the it's a bit clunky, and that the code is no longer maintained, but sometimes we have to work with what we've got.

Upvotes: 1

user1878521
user1878521

Reputation: 11

having the same problem, I found another solution : listning for "Tab" keydown

$editor.keydown(e => {
    if (e.key == "Tab")
        $editor.timepicker('hideWidget');
});

Upvotes: 1

Brad Kent
Brad Kent

Reputation: 5098

Super-Janky(tm) hack:

$("#precedingInput, #followingInput").on("focus", function(){
    $("timeInput").timepicker("hideWidget");
});

Upvotes: 2

Jai
Jai

Reputation: 74738

You can use 'hideWidget' method to close it when you loose focus from it and you can do the in conjunction with blur with event delegation: 

$(document).on('blur', '.timepicker', function(){
   $(this).timepicker('hideWidget');
});

Your updated fiddle.

Upvotes: 4

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13908

You can use the blur() event in jQuery. You just need a handle to that element, lets say its id="xyz".

So you can make use of the blur() event as follows

$("#thedateinput").blur(function() {
  $(this).datepicker("hide");
});

Upvotes: 1

Related Questions