Search code examples
laraveloctobercmsoctobercms-pluginsoctobercms-widgets

October CMS datetime picker has a max date of 2020


I am trying to add an event using proevent in October CMS and the date-picker has a default range from 2010 to 2020 and I cannot change this option. When I inspect the HTML I see the below code:

<div id="Multidate-formMultidate-multidate" class="multidate" data-control="datepicker" data-show-time="false" data-min-date="2000-01-01" data-max-date="2020-12-31" data-disposable="">

Here is an image of the date-picker: enter image description here

Below is the back-end builder which somehow is displaying that the widget is unknown by saying Unknown control type:multi-date: enter image description here

When I edit that to see what will happen nothing changes. I also tried setting the maxDate and minDate dates by modifying the Datepicker class in the formwidgets to set the min and max dates but nothing is happening as well. Below is the datepicker class:

<?php namespace Backend\FormWidgets;

use Carbon\Carbon;
use Backend\Classes\FormField;
use Backend\Classes\FormWidgetBase;
use System\Helpers\DateTime as DateTimeHelper;

/**
 * Date picker
 * Renders a date picker field.
 *
 * @package october\backend
 * @author Alexey Bobkov, Samuel Georges
 */
class DatePicker extends FormWidgetBase
{
    //
    // Configurable properties
    //

    /**
     * @var bool Display mode: datetime, date, time.
     */
    public $mode = 'datetime';

    /**
     * @var string Provide an explicit date display format.
     */
    public $format = null;

    /**
     * @var string the minimum/earliest date that can be selected.
     * eg: 2000-01-01
     */
    public $minDate = null;

    /**
     * @var string the maximum/latest date that can be selected.
     * eg: 2020-12-31
     */
    public $maxDate = null;

    /**
     * @var string number of years either side or array of upper/lower range
     * eg: 10 or [1900,1999]
     */
    public $yearRange = 50;

    /**
     * @var int first day of the week
     * eg: 0 (Sunday), 1 (Monday), 2 (Tuesday), etc.
     */
    public $firstDay = 0;

    /**
     * @var bool show week numbers at head of row
     */
    public $showWeekNumber = false;

    /**
     * @var bool change datetime exactly as is in database
     */
    public $ignoreTimezone = false;

    //
    // Object properties
    //

    /**
     * @inheritDoc
     */
    protected $defaultAlias = 'datepicker';

    /**
     * @inheritDoc
     */
    public function init()
    {
        $this->fillFromConfig([
            'format',
            'mode',
            'minDate',
            'maxDate',
            'yearRange',
            'firstDay',
            'showWeekNumber',
            'ignoreTimezone',
        ]);

        $this->mode = strtolower($this->mode);

        if ($this->minDate !== null) {
            $this->minDate = is_integer($this->minDate)
                ? Carbon::createFromTimestamp($this->minDate)
                : Carbon::parse($this->minDate);
        }

        if ($this->maxDate !== null) {
            $this->maxDate = is_integer($this->maxDate)
                ? Carbon::createFromTimestamp($this->maxDate)
                : Carbon::parse($this->maxDate);
        }
    }

    /**
     * @inheritDoc
     */
    public function render()
    {
        $this->prepareVars();
        return $this->makePartial('datepicker');
    }

    /**
     * Prepares the list data
     */
    public function prepareVars()
    {

        if ($value = $this->getLoadValue()) {

            $value = DateTimeHelper::makeCarbon($value, false);

            $value = $value instanceof Carbon ? $value->toDateTimeString() : $value;
        }

        $this->vars['name'] = $this->getFieldName();
        $this->vars['value'] = $value ?: '';
        $this->vars['field'] = $this->formField;
        $this->vars['mode'] = $this->mode;
        $this->vars['minDate'] = $this->minDate;
        $this->vars['maxDate'] = $this->maxDate;
        $this->vars['yearRange'] = $this->yearRange;
        $this->vars['firstDay'] = $this->firstDay;
        $this->vars['showWeekNumber'] = $this->showWeekNumber;
        $this->vars['ignoreTimezone'] = $this->ignoreTimezone;
        $this->vars['format'] = $this->format;
        $this->vars['formatMoment'] = $this->getDateFormatMoment();
        $this->vars['formatAlias'] = $this->getDateFormatAlias();
    }

