mercredi 22 juin 2016

How to add separate classes to two separate dynamic datepickers?


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.

enter image description hereenter image description here


Aucun commentaire:

Enregistrer un commentaire