1

We recently created a system that allows a maximum amount of orders on specific days, and if that max has been reached the date picker greys out the date, this goes all as expected however currently the default date the date picker selects IS a blocked date. How can I make the default date change to the next available date slot?

datepicker.phtml:

<input class="picking-date-picker" type="text"
                       default="<?= $block->getFirstExpectedPickingDate(); ?>"
                       value="<?= $block->getFirstExpectedPickingDate(); ?>" name="first_shipping_date" autocomplete="off"
                       data-mage-init='{"pickingDatePicker": {
                       "backendFormat": "<?= $block->getBackendFormat(); ?>",
                       "blockedDates": "<?= preg_replace('/\\r\n/',',',$block->getDatesBlocked()); ?>",
                       "blockedDays": "<?= $block->getBlockedDays(); ?>",
                       "frontendFormat": "<?= $block->getFrontendFormat(); ?>",
                       "minDays": "<?= $block->getDaysUntilMinDate(); ?>",
                       "maxDays": "<?= $block->getDaysUntilMaxDate(); ?>"}}'
                />

shipping-date.js

initialize: function() {
    this._super();

    const shippingDate = new dateModel({
        code: 'shipping-date',
        momentFormat: utils.convertToMomentFormat(this.pickerDefaultDateFormat),
        daysOffset: ko.observable(0),
        value: ko.observable(this.firstAvailableDate),
        default: ko.observable(this.firstAvailableDate),
        calculatedDate: ko.observable(this.firstAvailableDate),
        baseDate: ko.observable(this.firstAvailableDate),
        datesBlocked: ko.observable(this.datesBlocked),
        daysBlocked: this.daysBlocked,
        maxDate: this.options.maxDate
    });

    this.value(shippingDate.value());

    this.value.subscribe(function (value) {
        shippingDate.value(value);
    }, this);
}

Image:

enter image description here

I hope I've included enough code to support my request, if you need anything else from me please do let me know as I've tried to keep it as minimal as possible.

2 Answers 2

1

After searching through the entire code with my colleague, we discovered that the current blockedDates array was overwritten when entering the default value. Still, when it generates the cells, the array is correct. I've removed the overwriting query, and now it works as expected. Thank you for trying to assist me.

0

Does your getFirstExpectedPickingDate function return the date you want to be selected by default? if so - you need to add a defaultDate property to the datepicker (using the right format) and it will select the given date by default.

Should look something like this:

<input class="picking-date-picker" type="text"
                   default="<?= $block->getFirstExpectedPickingDate(); ?>"
                   value="<?= $block->getFirstExpectedPickingDate(); ?>" name="first_shipping_date" autocomplete="off"
                   data-mage-init='{"pickingDatePicker": {
                   "backendFormat": "<?= $block->getBackendFormat(); ?>",
                   "blockedDates": "<?= preg_replace('/\\r\n/',',',$block->getDatesBlocked()); ?>",
                   "blockedDays": "<?= $block->getBlockedDays(); ?>",
                   "frontendFormat": "<?= $block->getFrontendFormat(); ?>",
                   "minDays": "<?= $block->getDaysUntilMinDate(); ?>",
                   "maxDays": "<?= $block->getDaysUntilMaxDate(); ?>",
                   "defaultDate": "<?= $block->getFirstExpectedPickingDate(); ?>"}}'
            />

In your JS:

    initialize: function() {
    this._super();

    const shippingDate = new dateModel({
        code: 'shipping-date',
        momentFormat: utils.convertToMomentFormat(this.pickerDefaultDateFormat),
        daysOffset: ko.observable(0),
        value: ko.observable(this.firstAvailableDate),
        default: ko.observable(this.firstAvailableDate),
        calculatedDate: ko.observable(this.firstAvailableDate),
        baseDate: ko.observable(this.firstAvailableDate),
        datesBlocked: ko.observable(this.datesBlocked),
        daysBlocked: this.daysBlocked,
        maxDate: this.options.maxDate,
        defaultDate: this.options.defaultDate
    });

    this.value(shippingDate.value());

    this.value.subscribe(function (value) {
        shippingDate.value(value);
    }, this);
}
1
  • This does not solve my issue. But my colleague and I found the issue yesterday Oct 17, 2022 at 11:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.