score:2
you should have a container with position: relative
to let the plugin calculate the position correctly.
In your case the default container is the body
, so you can either set
body {
position: relative;
}
or better, define a different container in datepicker initialization:
$( ".date" ).datepicker({
container: '.container',
format: "dd-mm-yyyy",
autoclose: true,
todayHighlight: true
});
then set position relative to the .container
class
.container {
position: relative;
}
score:0
You could also just include a button tag in the markup with "btn" in the class so you don't have to change the source code but it may not fix your margin issue.
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-info"><span class="fa fa-calendar"></span></button>
</div>
</div>
score:1
Add a container in your javascript:
$( ".date" ).datepicker({
container: '.datepicker_wrapper'
format: "dd-mm-yyyy",
autoclose: true,
todayHighlight: true
});
this makes the datepicker to be added as child of the .datepicker_wrapper in your html DOM, rather then being added at the bottom of your body. This way you can easily position it the way you want with position relative on the wrapper and absolute on the picker itself.
here the fiddle: https://jsfiddle.net/mh8h7jfe/2/
EDIT: updated the fiddle to differ between the 2 datepicker.
$( ".datepicker_wrapper" ).datepicker({
container: '.datepicker_wrapper',
format: "dd-mm-yyyy",
autoclose: true,
todayHighlight: true
});
$( ".datepicker_wrapper2" ).datepicker({
container: '.datepicker_wrapper',
format: "dd-mm-yyyy",
autoclose: true,
todayHighlight: true
});
And css:
.datepicker_wrapper, .datepicker_wrapper2{
position:relative;
}
I now put in the html "datepicker_wrapper" and "datepicker_wrapper2" and call those 2 classes in JS aswell as using those classes as container.
This works fine for me
Related Query
- Boostrap 4 and datepicker dropdown position
- Select2 and CSS Transforms: dropdown menu is off position
- jQuery UI: Datepicker set year range dropdown to 100 years
- Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?
- How do I determine height and scrolling position of window in jQuery?
- In jQuery how can I set "top,left" properties of an element with position values relative to the parent and not the document?
- Bootstrap Datepicker - Months and Years Only
- How to change the pop-up position of the jQuery DatePicker control
- Get and set position with jQuery .offset()
- Get bottom and right position of an element
- Clear and refresh jQuery Chosen dropdown list
- jQuery add blank option to top of list and make selected to existing dropdown
- select2 - Setting different width to input and dropdown
- Trouble with jQuery Dialog and Datepicker plugins
- Detect if dropdown navigation would go off screen and reposition it
- How do I get the coordinate position after using jQuery drag and drop?
- jQuery validator and datepicker click not validating
- Changing minDate and maxDate on the fly using jQuery DatePicker
- How to use Ajax and JSON for making dropdown menu?
- Get and set cursor position with contenteditable div
- Saving and Restoring caret position for contentEditable div
- jQuery datepicker prev and next buttons not showing, how to point at theme folder images in css
- jquery serialize and multi select dropdown
- Dropdown menu with jQuery and nth-child
- How do I set the first day and weeks for Bootstrap Datepicker
- Get current scroll position and pass it as a variable with a link?
- JQuery Datepicker - only select mondays and thursdays
- Bootstrap 3 Datepicker and DateTime validation error
- Problem with year dropdown scrollbar in jQuery datepicker
- How do I get the selected element by name and then get the selected value from a dropdown using jQuery?
- Jquery Ui Datepicker month/year dropdown is not working in popup in latest firefox
- history pushState and scroll position
- Is it possible to trigger jQuery datepicker element on both input click and button?
- jQuery Datepicker and Timepicker for same input field to popup one after another
- how to get current image source of current item position and highlight that item-caroufredsel
- Jquery datepicker - only day and month
- How to fetch the background of DIV on a bottom layer with exact position using jQuery and CSS
- how to customize bootstrap datatable search box and records view position
- JQuery dropdown menu using slideup and slidedown on hover is jumpy
- How to Datepicker picks future dates only and disable past date in JQuery and CSS?
- JQuery DatePicker and beforeShowDay
- jQuery Mobile Change DropDown Selected Option and refresh it
- jquery scroll to specific div position in case of error and focus
- Bootstrap dropdown list position (Up/Bottom) based on document height
- Jquery datepicker change event trigger and input's default change event
- Insert text at current cursor position on dropdown list changed inside iframe
- Sammy.js cache and scroll position when going back in history
- jQuery datepicker only works once and is not shown the second time
- jQueryUI DatePicker YearRange and ChangeYear problems
- Issue in changing view by dropdown of bootstrap datepicker
More Query from same tag
- Using regex to match part of a word or words
- Using Jquery, replace one row in table with a new one
- jQuery: what is it "forbidden" to do in plain Javascript
- Catch "applied coupon" event to trigger a JS function in Woocommerce
- Responsive image gallery using Masonry
- How to post the parameter in ajax call of jquery datatable
- Showing/hiding <div> with JavaScript
- google maps api v3 - open infowindow from an external click
- Bootstrap 4 - Link to specific tab
- Acess the table data <td> row by row <tr> individually
- show loading before showing send result in jquery
- How to detect the last element in a line with jQuery?
- jquery touchstart not working on document
- Nested single/double quotes in Javascript/jQuery
- Render Ajax's received Data in a strongly-typed view
- How to prevent stop scrolling hovering an iFrame (Perfect Scrollbar)?
- Image doesn't change size with div container / window
- jQuery Encoding Issues
- Jqgrid subgrid not expanding on first load
- Why is my CSS3/jQuery animation's performance so slow?
- Appending element is not working in IE11
- JQuery add additional data to new Option
- Jquery like selector in Haskell
- Simple throttle in JavaScript
- jQuery Mobile Panel Should Not Close On Swipe Left
- How to make Height Auto on Colorbox?
- What is this pattern's name / purpose?
- I'm getting an XML error messages for JSON?
- Select td based on data attribute
- Mouse controlled first person movement JS