Issue Progmatically Setting Date After Init

[bcorrel2]

I am building an Angular page with the following function: when an item from a list is selected, the details of the item are populated in the fields, and the data can then be edited and saved back to the item. To put it more simply, I would like to set the fields progmatically.

At present I am trying:

for (calendar of this.calendars) { calendar.clear(); calendar.date = selectedDate; calendar.startDate = selectedDate; calendar.save(); calendar.refresh(); }

but it doesn't seem to be helping. The date field is never set. Is this an issue with my code? Or a bug in the calendar?

[caffeinatedMike]

I've been struggling with being able to properly set the selected date as well. Using the below, I can get the date to update properly in the top half of the calendar, but the date doesn't show as selected in the actual calendar.

$('#calendar-due-date')[0].bulmaCalendar.clear();
$('#calendar-due-date')[0].bulmaCalendar.date.start = new Date('06/24/2020');
$('#calendar-due-date')[0].bulmaCalendar.save();
$('#calendar-due-date')[0].bulmaCalendar.refresh();

[caffeinatedMike]

@bcorrel2 I found a hack-y workaround that allows the calendar to reflect the updated chosen date. Please see below:

$('#task-overview-calendar').on('click', function() {
    // When viewing a particular task in modal view
    $current_due_date = $(this).find('input').val();
    $('#calendar-due-date').val(formalizeDate($current_due_date));
    $('#calendar-due-date')[0].bulmaCalendar.value(formalizeDate($current_due_date));

    /* Hack-y way to set active date on Bulma Calendar since suggested method doesn't work */
    $('#calendar-modal .datepicker-days .date-item').removeClass('is-active')
    $date_pieces = $(this).find('input').val().split('-');
    // Months are zero-indexed, so subtract 1
    $formatted_date = (new Date($date_pieces[0], Number($date_pieces[1]) - 1, $date_pieces[2], 0, 0, 0, 0)).toString();
    $('.datepicker-days .datepicker-date[data-date="' + $formatted_date + '"] .date-item').addClass('is-active');
    /* End Hack-y Bulma Calendar Workaround */

    $('#calendar-modal').toggle();
    $('.datetimepicker-wrapper').css('display', 'flex');
});

// From MM/dd/yyyy to yyyy-MM-dd
function formalizeDate(datestring) {
    date_parts = datestring.split('/');
    return [date_parts[2], date_parts[0], date_parts[1]].join('-')
}

Where my normal date input is located in a "task" modal and the above only shows the simple calendar-modal div with the date input when the field is clicked on the "task" modal

...
<div class="field is-horizontal">
    <div class="field-label is-normal">
        <label class="label">Due Date</label>
    </div>
    <div class="field-body">
        <div class="field">
            <p id="task-overview-calendar" class="control has-icons-right">
                <input class="input is-static" type="date" value="">
                <span class="icon is-small is-right">
                    <i class="fas fa-calendar"></i>
                </span>
            </p>
        </div>
    </div>
</div>
...
<div id="calendar-modal">
    <input type="date" id="calendar-due-date">
</div>

Hope this helps!

[drake7707]

I managed to get it working with an inline calendar with

    ignoreCalenderChange = true;
    calendar.value(data.date);
    calendar.refresh();
    calendar.datePicker.refresh();
    ignoreCalenderChange =false;

The ignoreCalendarChange is checked in the select event because that'll be fired by the .value() call.

[gregorko]

This sequence worked for me:

  calendar.date.start = date;
  calendar.datePicker._visibleDate = date;
  calendar.datePicker.refresh();
  calendar.changeTimeManually();

[FilipJakab]

I managed to get it working with an inline calendar with

    ignoreCalenderChange = true;
    calendar.value(data.date);
    calendar.refresh();
    calendar.datePicker.refresh();
    ignoreCalenderChange =false;

The ignoreCalendarChange is checked in the select event because that'll be fired by the .value() call.

Hello,
thanks, refreshing the .datePicker motivated me to then try to manipulate the props of the .datePicker and that did the trick:

this.calendarInstance.datePicker.min = this.formatDateForDatePicker(newMinDate)
this.calendarInstance.datePicker.refresh()

My original issue was that using the setter: calendarInstance.minDate = "2020/12/24" had no effect. I also discovered that the minDate prop had value NaN without any warning/errors in the console...
(I also tried many formats and Date type as well)

[michael-hack]

Fixed, just use the calendar.value() method.