Date picker label not updating when setting the date in javascript.
##Version v1.0.0-rc.2
Expected Behaviour
When using instance.setDate() the date label on the screen should reflect the updated date.
Current Behaviour
I use the following to set the next review date to a year from now on a change event form another component. This works fine and setDate is actually working in terms of the date set within the date picker as it displays the correct date when the picker is loaded.
When the date is set though the label for the date picker still shows the original date.
var nextReviewElem = document.querySelector('#nextReview'); var nextReviewInstance = M.Datepicker.getInstance(nextReviewElem); var newDate = new Date(moment().add(1, 'years')); nextReviewInstance.setDate(newDate);
<div class="input-field col s3">
<label for="nextReview">Next Review Date:</label>
<input type="text" id="nextReview" name="nextReview" class="datepicker" value="{{formatUKDate nextReview}}" onchange="dataChanged()"/>
</div>
Is this the way it is intended to work and you have to update the label manually?
Currently I am getting round by doing the following nextReviewElem.value = nextReviewInstance.toString();
This is a bug as it should definitely update the label.
It appears that not just setDate is broken but even the options. For instance, passing { autoClose: true } on init does nothing.
As workaround I noticed we can manually call _finishSelection() after setDate() to see the changes.
I created a small JSFiddle: https://jsfiddle.net/tfbajzk0/
@btecu
I have noticed that M.AutoInit() deletes the options of the DatePicker. As a workaround just add the class "no-autoinit" to "date picker".
It should look like this:
<input type="text" id="yourID" class="no-autoinit datepicker">