Bootstrap 的Timepicker

大兔子大兔子 提交于 2020-08-19 23:17:32

<div class="form-group">
    <label class="col-md-2 control-label"><span style="color:red; ">*</span>时间</label>
    <div class="col-md-10">
        <div class="input-group">
            <input type="text" class="form-control" id="per_time" name="per_time">
            <span class="input-group-btn">
            <button class="btn default" type="button">
                <i class="fa fa-clock-o"></i>
            </button>
        </span>
        </div>
    </div>
</div>

<!-- timepicker -->
<link rel="stylesheet" href="/static/assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.css">
<script src="/static/assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js" type="text/javascript"></script>

GitHub地址:https://github.com/jdewit/bootstrap-timepicker

 

配置参数

Name Options / Defaults Description
template 'dropdown' (default)
'modal'
false
Show picker in a dropdown
Show picker in a modal
Don't show a widget
maxHours 24 Specify a maximum number of hours the TimePicker can handle. showMeridian must be set to false
snapToStep false If true, setting the time will snap it to the closest "step", either minute or second, depending on which unit is currently highlighted. If the number would otherwise snap to 60 higher, the unit "overflows" to 0.
minuteStep 15 Specify a step for the minute field.
showSeconds false Show the seconds field.
secondStep 15 Specify a step for the second field.
defaultTime 'current' (default)
'11:45 AM'
false
Set to the current time.
Set to a specific time.
Do not set a default time
showMeridian true (default)
false
12hr mode
24hr mode
showInputs true (default)
false
Shows the text inputs in the widget.
Hide the text inputs in the widget
disableFocus false Disables the input from focusing. This is useful for touch screen devices that display a keyboard on input focus.
disableMousewheel false Disables the input from changing on mousewheel events
modalBackdrop false Show modal backdrop.
appendWidgetTo body Allow for custom placing of the widget
explicitMode false When true, user can type "123" to set time to "1:23" or "12345" to set time to "1:23:45".
icons
 
  1.  
     
  2.  
    {
  3.  
    up: 'glyphicon glyphicon-chevron-up',
  4.  
    down: 'glyphicon glyphicon-chevron-down'
  5.  
    }
An object with keys 'up' and 'down' representing CSS class names to be used for the widget's icon classes.
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!