Search code examples
javascriptjquerycsstwitter-bootstraptimepicker

Make bootstrap timepicker popup on input click

I am tried to create a timepicker using this here

then I implemented its js and css in my project. but when I click it the popup didn't appear

I just have this code and can't add anew control to the glyphicons 

TextBox control = new TextBox { ID = _TimeFieldID + item.BlueprintFieldId, CausesValidation = true, EnableViewState = true, CssClass = "form-control timepicker margin-top-none metadatacontrol", Width = new Unit(ctrWidth + "%") };

and fire it in javascript with 

$(".timepicker").timepicker();

how can I make it appears popup in textbox click? How can ovride the js to get timepicker fire on a click in the input field? any help?

EDIT: Here is my new javascript calling 

  $(".timepicker").timepicker();    
    $('.timepicker').click(function () { 
        $('.bootstrap-timepicker-widget.dropdown-menu').show(); 
    });

Now I can show the timepicker popup , but it looks very wide I try this 

  $('.bootstrap-timepicker-widget.dropdown-menu').css("display", "inline-block");

This code displays the popup. Now, the pop-up window width needs to be set the same as width of the input.

Solution

  • use this javascript

    $('.timepicker').focus(function (){
$('.timepicker').timepicker('showWidget');

});

    or 

    $('.timepicker').click(function (){
$('.timepicker').timepicker('showWidget');

});

    after your code 

    $(".timepicker").timepicker();