v1.0.0-rc.2
When using instance.setDate() the date label on the screen should reflect the updated date.
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">
Most helpful comment
As workaround I noticed we can manually call
_finishSelection()aftersetDate()to see the changes.I created a small JSFiddle:
https://jsfiddle.net/tfbajzk0/