设置 Datetimepicker 自定义位置答案

【问题标题】：Set Datetimepicker custom position设置 Datetimepicker 自定义位置
【发布时间】：2014-03-22 17:55:52
【问题描述】：

我想设置 datetimepicker 的自定义位置，如左、右、上、下，这样选择器将永远不会消失或永远不会从可视区域中切断。请帮忙

【问题讨论】：

如果您不提供代码或至少您使用的日期选择器，您希望如何获得帮助。请详细说明问题。

标签： javascript jquery jquery-ui datepicker datetimepicker

【解决方案1】：

我正在使用 jquery 日期选择器。无论您必须设置什么位置，您都可以在 beforeShow 函数中提及它。

@Html.TextBoxFor(m => m.FromDate, new { style = "width: 200px;" })
@Html.TextBoxFor(m => m.ToDate, new { style = "width: 200px;" })

<script type="text/javascript">
$(document).ready(function () {
$("#ToDate").datepicker(
 {
     beforeShow: function (input, inst) {
         inst.dpDiv.css({ marginTop: -input.offsetHeight + 'px', marginLeft:input.offsetWidth + 'px' });
     },
     changeYear: true,
     yearRange: '-2:' + new Date().getFullYear(),
     onClose: function (selectedDate) {
         $("#FromDate").datepicker("option", "maxDate", selectedDate);
     },
 });
});
</script>

【讨论】：

【解决方案2】：

如果你使用的是 twitter 引导日期选择器

$('.form_time').datetimepicker({

pickerPosition: "bottom-left"  // what ever 

}

【讨论】：

【解决方案3】：

下面的代码将为您提供日期选择器的当前位置，您可以使用 css 更改它。试试看

 $("#datepicker").datepicker({
        beforeShow: function (input, inst) {
            setTimeout(function () {
                inst.dpDiv.css({
                    top: 100,
                    left: 200
                });
            }, 0);
        }
    });

【讨论】：