Looking for TimePicker Example in new version

Topic: Looking for TimePicker Example in new version

Mark Boyce free asked 2 years ago

I'm looking for a detailed example of how to use the Timpicker successfully.

The documentation here is not complete as it doesn't show the output of it working properly. The examples found here has what I'm looking for in the Basic Example. But there's no code sample for it. The new version works differently.

What I'm after is the following.

Show the timepicker when user clicks on the input field. Input field should not allow user to type manually.
Timepicker should bind to a value in the component and be validated.

What I can't figure out is if the value field in the component should be string or date. Can I bind a date and get a date as the response from the timepicker?

Please let me know the right way to use this component.

Mark Boyce free commented 2 years ago

Further investigation revealed that if I set a value to the formcontrol that is tied to the timepicker, even if it's valid (12:00AM), it throws an undefined error and the value is set to undefined. But when I pick the same time using timepicker, it seems to set the exact value to that formcontrol without any problems.

Mark Boyce free commented 2 years ago

Another thing I notice is that when the timepicker opens, it is triggering form submit automatically for some reason. I'm seeing actions from form submission happen when the modal window pops up.

I only have autoClose property set to true in the timepicker. Any idea what could be causing this?

Add comment

Mark Boyce free answered 2 years ago

0 0 Best answer

<p>I tried as you suggested. But it doesn't seem to work. Here's my code.</p>

<p></p>

<pre class="prettyprint"><code>selectedTime: "11:24AM"; 
timepickerControl = new FormControl("11:24AM");
</code></pre>

<p>And this is the output I'm getting.</p>

<p>And the console error is below.</p>

<pre class="prettyprint"><code>core.js:6006 ERROR TypeError: Cannot read property 'match' of undefined
at ng-uikit-pro-standard.js:25978
at SafeSubscriber.schedulerFn [as _next] (core.js:25653)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at EventEmitter_.next (Subject.js:39)
at EventEmitter_.emit (core.js:25622)
at MdbTimePickerDirective.set value [as value] (ng-uikit-pro-standard.js:26140)
at SafeSubscriber._next (ng-uikit-pro-standard.js:26153)
</code></pre>

Please insert min. 20 characters.

I tried as you suggested. But it doesn't seem to work. Here's my code.

HTML:

<div class="md-form">
<input
    mdbInput
    type="text"
    id="form1"
    class="form-control"
    [mdbTimePicker]="timepicker"
    (click)="timepicker.open()"
    [value]="selectedTime"
    [formControl]="timepickerControl"
/>
<label for="form1">Example label</label>
<mdb-timepicker #timepicker></mdb-timepicker>

TS:

selectedTime: "11:24AM"; 
timepickerControl = new FormControl("11:24AM");

And this is the output I'm getting.

enter image description here

And the console error is below.

core.js:6006 ERROR TypeError: Cannot read property 'match' of undefined
at ng-uikit-pro-standard.js:25978
at SafeSubscriber.schedulerFn [as _next] (core.js:25653)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at EventEmitter_.next (Subject.js:39)
at EventEmitter_.emit (core.js:25622)
at MdbTimePickerDirective.set value [as value] (ng-uikit-pro-standard.js:26140)
at SafeSubscriber._next (ng-uikit-pro-standard.js:26153)

Mark Boyce free commented 2 years ago

Also, I tried to create a snippet using your tool. But it doesn't show me how to add additional modules to the app module as I don't seem to have access to that. I wanted to add Form modules so I can use the form control. Is there some way I'm supposed to do that?

Arkadiusz Idzikowski staff commented 2 years ago

@Mark Boyce I think the problem is caused be the typo in selectedTime: "11:24AM";. It should be selectedTime = "11:24AM";.

Currently, it's not possible to edit module files in the snippets.

Mark Boyce free commented 2 years ago

Thank you. Fixing the typo solved the value binding. But the fix doesn't seem to work for dynamic properties. Wish I could demonstrate to you with a snippet. Can you send me an email to which I can send a sample project using my mdb pro license?

