2

I need a datepicker for every product item that i have in checkout. Below is my code for js file:

/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/*jshint browser:true jquery:true*/
/*global alert*/
define(
[
'ko',
'Magento_Catalog/js/price-utils',
'Magento_Checkout/js/model/quote',
'uiComponent'
],
function (ko,priceUtils,quote,Component) {
    "use strict";
    return Component.extend({
        defaults: {
            template: 'Vendor_Module/scheduling/item/details'
        },
        getValue: function(quoteItem) {
            return quoteItem.name;
        },
        getFormattedPrice: function (price) {
            return priceUtils.formatPrice(price, quote.getPriceFormat());
        },
    });

    ko.bindingHandlers['datepicker'] = {
        'init': function(element, valueAccessor, allBindingsAccessor) {
            /* Initialize datepicker with some optional options */
            var options = allBindingsAccessor().datePickeroptions || {},
            prop = valueAccessor(),
            $elem = $(element);

            prop($elem.val());

            $elem.datepicker(options);

            /* Handle the field changing */
            ko.utils.registerEventHandler(element, "change", function () {
                prop($elem.datepicker("getDate"));
            });

            /* Handle disposal (if KO removes by the template binding) */
            ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                $elem.datepicker("destroy");
            });
        },
        'update': function(element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor()),
            $elem = $(element),
            current = $elem.datepicker("getDate");

            if (value - current !== 0) {
                $elem.datepicker("setDate", value);
            }
        }
    };
}
);

and this is the code for the html file that I have:

<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<input class="input-text" type="text" id="customer-dob" name="dob" value="" data-validate="{'required-entry':true}" data-bind="value: dob,datepicker: dob,datePickeroptions: {
                dateFormat: 'dd/M/yy',
                changeMonth: true,
                changeYear: true,
                maxDate: new Date(),
                datePickerPlaceholder: 'dd/M/yy' 
                }"/>

 <div class="product-item-details">

<div class="product-item-inner">
    <div class="product-item-name-block">
        <strong class="product-item-name" data-bind="text: $parent.name"></strong>
        <div data-bind="text: console.log($parent)"></div>

        <div class="details-price">
            <span class="label"><!-- ko i18n: 'Price' --><!-- /ko --></span>
            <span class="value" data-bind="text: getFormattedPrice($parent.price_incl_tax)"></span>
        </div>
    </div>

</div>

<!-- ko if: (JSON.parse($parent.options).length > 0)-->
<div class="product options" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">
    <span data-role="title" class="toggle"><!-- ko i18n: 'View Details' --><!-- /ko --></span>
    <div data-role="content" class="content">
        <strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
        <dl class="item-options">
            <!--ko foreach: JSON.parse($parent.options)-->
            <dt class="label" data-bind="text: label"></dt>
                <!-- ko if: ($data.full_view)-->
                <dd class="values" data-bind="html: full_view"></dd>
                <!-- /ko -->
                <!-- ko ifnot: ($data.full_view)-->
                <dd class="values" data-bind="html: value"></dd>
                <!-- /ko -->
            <!-- /ko -->
        </dl>
     </div>
   </div>
   <!-- /ko -->
  </div>
 <script>
 $( function() {
$( "#datepicker" ).datepicker();
} );
</script>

I referred the below link:

Link referred

However i am getting the below error:

Uncaught ReferenceError: Unable to process binding "value: function (){return dob }" Message: dob is not defined

Please help.

0

dob should be defined as observable.

initialize: function () { this.dob = ko.observable(''); }

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.