How to render date range calendar in PrestaShop

In this blog, we are going learn how to render a date range calendar in PrestaShop using HelperCalendar helper class. This helper class allows us to generate a date range calendar. A date range calendar is helpful in filtering and comparing data between a specific period of time.

To render the date range calendar, we will create an instance of HelperCalendar class and assign some default values to this class properties like start and end date range.

Important methods of HelperCalendar class

Method	Description
setDateFrom()	Set the start date
setDateTo()	Set the end date
setActions()	Add custom actions
setCompareDateFrom()	Set compare start date
setCompareDateTo()	Set compare end date
generate()	Generate the date range calendar based on provided parameters

ie: Here is an example of how we can create HelperCalendar class instance and assign default values:

// Default values
$dateTo = date('Y-m-d');
$dateFrom = date('Y-m-d', strtotime("-1 months"));

// Create class instance
$objCalendarHelper = new HelperCalendar();

// Set default values for date range
$objCalendarHelper->setDateFrom($dateFrom);
$objCalendarHelper->setDateTo($dateTo);

// Generate calendar and assign for smarty template
$this->context->smarty->assign([
    'calendar' => $objCalendarHelper->generate(),
    'date_from' => $dateTo,
    'date_to' => $dateFrom,
    'action' => $this->context->link->getAdminLink('AdminModules', true)
    . '&configure=' . $this->name . '&tab_module=' . $this->tab . '&module_name=' . $this->name
]);

Smarty template code:

<div class="panel">
    <h3>{l s='Date range calendar' mod='wksmartyfunction'}</h3>
    <form method="post" action="{$action}">
        <div class="form-group pull-right">
            <button id="datepickerExpand" class="btn btn-default" type="button">
                <i class="icon-calendar-empty"></i>
                <span class="hidden-xs">
                    {l s='From' d='Admin.Global'}
                    <strong class="text-info" id="datepicker-from-info">{$date_from|escape}</strong>
                    {l s='To' d='Admin.Global'}
                    <strong class="text-info" id="datepicker-to-info">{$date_to|escape}</strong>
                    <strong class="text-info" id="datepicker-diff-info"></strong>
                </span>
                <i class="icon-caret-down"></i>
            </button>
        </div>
        {$calendar}
    </form>
    <div class="clearfix"></div>
</div>

We can also add our custom actions to this calendar. To add custom actions, we will pass the action array list to the setActions() method:

$objCalendarHelper->setActions([
    [
        'label' => 'Day',
        'href' => 'javascript:void(0);',
        'class' => 'actionSetDayDate',
        'icon' => 'icon-home'
    ],
    [
        'label' => 'Month',
        'href' => 'javascript:void(0);',
        'class' => 'actionSetMonthDate',
        'icon' => 'icon-calendar'
    ],
    [
        'label' => 'Year',
        'href' => 'javascript:void(0);',
        'class' => 'actionSetYearDate',
        'icon' => 'icon-refresh'
    ]
]);

Now, the custom action button will be shown in the date range calendar:

That’s all about this blog.

If any issue or doubt please feel free to mention it in the comment section.

I would be happy to help.

Also, you can explore our PrestaShop Development Services & a large range of quality PrestaShop Modules.

For any doubt contact us at [email protected].