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:
However i am getting the below error:
Uncaught ReferenceError: Unable to process binding "value: function (){return dob }" Message: dob is not defined
Please help.
Best Answer
dob should be defined as observable.
initialize: function () { this.dob = ko.observable(''); }