4

I am trying to show the date picker in the mass action field in the custom block grid.

Here is my code:

$this->getMassactionBlock()->addItem(
    'update_eta',
        [
            'label' => __('Update ETA (Don\'t Notify)'),
            'url' => $this->getUrl('*/*/massUpdateEta'),
            'additional' => [
                'eta_value' => [
                    'name' => 'eta_value',
                        'type'     => 'date',
                        'class' => 'required-entry control-text',
                        'label' => __('ETA Value'),
                        'gmtoffset' => true,
                        'format'    => '%d.%m.%Y'
            ],
        ]
    ]
);

block-grid-mass-action-datepicker.png

The date picker icon is being shown with the textbox, but the date picker is not being opened.

Can anyone help me to fix this problem?

2
  • Is there anyone who can help me? Sep 14, 2020 at 11:15
  • facing the same issue.
    – mobz
    Jun 29, 2021 at 5:41

2 Answers 2

1

I know it's been more than a year but still answering it as I am sure someone will stumble upon it in future and so Answering for them.

The basic issue is that the datepicker is not working with dynamically created input field as Magento copies this input text field from a hidden element as you select action from dropdown.

However, I don't have a solution but I have work around that can work if you don't specifically want magento calendar. Work around is to use input type date field instead of the field appearing above.

You have to add custom class to your element and as per your example this is demo code is provided below:

$this->getMassactionBlock()->addItem(
    'update_eta',
        [
            'label' => __('Update ETA (Don\'t Notify)'),
            'url' => $this->getUrl('*/*/massUpdateEta'),
            'additional' => [
                'eta_value' => [
                    'name' => 'eta_value',
                        'type'     => 'date',
                        'class' => 'required-entry control-text eta_value',
                        'label' => __('ETA Value'),
                        'gmtoffset' => true,
                        'format'    => '%d.%m.%Y'
                        'after_element_html'=>'<script>require(["jquery"], function($)
                        {
                            $(document).on("change","#mass-action-select-id", function(){
                               if($(this).val() == "eta_value")
                               {
                                    $(".admin__grid-massaction span.outer-span .eta_value").remove();
                                    $(".admin__grid-massaction span.outer-span .ui-datepicker-trigger.v-middle").remove();
                                    $(".admin__grid-massaction span.outer-span .field-row").append('<input name="eta_value" value="" type="date" class="required-entry eta_value absolute-advice admin__control-text input-text input-date" autocomplete="on">');
                               }
                               
                            });
                        });</script>'
            ],
        ]
    ]
);
0

The below are examples to add date field mass action in Magento's search term grid

app/code/VendorName/Modulename/view/adminhtml/layout

search_term_grid_block.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="add.date.script" template="VendorName_Modulename::datescript.phtml"/>
        </referenceContainer>
        <referenceBlock name="adminhtml.catalog.search.grid.massaction">
            <arguments>
                <argument name="options" xsi:type="array">
                   <item name="updatedate" xsi:type="array">
                       <item name="label" xsi:type="string" translate="true">Date Search</item>
                       <item name="url" xsi:type="string">routeName/controllerName/massaction</item>
                       <item name="confirm" xsi:type="string" translate="true">Are you sure?</item>
                       <item name="block_name" xsi:type="string">grid.massaction.updatedate.additional</item>
                   </item>
                </argument>
            </arguments>
            <block class="Magento\Backend\Block\Widget\Grid\Massaction\Additional"
                   name="permission.user.grid.massaction.updatedate.additional" as="grid.massaction.updatedate.additional">
                <arguments>
                    <argument name="fields" xsi:type="array">
                        <item name="updatedate" xsi:type="array">
                            <item name="label" xsi:type="string" translate="true">Select Date</item>
                            <item name="name" xsi:type="string">updatedate</item>
                            <item name="class" xsi:type="string">required-entry control-text updatedate</item>
                            <item name="gmtoffset" xsi:type="boolean">true</item>
                            <item name="format" xsi:type="string">%d.%m.%Y</item>
                            <item name="type" xsi:type="string">date</item>
                            <item name="required" xsi:type="boolean">true</item>
                        </item>
                    </argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

app/code/VendorName/Modulename/view/adminhtml/templates

datescript.phtml

<script>
    require([
        'jquery'
    ], function($){
        $(document).ready( function() {
            $(document).on("change","select#search_term_grid_massaction-select", function(){
               if($(this).val() == "updatedate")
               {
                    $(".admin__grid-massaction span.outer-span .updatedate").remove();
                    $(".admin__grid-massaction span.outer-span .ui-datepicker-trigger.v-middle").remove();
                    $(".admin__grid-massaction span.outer-span .field-row").append('<input name="updatedate" value="" type="date" class="required-entry updatedate absolute-advice admin__control-text input-text input-date" autocomplete="on">');
               }
            });
        });
    });
</script>

app/code/VendorName/Modulename/Controller/Adminhtml/Term

MassAction.php

<?php

namespace VendorName\Modulename\Controller\Adminhtml\Term;

use Magento\Framework\App\Action\HttpPostActionInterface as HttpPostActionInterface;
use Magento\Search\Controller\Adminhtml\Term as TermController;

class MassDateUpdate extends TermController implements HttpPostActionInterface
{
    public function execute()
    {
        $searchData  = $this->getRequest()->getParams();
        print_r($searchData);
        exit();
    }

}

Note: You need to create your custom route or use the default existing route name.

The reference file for Massaction:

vendor/magento/module-search/Controller/Adminhtml/Term/MassDelete.php

Click here to use the default existing route name

OUTPUT:

enter image description here

2
  • You don't have to define the updatedate item as a date type in search_term_grid_block.xml. It can simply be a text type and then call datepicker in your datescript.phtml file, without removing and appending any html $("#updatedate").datepicker();
    – veli
    Feb 23 at 23:09
  • @veli Thanks for your suggestion. Yes, I would like to hear your approach. Could you please post your solution as an answer so it will be very helpful?
    – Msquare
    Feb 26 at 7:12

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.