0

I am trying to add a clear button in the jquery datetimepicker widget using the below code.

    define([
    'jquery',
    'ko',
    'Magento_Ui/js/form/element/abstract'
], function ($, ko, Component) {
    'use strict';

    return Component.extend({
        initialize: function () {
            this._super();
               var holidaysarray = window.checkoutConfig.shipping.delivery_date.holidaysarray;
            ko.bindingHandlers.datetimepicker = {
                init: function (element, valueAccessor, allBindingsAccessor) {
                    var $el = $(element);
                    //initialize datetimepicker
                    var options = {
                             beforeShowDay: function(date) {
                                var formateddatestring = jQuery.datepicker.formatDate('yy-mm-dd', date);
                                return [ holidaysarray.indexOf(formateddatestring) == -1 ];
                            },
                            beforeShow: function (input) { 
                                this.dpClearButton(input);    

                            },
                        };

                    $el.datetimepicker(options);

                    var writable = valueAccessor();
                    if (!ko.isObservable(writable)) {
                        var propWriters = allBindingsAccessor()._ko_property_writers;
                        if (propWriters && propWriters.datetimepicker) {
                            writable = propWriters.datetimepicker;
                        } else {
                            return;
                        }
                    }
                    writable($(element).datetimepicker("getDate"));
                },
                update: function (element, valueAccessor) {
                    var widget = $(element).data("DateTimePicker");
                    //when the view model is updated, update the widget
                    if (widget) {
                        var date = ko.utils.unwrapObservable(valueAccessor());
                        widget.date(date);
                    }
                },
                dpClearButton:function(input){
                    setTimeout(function () {
                    var buttonPane = $(input)
                    .datepicker("widget")
                    .find(".ui-datepicker-buttonpane");

                    $("<button>", {
                        text: "Clear",
                        click: function () { jQuery.datepicker._clearDate(input); }
                    }).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
                }, 1);
                }
            };

            return this;
        }
    });
});

I have added dpClearButton function but when run it give me error in console like Uncaught TypeError: this.dpClearButton is not a function

0

Explanation

This is expected behaviour in JS because the context of this has changed.

When you declare a function as part of an object the context of this switches to be the object itself, this example I've just created in the console should explain:

enter image description here

First of all I log this which is the Window object.

Then I create an object that contains a function which console logs this, you'll notice when I run that this is now actually set to the testObject object I created.

Solution

To workaround this you can store the previous context of this before it gets changed.

To do so add this to the first line of your init function:

var self = this;

Then change your function call to be:

self.dpClearButton(input);
  • added var self = this; in init function but now i am getting Cannot read property 'dpClearButton' of undefined – Zaheerabbas Mar 18 '20 at 4:09
  • If self isn't defined then you must have declared it in the wrong place, can you send your updated code please? – Ben Crook Mar 18 '20 at 10:10
  • Here is my code jsfiddle.net/u10rc46n – Zaheerabbas Mar 18 '20 at 10:22
  • also i am getting issue for required.on first load it validate but when i select day and clear it with button from panel it never validate again. – Zaheerabbas Mar 18 '20 at 10:27
  • Your problem looks to be you declared the self variable as a jQuery object, it should be var self = this; – Ben Crook Mar 18 '20 at 11:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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