Javascript 在输入字段下方显示日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31135368/
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
Display date picker below input field
提问by Muhammad Riaz
I am using bootstrap datepicker when I click on input field calendar display above the input field. I want to display it bellow input field.
当我单击输入字段上方的输入字段日历显示时，我正在使用引导程序日期选择器。我想在输入字段下方显示它。
JS
JS
$(function () {
$("#fFYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
}).datepicker("setDate", new Date());
//alert("#FirstFiscalTo");
});
Input Field
输入字段
<input class="textboxCO input-sm form-control datePickerPickcer" id="fiscalYear" name="FiscalYear" type="text" value="6/30/2015 7:12:21 AM">
采纳答案by kavetiraviteja
$(function () {
$("#fiscalYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
});
});<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input id="fiscalYear" name="FiscalYear" type="text" value="6/30/2015 7:12:21 AM">回答by ngelx
Lücks solution is the one, just one minor detail dateFormatoption is not valid, is formatas referenced in the official doc here. You are not noticing this error because "mm/dd/yy"is the default format.
卢克斯解决方案是一个，只有一个小细节dateFormat选项无效，是format因为在官方文档中引用在这里。您没有注意到此错误，因为"mm/dd/yy"它是默认格式。
So, te solution will look like:
因此，te 解决方案将如下所示：
$(function () {
$("#fiscalYear").datepicker({ //<-- yea .. the id was not right
format: "mm/dd/yy", // <-- format, not dateFormat
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
orientation: "top" // <-- and add this
});
});
回答by Irineu Licks Filho
$(function () {
$("#fiscalYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
orientation: "top" // add this
});
});
Reference: https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#orientation
参考：https: //bootstrap-datepicker.readthedocs.org/en/latest/options.html#orientation
回答by J.Pansaniya
$("#fFYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
orientation: "bottom left" // left bottom of the input field
});