Arkadiusz Idzikowski staff commented 2 years ago

@Mark Boyce You can send it to a.idzikowski@mdbootstrap.com

Mark Boyce free commented 2 years ago

Did you get my invite as well as my email?

Arkadiusz Idzikowski staff commented 2 years ago

@Mark Boyce Yes, thank you. The sample code will be of great help in finding the cause of the problem.

I'm afraid there is no workaround for this problem and we will need to fix that in the component internal code. We will update the thread if we find any temporary solution.

Add comment

Arkadiusz Idzikowski staff answered 2 years ago

0 0 Best answer

<p>There seems to be a bug where the value of the input is not correctly updated on form control change.  The toggle button doesn't have <code>type="button</code> attribute, that's why it can incorrectly submit the form on click.</p>

<p>I prepared an example that you can use until these errors are fixed on our end. I added <code>[value]</code> to the timepicker input to resolve the problem with value init. I also added a custom toggle button and <code>(click)</code> method to the input, to toggle component on input click.</p>

<p>In this case, you should always use <code>string</code> as the input data.</p>

<pre class="prettyprint"><code><div class="md-form">
  <input
    mdbInput
    type="text"
    id="form1"
    class="form-control"
    [mdbTimePicker]="timepicker"
    (click)="timepicker.open()"
    [value]="value"
    [formControl]="timepickerControl"
  />
  <label for="form1">Example label</label>
  <button (click)="timepicker.open()" type="button" class="mdb-timepicker-toggle">
    <svg
      aria-hidden="true"
      focusable="false"
      data-prefix="fas"
      data-icon="clock"
      class="svg-inline--fa fa-clock fa-w-16"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
    >
      <path
        fill="currentColor"
        d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z"
      ></path>
    </svg>
  </button>
  <mdb-timepicker #timepicker></mdb-timepicker>
</div>
</code></pre>

<pre class="prettyprint"><code>  value = '11:24AM';
  timepickerControl = new FormControl('11:24AM');
</code></pre>

<p>styles.scss</p>

<pre class="prettyprint"><code>.mdb-timepicker-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent;
  background-color: transparent;

svg {
    height: 1em;
  }
}
</code></pre>

Please insert min. 20 characters.

There seems to be a bug where the value of the input is not correctly updated on form control change. The toggle button doesn't have type="button attribute, that's why it can incorrectly submit the form on click.

I prepared an example that you can use until these errors are fixed on our end. I added [value] to the timepicker input to resolve the problem with value init. I also added a custom toggle button and (click) method to the input, to toggle component on input click.

In this case, you should always use string as the input data.

HTML:

<div class="md-form">
  <input
    mdbInput
    type="text"
    id="form1"
    class="form-control"
    [mdbTimePicker]="timepicker"
    (click)="timepicker.open()"
    [value]="value"
    [formControl]="timepickerControl"
  />
  <label for="form1">Example label</label>
  <button (click)="timepicker.open()" type="button" class="mdb-timepicker-toggle">
    <svg
      aria-hidden="true"
      focusable="false"
      data-prefix="fas"
      data-icon="clock"
      class="svg-inline--fa fa-clock fa-w-16"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
    >
      <path
        fill="currentColor"
        d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z"
      ></path>
    </svg>
  </button>
  <mdb-timepicker #timepicker></mdb-timepicker>
</div>

TS:

  value = '11:24AM';
  timepickerControl = new FormControl('11:24AM');

styles.scss

.mdb-timepicker-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent;
  background-color: transparent;

  svg {
    height: 1em;
  }
}

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: Free
Premium support: No
Technology: MDB Angular
MDB Version: MDB4 11.1.0
Device: PC
Browser: Chrome
OS: Any
Provided sample code: No
Provided link: Yes

Mark Boyce

55Support score
3Questions 4Answers 1Snippets