How to make a date and time picker required? [Template-driven forms]

I have a date and time picker set up like this sample. I now want to make these required as well as disable the submit button when they are not filled in (I know how to do this). Default the fields will be blank. I tried with adding the “required” property onto the input field but that keeps marking the field as invalid. Is it possible to achieve this another way and if so how?

Hello Nina,

We recommend you use ngModel, instead of value, to bind the date and time picker templates' inputs. ngModel does not just give you two-way data binding, but also tells you if the user touched the control, if the value changed, or if the value became invalid. The code should be similar to the following:

Please, review this approach and let us know if you need further assistance on this matter.

https://stackblitz.com/edit/angular-o4xsa9

I tried your suggestion, but that didn't work, since displayData is passed down from the igxDatePickerTemplate, but we need to bind to the date property in the ts file. So I experimented a bit more and came to the above linked stackblitz demo. The only problem remaining is that the first time picking a date, the field remains marked as invalid. This leads me to believe either I am still doing something wrong, or this could be a bug. Can you have a look and help me? 

Hello Nina,

I reviewed our code and it seems we don't evaluate the igxInput value when it gets changed outside the input's 'input' event. This is why if one types in the date picker, the invalid style would be changed to valid, but when we change the value via the calendar, the invalid style remains. We will log this issue in github and it will be assigned to a developer in a future sprint to review my investigation and confirm my findings or to offer a fix, or other resolution. In the meantime, if using ngModel does not work for you, I can suggest you manually dispatch the input event of the input native element as follows:

@ViewChild(IgxInputDirective) datePickerInput: IgxInputDirective;
  submit() {
    this.datePickerInput.nativeElement.dispatchEvent(new Event('input'));
  }

 

Please, let us know if you need further assistance on the matter.

Thank you Galina, this workaround solves the issue for now. However I am still having trouble with the required state of the field. I have made a new demo to demonstrate the problem: https://datepickerdemo.stackblitz.io. As you can see as soon as you enter a name the save button becomes enabled, allowing you to bypass the date requirement. Is this another possible bug and would you know a workaround for it? 

Hello Nina,

If I understood correctly, you need to include the validation of the date & time pickers' values in the form validation but without binding them to the model. If that's the case I would recommend simply extending the submit button's disabled condition as shown in this sample (I used the first stackblitz sample you sent us, as the latest one seems to have some configuration error and I can't see it).

This has helped me a little but I'm still facing some issues. 

Here is the correct link for the current version of my problem: https://stackblitz.com/edit/datepickerdemo

What has been added is the requirement that the form is invalid and cannot be submitted if the endDate comes before the startDate. I wrote a directive for this and put it on endDatePicker (it doesn't fire when I put it on the endDate input field in the template). I can see the directive work because if we set startDate to today and endDate to some days ago, the submit button becomes disabled, and also there is some info being printed to the console. But the endDatePicker does not get any invalid styles. 

We were wondering if there has been any progress on this since it has been a few days since we've had a reply. Is the provided demo working and clearly showing the problem? 

Hello Nina,

Thank you for your patience. If you want to avoid using ngModel on the inner date input which is how controls get registered with the form so they get validated appropriately, I can recommend manually updating the valid value of the input as shown in this updated sample application.

Please, let us know if you need further assistance on the matter.

Hi Galina,

It seems I misunderstood some things about the ngModel. I'm now using this on the inner date inputs which solves a few problems and drops the need for some workarounds. In fact I think I now got it working correctly except for one thing: When the form loads the date fields are immediately marked as invalid. Is it possible to have them empty but without being already validated, like the required name field? Here is a new demo. 

Hello Nina,

We are glad most of the issues are resolved now and the workarounds are no longer needed.

This last issue you are experiencing is caused by the fact the inner input is bound to 'displayData' and not to 'value'. In general, this should be perfectly fine, but our internal logic currently changes the editor's displayData property value to an empty string even when no date value is set which triggers the validation. We logged this issue and it will be resolved in the component in our next version. Temporarily, you may tweak a little your code in 2 ways, so it does not surface in your application. The two options are:

– Change the binding from [(ngModel)]="displayData" to [(ngModel)]="displayData || startDate";

– Bind to a custom property which formats the date as per your requirements.

Both approaches I implemented in this updated sample.

Please, let us know if you need further assistance on the matter.