Unable to set templates for inputs in DateRangePicker

[RomeroMsk]

Hello. I want to disable error hint on both inputs of DateRangePicker. But I can't see the way to change input templates through options.

[tonydspaniard]

You do not do that from the options... I think is enough by not setting the form attribute. As like that it won't set the template: https://github.com/2amigos/yii2-date-picker-widget/blob/master/DateRangePicker.php#L101

[RomeroMsk]

Ok, it works fine, thank you.

[RomeroMsk]

... works fine, but validateOnChange and validateOnSubmit will not work in this case :(

[tonydspaniard]

@RomeroMsk if you remove the errors... is obvious that it wont work, thats what Yii requires to validate your inputs.

[RomeroMsk]

$form->field($searchModel, 'delivery_date_from')->widget(
    DateRangePicker::className(), [
        'attributeTo' => 'delivery_date_to',
        'form' => $form,
]);

With this code errors are duplicating: one in form-group generated by $form->field() and one in form-control generated by your widget. So if I want to see one error message for both inputs (in form-group), I need to hide errors of widget. But I still need to validate them.

[tonydspaniard]

Thats strange... thats exactly how I use it... and I do not see double error. Going to test.

[tonydspaniard]

The above picture is from the following code:

use yii\bootstrap\ActiveForm;
.....

<?= $form->field($model, 'date_from')->widget(DateRangePicker::className(), [
        'attributeTo' => 'date_to',
        'form' => $form,
        'clientOptions' => [
            'autoclose' => true,
            'format' => 'dd-M-yyyy',
            'viewFormat' => 'dd-M-yyyy',
        ],
        'clientEvents' => [
            'changeDate' => 'function(e){
                // making sure date-to, is not less than date-from
                if(e.target.id == "model-date_from") {
                    $("#model-date_to").datepicker("setStartDate", e.date);
                    var toDate = $("#model-date_to").data("datepicker").range[1];
                    if (toDate < e.date.getTime()) {
                        $("#model-date_to").datepicker("setDate", e.date);
                    }
                }
            }'
        ]
    ])->label('Start and End Dates');?>

[RomeroMsk]

Hmm. Try to validate them as 'date'. When I use 'required', I also don't see duplicating errors. But when I validate inputs as dates, I have this issue.

[tonydspaniard]

I'll have a look whenever i have a chance. It should be exactly the same.

[RomeroMsk]

Just rechecked all - the issue is there. Did you reproduce this? I can show you all code if you need. Even if I set 'form' in widget, the onSubmit validation 'date' doesn't work: page reloads and only after reload shows errors. To reproduce you can set 'date' validation rule in search model with one format and use widget with another format. This is first issue. But it seems to be a problem of Yii itself, because I reproduced this with text input. And second issue is duplicating of errors when using 'date' validator:

<div class="form-group has-error">
    <label class="control-label col-sm-3" for="delivery_date_from">Date</label>
    <div class="col-sm-9">
        <div class="input-group input-daterange">
            <div class="datepicker-range form-control field-delivery_date_from has-error">
                <input type="text" id="delivery_date_from" class="form-control form-control datepicker-from" name="delivery_date_from" value="2014-05-07">
                <div class="help-block">Error text</div>
            </div>
            <span class="input-group-addon">&nbsp;→&nbsp;</span>
            <div class="datepicker-range form-control field-delivery_date_to has-error">
                <input type="text" id="delivery_date_to" class="form-control form-control datepicker-to" name="delivery_date_to" value="2014-05-08">
                <div class="help-block">Error text</div>
            </div>
        </div>
        <div class="help-block">Error text</div>
    </div>
</div>

When I use only 'required' rule for this attributes, onSubmit validation works and there is no error text in last help-block (also first div in above code doesn't have 'has-error' - only datepicker-range divs do). But if I turn off 'validateOnSubmit', the problem will reproduce. So, with JS validation there is no issue, but with back-end validation you will get error duplicating.

[tonydspaniard]

the onSubmit validation 'date' doesn't work

I've found that issue my self too. It is an issue with Yii itself. I see the template still renders, can you try the following?

$form->field($searchModel, 'delivery_date_from', ['template' => '{input}'])->widget(
    DateRangePicker::className(), [
        'attributeTo' => 'delivery_date_to',
        'form' => $form,
]);

edit: @RomeroMsk I've just realized that yii.validation.js has no date validator for client. It should be tested on server.

[RomeroMsk]

There is much convinient way for this :)

$form->field($searchModel, 'delivery_date_from')->error(false)->widget(...)

Both works fine to turn form-group error off.

So if I want to show only form-group error, I must not set 'form' parameter of widget. But if I want to show widget errors and not form-group, I need to use ->error(false) on field.

[tonydspaniard]

Great finding... I should update the README. Thanks @RomeroMsk !

[RomeroMsk]

Thank you for participate!

[RomeroMsk]

Damn it! When 'form' is not set, error will not render for second input. Validation fails, but no visualisation. It seems that configurating template for inputs (or disabling errors like ->error(false) as on field) will be the best solution :) Another problem which can be solved with this - width of 'datepicker-range form-control' changes when error text is long:

[tonydspaniard]

It shouldn't... check how you setup your css. You just need to change the input-date-range class to suit your needs.

[RomeroMsk]

Unfortunately, I don't know how to do that in my situation :(

[tonydspaniard]

@RomeroMsk is as simple as to put this on your css:

.datepicker-from, .datepicker-to {
width: 124px; /* for example */
}

[RomeroMsk]

I don't want to set fixed width of inputs. I've set 100% width for input-daterange, so its width depends on parent. Also it is not he only problem with help-blocks styling... So I decided to use only one error div (which is generating by field() itself). But in this case errors from second input doesn't show. For now I've solved this problem by changing your run() method:

        if ($this->hasModel() && $this->model->hasErrors($this->attributeTo)) {
            $this->model->addError($this->attribute, $this->model->getFirstError($this->attributeTo));
        }

(I've put this before 101 line of DateRangePicker.php) Will see, if it will be enough...

[tonydspaniard]

Closing this issue...