Html 移动引导日期选择器的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40149983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
move the position of bootstrap datepicker
提问by Owner
Can I able to move the datepicker near the calender icon ??? Any fix for this would be appreciated. datepicker is generated dynamically.
我可以将日期选择器移动到日历图标附近吗？？？对此的任何修复将不胜感激。日期选择器是动态生成的。
I have given id to div
我已经给了 div id
<div class="datepick col-sm-6">
<div class='input-group date' id='datetimepicker1' >
<input type='text' class="form-control" placeholder="Select Start Date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script>
$('#datetimepicker1').datepicker({
autoclose: true,
startDate: '-0m',
todayHighlight: true
}).on('changeDate', function(ev){
$('#sDate1').text($('#datetimepicker1').data('date'));
$('#datetimepicker1').datepicker('hide');
});
</script>
采纳答案by Leo the lion
回答by mantissa
Simply you can use followed code sample;
只需使用以下代码示例即可；
$('#input').datepicker({
orientation: "top right"
});
回答by dCrystal
For change the default Bootstrap datetimepicker:
要更改默认的 Bootstrap datetimepicker：
1-) From Jquery
1-) 来自 Jquery
$("#datetimepicker1").datetimepicker({
pickerPosition: 'top-left'
});
Others positions options: bottom-left, top-right
其他位置选项：左下角、右上角
回答by Qammar Feroz
You may override the default class of css of date picker. Add inline style to the div of date picker, for example,
您可以覆盖日期选择器的默认 css 类。将内联样式添加到日期选择器的 div，例如，
change
改变
<div class="datepick col-sm-6">
to
到
<div class="datepick col-sm-6" style="position: absolute; left: 865.15px; display: block;">
It will override the default css. You need to try different values for left property, to make it best fit on the form.
它将覆盖默认的 css。您需要为 left 属性尝试不同的值，以使其最适合表单。
回答by giri-jeedigunta
The 'container' option available in the plugin might come in handy. You can use CSS to position the calendar wherever you need it. Here is an example I have created on jsFiddle.
插件中可用的“容器”选项可能会派上用场。您可以使用 CSS 将日历放置在您需要的任何位置。这是我在 jsFiddle 上创建的一个示例。
https://jsfiddle.net/giri_jeedigunta/6patf4L5/
https://jsfiddle.net/giri_jeedigunta/6patf4L5/
HTML:
HTML：
<div class="dt-cont">
<input type="text" class="datepicker">
</div>
<div id="custom-pos"></div>
JS:
JS：
$('.datepicker').datepicker({
container: '#custom-pos'
});
CSS:
CSS：
#custom-pos {
position: relative;
right: -70px;
}
.dropdown-menu {
left: auto !important;
}
