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 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>
What you need is little bit of jquery
see here
JQuery
$('#datetimepicker1').click(function(){
var popup =$(this).offset();
var popupTop = popup.top - 40;
$('.ui-datepicker').css({
'top' : popupTop
});
});
About positioning of datepicker read here
Simply you can use followed code sample;
$('#input').datepicker({
orientation: "top right"
});
For change the default Bootstrap datetimepicker:
1-) From Jquery
$("#datetimepicker1").datetimepicker({
pickerPosition: 'top-left'
});
Others positions options: bottom-left, top-right
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With