Set date picker to be readonly

Topic: Set date picker to be readonly

et3rnal87 pro asked 5 years ago

Expected behavior

I expect mdb components to be able to take html default attributes

Actual behavior

I can't set the date picker input to be readonly

Resources (screenshots, code snippets etc.)

The reason I need readonly to be true so that I prevent the keyboard from showing in mobile devices if you have a better fix for that I'm interested.

Or do you provide a directive style implementation!?

In an unrelated matter: This "Ask Question" form doesn't work well in Firefox (no MDB version drop-down, tags doesn't clear after selecting, validation doesn't work and more, reload the page and all will work!)

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

<p>Try to set <code>editableDateField: false</code> in your <code>DatePickerOptions</code>: <a href="https://mdbootstrap.com/docs/angular/forms/date-picker/#a-options" target="_blank">https://mdbootstrap.com/docs/angular/forms/date-picker/#a-options</a></p>

<pre class="prettyprint"><code>  public myDatePickerOptions: IMyOptions = {
    // Your options
    editableDateField: false,
  };
</code></pre>

<p>This option specifies whether input field is editable or not (adds readonly attribute to the input field).</p>

<p>Thank you for reporting the problem about <strong>"Ask Question"</strong> form. We'll take a closer look at that. Could you provide me your firefox version?</p>

<p>Best Regards, Bartosz.</p>

Please insert min. 20 characters.

Dear @et3rnal87

Try to set editableDateField: false in your DatePickerOptions: https://mdbootstrap.com/docs/angular/forms/date-picker/#a-options

  public myDatePickerOptions: IMyOptions = {
    // Your options
    editableDateField: false,
  };

HTML

<mdb-date-picker
        name="mydate"
        [options]="myDatePickerOptions"
        [placeholder]="'Selected date'"
        [(ngModel)]="model"
        required
 ></mdb-date-picker>

This option specifies whether input field is editable or not (adds readonly attribute to the input field).

Thank you for reporting the problem about "Ask Question" form. We'll take a closer look at that. Could you provide me your firefox version?

Best Regards, Bartosz.

et3rnal87 pro commented 5 years ago

Thank you, I did go through the documentation but i was looking for read-only, maybe it is worth mentioning that in the docs :)

et3rnal87 pro commented 5 years ago

How can I do the same for TimePicker?

Arkadiusz Idzikowski staff commented 5 years ago

Timepicker doesn't have such option in the current version, but we will definitely add it in the future.

et3rnal87 pro commented 5 years ago

Please. Mainwhile, any workarounds ?

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=45903" target="_blank" rel="nofollow">@akrolis</a></p>

<p>Use <code>disabled</code> Input, which specifies the disabled state of date picker, like in example below:</p>

<mdb-checkbox
      [(ngModel)]="isChecked"
      (ngModelChange)="getCheckboxesValue()"
      name="templateChecked"
      >Disable</mdb-checkbox
    >
  </div>
</div>
</code></pre>

<p><strong>TS:</strong>
 // Your options</p>

<pre class="prettyprint"><code>  public myDatePickerOptions: IMyOptions = {
    // Your options
  };
  isChecked = false;

isDisabled: boolean;

datePickerForm: FormGroup;

ngOnInit() {
    const selectedDate = { date: { year: 2019, month: 5, day: 8 } };
    this.datePickerForm = new FormGroup({
      datePickerControl: new FormControl(selectedDate),
    });
  }

getCheckboxesValue() {
    if (this.isChecked) {
      this.isDisabled = true;
    }
    if (!this.isChecked) {
      this.isDisabled = false;
    }
  }
</code></pre>

<p>Hope it helps! Best Regards, Bartosz.</p>

Please insert min. 20 characters.

Dear @akrolis

Use disabled Input, which specifies the disabled state of date picker, like in example below:

<div class="container">
  <div class="row">
    <div class="md-6">
      <form [formGroup]="datePickerForm">
        <mdb-date-picker
          name="mydate"
          [options]="myDatePickerOptions"
          [placeholder]="'Selected date'"
          formControlName="datePickerControl"
          required
          [disabled]="isDisabled"
        ></mdb-date-picker>
      </form>
    </div>

    <mdb-checkbox
      [(ngModel)]="isChecked"
      (ngModelChange)="getCheckboxesValue()"
      name="templateChecked"
      >Disable</mdb-checkbox
    >
  </div>
</div>

TS: // Your options

  public myDatePickerOptions: IMyOptions = {
    // Your options
  };
  isChecked = false;

  isDisabled: boolean;

  datePickerForm: FormGroup;

  ngOnInit() {
    const selectedDate = { date: { year: 2019, month: 5, day: 8 } };
    this.datePickerForm = new FormGroup({
      datePickerControl: new FormControl(selectedDate),
    });
  }

  getCheckboxesValue() {
    if (this.isChecked) {
      this.isDisabled = true;
    }
    if (!this.isChecked) {
      this.isDisabled = false;
    }
  }

