Set Datetimepicker custom position

Question

I want to set custom position of datetimepicker like left, right, top, bottom so picker will never go out or never cut off from the visual area. Please help

Answer 1

I am using jquery datepicker. Whatever position you have to set you can mention it in beforeShow function.

@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>

Answer 2

if you are using twitter bootstrap datepicker

$('.form_time').datetimepicker({

pickerPosition: "bottom-left"  // what ever 

}

Answer 3

below code will give you current position of your datepicker, and you can change it by using css. try it

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