Topic: Looking for TimePicker Example in new version
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.
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;
}
}
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.
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 commented 4 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 4 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 commented 4 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 4 years ago
@Mark Boyce You can send it to a.idzikowski@mdbootstrap.com
Mark Boyce commented 4 years ago
Did you get my invite as well as my email?
Arkadiusz Idzikowski staff commented 4 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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 commented 4 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 commented 4 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?