I'm trying to display the calendar control to select the date, for that i have wrote some thing. But it's displaying textbox calendar control is not popping could you please suggest me how to insert the calendar inside the textbox.
My code is:
Learning/AdditionalShippingBlock/etc/frontend/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Model\CompositeConfigProvider">
<arguments>
<argument name="configProviders" xsi:type="array">
<item name="checkout_custom_shipping_block" xsi:type="object">Learning\AdditionalShippingBlock\Model\CustomBlockConfigProvider</item>
</argument>
</arguments>
</type>
</config>
Learning/AdditionalShippingBlock/Model/CustomBlockConfigProvider.php
<?php
namespace Learning\AdditionalShippingBlock\Model;
use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Store\Model\ScopeInterface;
class CustomBlockConfigProvider implements ConfigProviderInterface
{
/**
* @var \Magento\Framework\App\Config\ScopeConfigInterface
*/
protected $scopeConfiguration;
/**
* @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfiguration
* @codeCoverageIgnore
*/
public function __construct(
\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfiguration
) {
$this->scopeConfiguration = $scopeConfiguration;
}
/**
* {@inheritdoc}
*/
public function getConfig()
{
$showHide = [];
$enabled = $this->scopeConfiguration->getValue('learning_block_config/general/enabled', ScopeInterface::SCOPE_STORE);
$showHide['show_hide_custom_block'] = ($enabled)?true:false;
return $showHide;
}
}
**Learning/AdditionalShippingBlock/view/frontend/layout/checkout_index_index.xml
**
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAdditional" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">shippingAdditional</item>
<item name="children" xsi:type="array">
<item name="additional_block" xsi:type="array">
<item name="component" xsi:type="string">Learning_AdditionalShippingBlock/js/view/checkout/shipping/additional-block</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Learning/AdditionalShippingBlock/view/frontend/web/js/view/checkout/shipping/additional-block.js
define([
'uiComponent'
], function (Component) {
'use strict';
var show_hide_custom_blockConfig = window.checkoutConfig.show_hide_custom_block;
return Component.extend({
defaults: {
template: 'Learning_AdditionalShippingBlock/checkout/shipping/additional-block'
},
canVisibleBlock: show_hide_custom_blockConfig
});
});
Learning/AdditionalShippingBlock/view/frontend/templates/checkout/shipping/additional-block.phtml
<input type="text" class="input-text required-entry" id="calendar_inputField" name="calendar_inputField" aria-required="true" >
<script>
require([
"jquery",
"mage/calendar"
], function($){
$("#calendar_inputField").calendar({
buttonText:"<?php echo __('Select Date') ?>",
});
});
</script>
Could you please suggest me how to do it.
Best Answer
Simply add data bind to input field following way.
Change js code for Learning/AdditionalShippingBlock/view/frontend/web/js/view/checkout/shipping/additional-block.js
});