Hope it helps! Best Regards, Bartosz.

akrolis pro commented 5 years ago

Hi, @bartej

in my project, both the checkbox and the datepicker are inside a much larger form, so I can't use ngModel for the checkbox.

Still, with the code you provide as it is, I still get this warning in the Chrome console:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

It should be possible to disable the datepicker programatically to avoid this warning.

Please insert min. 15 characters.

Bartosz Termena staff commented 5 years ago

Dear @akrolis You are right, there is strange behavior after setting the formcontrol to disable - the datepicker still allows the first click to open the datepicker modal.

We will take a closer look at that, and try to resolve this problem as soon as possible.

Best Regards, Bartosz.

Add comment

akrolis pro answered 5 years ago

0 0 Best answer

<p>since I have the checkbox and datepicker in a reactive form, I can't use [disabled].</p>

<p>I tried to do it programatically but got some strange behaviour in the datepicker.</p>

<p>After setting the formcontrol to disable the datepicker still allows the first click to open the datepicker modal, so it's not actually disabled.</p>

<pre class="prettyprint"><code><form [formGroup]="testForm">
    <div class="row">
    <div class="col-md-6">
        <div class="row">
                <div class="col-md-3 mt-3">
                        <mdb-checkbox 
                        formControlName="expired" 
                        (change)="onChange($event)"
                        [inline]="true">
                            Expired
                        </mdb-checkbox>
                    </div>
                    <div class="col-md-3">
                        <mdb-date-picker 
                            name="expirationdate"
                            formControlName="expirationdate"
                            [options]="myDatePickerOptions" 
                            [placeholder]=""
                            [label]="'Expiration Date'"

>
                        </mdb-date-picker>
                    </div>
        </div>

</div>
</div>
 </form>
</code></pre>

<pre class="prettyprint"><code>ngOnInit() {
    this.testForm = new FormGroup({
        expired: new FormControl(false),
        expirationdate: new FormControl({value:'2019-10-23', disabled: true})
      });

};

onChange(change: MdbCheckboxChange){
    if(change.checked){
        this.testForm.controls.expirationdate.enable();
    } else {
        this.testForm.controls.expirationdate.disable();
    }

}
</code></pre>

Please insert min. 20 characters.

Hi,

since I have the checkbox and datepicker in a reactive form, I can't use [disabled].

I tried to do it programatically but got some strange behaviour in the datepicker.

After setting the formcontrol to disable the datepicker still allows the first click to open the datepicker modal, so it's not actually disabled.

My code:

html:

<form [formGroup]="testForm">
    <div class="row">
    <div class="col-md-6">
        <div class="row">
                <div class="col-md-3 mt-3">
                        <mdb-checkbox 
                        formControlName="expired" 
                        (change)="onChange($event)"
                        [inline]="true">
                            Expired
                        </mdb-checkbox>
                    </div>
                    <div class="col-md-3">
                        <mdb-date-picker 
                            name="expirationdate"
                            formControlName="expirationdate"
                            [options]="myDatePickerOptions" 
                            [placeholder]=""
                            [label]="'Expiration Date'"

                            >
                        </mdb-date-picker>
                    </div>
        </div>

    </div>
</div>
 </form>

ts:

ngOnInit() {
    this.testForm = new FormGroup({
        expired: new FormControl(false),
        expirationdate: new FormControl({value:'2019-10-23', disabled: true})
      });

};

onChange(change: MdbCheckboxChange){
    if(change.checked){
        this.testForm.controls.expirationdate.enable();
    } else {
        this.testForm.controls.expirationdate.disable();
    }

}

et3rnal87 pro commented 5 years ago

Try adding [disabled]="isDisabled" to <mdb-date-picker... and in .ts isDisabled:bool = false if(change.checked){ this.isDisabled = true; }

Bartosz Termena staff commented 5 years ago

@et3rnal87 Exactly! Thank you for helping others :)

Add comment

akrolis pro answered 5 years ago

0 0 Best answer

Hello,

is there a way to enable/disable the datepicker dinamically (i.e.: control it with a checkbox)?

Thanks in advance.

et3rnal87 pro commented 5 years ago

you can use [disabled]="true"

Bartosz Termena staff commented 5 years ago

Try to do exactly as @et3rnal87 says :)

Best, Bartosz.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 8.2.0
Device: PC
Browser: Chrome
OS: Win10
Provided sample code: Yes
Provided link: No

et3rnal87

Pro User 84Support score
10Questions 3Answers 0Snippets