    /**
     * @inheritDoc
     */
    public function getSaveValue($value)
    {
        if ($this->formField->disabled || $this->formField->hidden) {
            return FormField::NO_SAVE_DATA;
        }

        if (!strlen($value)) {
            return null;
        }

        return $value;
    }

    /**
     * Convert PHP format to JS format
     */
    protected function getDateFormatMoment()
    {
        if ($this->format) {
            return DateTimeHelper::momentFormat($this->format);
        }
    }

    /*
     * Display alias, used by preview mode
     */
    protected function getDateFormatAlias()
    {
        if ($this->format) {
            return null;
        }

        if ($this->mode == 'time') {
            return 'time';
        }
        elseif ($this->mode == 'date') {
            return 'dateLong';
        }
        else {
            return 'dateTimeLong';
        }
    }
}

Below is my datepicker html page:

<?php if ($this->previewMode): ?>
<div class="form-control"><?= Backend::dateTime($value, [
    'format' => $format,
    'formatAlias' => $formatAlias,
    'defaultValue' => $value
]) ?></div>
<div
    id="<?= $this->getId() ?>"
    class="field-datepicker"
    data-control="datepicker"
    <?php if ($formatMoment): ?>data-format="<?= $formatMoment ?>"<?php endif ?>
    <?php if ($minDate): ?>data-min-date="<?= $minDate ?>"<?php endif ?>
    <?php if ($maxDate): ?>data-max-date="<?= $maxDate ?>"<?php endif ?>
    <?php if ($yearRange): ?>data-year-range="<?= $yearRange ?>"<?php endif ?>
    <?php if ($firstDay): ?>data-first-day="<?= $firstDay ?>"<?php endif ?>
    data-show-week-number="<?= $showWeekNumber ?>"
    <?php if ($ignoreTimezone): ?>data-ignore-timezone<?php endif ?>
>

    <?php if ($mode == 'date'): ?>
        <?= $this->makePartial('picker_date') ?>
    <?php elseif ($mode == 'datetime'): ?>
        <div class="row">
            <div class="col-md-6">
                <?= $this->makePartial('picker_date') ?>
            </div>
            <div class="col-md-6">
                <?= $this->makePartial('picker_time') ?>
            </div>
        </div>
    <?php elseif ($mode == 'time'): ?>
        <?= $this->makePartial('picker_time') ?>
    <?php endif ?>

    <!-- Data locker -->
    <input
        type="hidden"
        name="<?= $field->getName() ?>"
        id="<?= $field->getId() ?>"
        value="<?= e($value) ?>"
        data-datetime-value
        />

</div>

Is there anything I am doing wrong or i can change to fix this issue? I have been handed this project and the previous developer did not document this well.


Solution

  • I directly edited the view by going inside the plugin itself and removed the maxdate php code and set it to blank. The directory was plugins/radiantweb/proevents/modules/backend/formwidgets/multidate/partils/_multidate.htm. That fixed the problem and now date has no Max and I can also set directly the Max and Min dates accordingly. The view looks like below:

    <div
      id="<?= $this->getId() ?>"
      class="multidate"
      data-control="datepicker"
      data-show-time="<?= $showTime ? 'true' : 'false' ?>"
      data-min-date="<?= $minDate ?>"
      data-max-date=""
    >
      <input
        type="text"
        class="multidate-picker form-control align-left input-small"
        autocomplete="off"
        data-datepicker
      />
      <input
        type="hidden"
        id="<?= $this->getId('input') ?>"
        name="<?= $name ?>[date][]"
        value="<?= $value['date'][0] ?>"
        data-datetime-value
      />
    
      <?php if ($this->mode != 'date'): ?>
        <input
          type="text"
          id="<?= $this->getId('input') ?>-sttime"
          name="<?= $name ?>[sttime][]"
          value="<?= $value['sttime'][0] ?>"
          class="form-control align-left timepicker"
        />
    
        <input
          type="text"
          id="<?= $this->getId('input') ?>-entime"
          name="<?= $name ?>[entime][]"
          value="<?= $value['entime'][0] ?>"
          class="form-control align-left timepicker"
        />
      <?php endif ?>
    
      <a href="javascript:void(0);" onClick="$(this).parent().remove();"><i class="icon-trash-o"></i></a>
    </div>