Essentially, it's like this:
I try to select the #fromDate and the #toDate to work on the datepicker. This does not work, despite it being the same element that the datepicker is declared in as a class.
What I'm trying to do is:
I want to be able to add a title to the dynamically generated datepicker class called '.datepicker-title'. However, any variation that I have done over that last four and half hours ONLY works in the console. I have tried from the original file as well, but it does not come up.
I have also tried this method as well:
$('.datepicker').datepicker({
title: 'From'
})
But what this method does, is that it applies the title to both of the datepickers, and not the first input. Please don't get me wrong when I say that I have included the "#fromDate" and the "#toDate" as well within the selecter, but as I mentioned earlier, this method doesn't work.
I have two separate input fields designated below.
<div class="col-sm-3 pink-inputs">
<label>From</label>
<input id="fromDate" class="datepicker hidden-xs" type="text" placeholder="mm/dd/yy" data-bind="value: From" />
<span class="fa fa-angle-down icon"></span>
</div>
<div class="col-sm-3 pink-inputs">
<label>To</label>
<input id="toDate" class="datepicker hidden-xs" type="text" placeholder="mm/dd/yy" data-bind="value: To" />
<span class="fa fa-angle-down icon"></span>
</div>
I am using bootstrap 3.0, and a bootstrap-datepicker plugin.
The class '.pink-inputs' is styling the inputs and nothing is attached to it.
Below, is my current jQuery.
$('.datepicker').datepicker({
format: "mm/dd/yy",
maxViewMode: 2,
todayBtn: "linked",
orientation: "bottom left",
autoclose: true,
startDate: '@ViewBag.MinimumStartDate'
});
$('.datepicker').datepicker({
beforeShowMonth: function(){
if($('input').attr('id') == 'fromDate'){
title: 'From'
}
}
});
I have checked out other similar questions such as 'How can I add class to the specific datepicker?', 'How to add specific classes to dynamic datepickers?'. Unfortunately, these solutions did not help me. I've tried several, all including variations such as:
$('.datepicker').datepicker({}).addClass();
$('.datepicker').datepicker({}).append();
$('.datepicker').datepicker({}).addClass().append().appendTo();
I have also tried the beforeShowMonth, Day, Year, etc in a variety of variations.
As a side note:
The code that is generated by the datepicker dynamically:
<div style="top: 320.017px; left: 584.517px; display: block;" class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-bottom">
<table>
<thead>
<tr>
<th class="datepicker-title" style="display:none;" colspan="7"></th></tr>
<tr>...</tr>
</thead>
</table>
</div>
If the title is not initialized within the datepicker such as this:
$('.datepicker').datepicker({
title: 'From'
});
it causes (from the bootstrap-datepicker.js itself) to display: none; when the datepicker is generated in the HTML.
Aucun commentaire:
Enregistrer un commentaire