How do I get a jQuery UI Datepicker button inline with the input?
Solution 1
The bootstrap metaphor for displaying buttons next to inputs is to use an input-group
like this:
<div class="input-group">
<input type="date" class="form-control" placeholder="Date" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar" ></span>
</button>
</span>
</div>
You can tweak your script to format the output to add these classes and html structure by wrapping the contents like this:
$(".jqueryui-marker-datepicker")
.wrap('<div class="input-group">')
.datepicker({
dateFormat: "yy-mm-dd",
changeYear: true,
showOn: "button"
})
.next("button").button({
icons: { primary: "ui-icon-calendar" },
label: "Select a date",
text: false
})
.addClass("btn btn-default")
.wrap('<span class="input-group-btn">')
.find('.ui-button-text')
.css({
'visibility': 'hidden',
'display': 'inline'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<input type="text" class="jqueryui-marker-datepicker form-control">
Alternative w/ Bootstrap
That being said, this is a pretty convoluted way to do this. I'd add a native bootstrap glyphicon instead of trying to force the button to display correctly. It's also pretty uncommon to mix jQuery-UI and Bootstrap as there is a lot of overlap in functionality and they don't always play nice together. I would recommend looking into just extending bootstrap with a datepicker plugin.
Here's an example using bootstrap-datepicker
$('.datepicker').datepicker({});
//
$('.datepicer-icon').on('click', '.btn', function(e) {
$(e.delegateTarget).find('.datepicker').focus();
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<div class="container" >
<h3>With Input Group</h3>
<div class="input-group datepicer-icon">
<input type="text" class="form-control datepicker" placeholder="Date" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar" ></span>
</button>
</span>
</div>
<h3>With Feedback</h3>
<div class="form-group has-feedback">
<input type="text" class="form-control datepicker" placeholder="Date" />
<i class="glyphicon glyphicon-calendar form-control-feedback"></i>
</div>
</div>
Solution 2
Try this way :
<form class="form-inline">
<div class="form-group">
<label class="control-label col-md-2" for="Time">Date</label>
<div class="col-md-10">
<input class="form-control jqueryui-marker-datepicker hasDatepicker valid" id="Time" name="Time" type="text" value="2015-05-02">
<button type="button" class="ui-datepicker-trigger ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="Select a date">
<span class="ui-button-icon-primary ui-icon ui-icon-calendar"></span><span class="ui-button-text">Select a date</span>
</button>
<span class="text-danger field-validation-valid" data-valmsg-for="Time" data-valmsg-replace="true"></span>
</div>
</div>
</form>
Related videos on Youtube
ProfK
I am a software developer in Johannesburg, South Africa. I specialise in C# and ASP.NET, with SQL Server. I have, in some way or another, been involved in software development for about eighteen years, but always learning something new. At the moment that is WPF and MVVM.
Updated on August 13, 2022Comments
-
ProfK over 1 year
In an MVC 5 project, with the default bootstrap layout, I am using the following code to set all inputs of a certain class to jQuery UI Datepicker widgets:
$(".jqueryui-marker-datepicker").datepicker({ dateFormat: "yy-mm-dd", changeYear: true, showOn: "button" }).next("button").button({ icons: { primary: "ui-icon-calendar" }, label: "Select a date", text: false });
Here is the HTML that is rendered by Razor and jQuery UI after the above call executes, minus some
aria
and validationdata
attributes:<div class="form-group"> <label class="control-label col-md-2" for="Time">Date</label> <div class="col-md-10"> <input class="form-control jqueryui-marker-datepicker hasDatepicker valid" id="Time" name="Time" type="text" value="2015-05-02"> <button type="button" class="ui-datepicker-trigger ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="Select a date"> <span class="ui-button-icon-primary ui-icon ui-icon-calendar"></span><span class="ui-button-text">Select a date</span> </button> <span class="text-danger field-validation-valid" data-valmsg-for="Time" data-valmsg-replace="true"></span> </div> </div>
The problem with this is that datepicker button appears below the date input. This is because the bootstrap
.form-control
class makes gives the input adisplay: block
. If I edit this in Chrome's console toinline-block
the button appears immediately to the right of the input, exactly where I want it.Now I could add a new css rule as follows:
.form-control.jqueryui-marker-datepicker { display: inline-block; }
but I'm just not sure if this is the neatest way to do this, with the least impact on all the layout magic that bootstrap is doing.
-
ProfK almost 9 yearsThanks for a most enlightening answer. The bootstrap datepicker seems like a much, much neater option, especially as my goal here is a turorial for asp.net mvc editor templates!
-
ProfK almost 9 yearsAdd that to what? The
input
already hasform-control
, which gives itdisplay: block;
, as mentioned in my question. -
Umair Khan almost 4 yearsform-control is worng answer