Question

我想把日期时间选择器，我能够做到但我的输入框更小，即使我把＆＃39; form-control input-lg＆＃39;。请建议我如何更改其大小。

此外，我想在文本框上重叠此日期时间选择器图标。

以下是我的代码：

＆＃13;

$('#dateOfAlert1').datetimepicker({
  format: 'dd/MM/yyyy hh:mm:ss',
  language: 'en-US'
});

＆＃13;

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>

<body>
  <label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
  </label>
  <div id="dateOfAlert1" class="input-append">
    <span class="add-on"> <i data-time-icon="icon-time"
    			data-date-icon="icon-calendar"></i>
    		</span> 
    <input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
  </div>

</body>

＆＃13;

Answer 1

你有div类重写bootstrap

ID =＆＃34; dateOfAlert1＆＃34;类=＆＃34;输入追加

删除input-append或编辑该类中的输入。

＆＃13;

$('#dateOfAlert1').datetimepicker({
  format: 'dd/MM/yyyy hh:mm:ss',
  language: 'en-US'
});

＆＃13;

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>

<body>
  <label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
  </label>
  <div id="dateOfAlert1">
    <span class="add-on"> <i data-time-icon="icon-time"
    			data-date-icon="icon-calendar"></i>
    		</span> 
    <input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
  </div>

</body>

＆＃13;

Answer 2

＆＃13;

$('#dateOfAlert1').datetimepicker({
  format: 'dd/MM/yyyy hh:mm:ss',
  language: 'en-US'
});

＆＃13;

.add-on{
position:relative;
 
}
.add-on .date-icon{
position:absolute;
  top:0px;
  left:0px;
}
.add-on{
width:50px!important;
}

＆＃13;

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>

<body>
  <label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
  </label>
  <div id="dateOfAlert1" class="input-append">
    <span class="add-on"> <i data-time-icon="icon-time" class="date-icon" data-date-icon="icon-calendar"></i>
    		</span> 
    <input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
  </div>

</body>

＆＃13;

无法在bootstrap中更改输入框的大小，默认设置为input-sm

2 个答案: