Datetimepicker image
Few days ago,I was searching for datetimepicker which gives simple UI and compatible with Angular2, Angular4. One of the main feature we required is that it should be configurable as per our requirement.
I tried three or four jquery and angular 2 library but it didn’t work for me so i should go with creating my own directive(wrapper over jquery datetimepicker).
Let’s get start how to configure jquery timepicker with angular. Here,i’m using angular cli for making directive so you will find steps corresponding to angular cli.
Now, include this all files in angular-cli.json.
Snippets of local angular-cli.json
2. First create one project with angular-cli. Now,i’m creating one shared/common module which can be used by accross all the module same as angular way.
Let’s say i’m creating SharedModule for the current reference. Here DatePicker is directive class name which i have created below.
shared.module.ts
3. Create one directive with name myDatepicker (you can give any name) and write the below code:
1import { Input, Output, EventEmitter, ViewChild, ElementRef, Directive, Renderer } from ‘@angular/core’;
2declare var jQuery: any;
3@Directive({
4selector: ‘[myDatepicker]’
5})
6
7export class DatePicker {
8@Input() value = ‘’;
9@Input() minimumDate: boolean = false;
10@Input() onlyDatePicker: boolean = false;
11@Output() dateChange = new EventEmitter();
12
13constructor(public el: ElementRef, public renderer: Renderer) { }
14ngOnInit() {
15if (this.onlyDatePicker === true) {
16 jQuery(this.el.nativeElement).datepicker({
17 controlType: ‘select’
18 ,oneLine: true,
19 minDate: this.minimumDate === false ? ‘’ : new Date(),
20 onSelect: (value) => {
21 this.value = value;
22 this.dateChange.next(value);
23 }
24 })
25 .datepicker(‘setDate’, this.value);
26}
27else {
28jQuery(this.el.nativeElement).datetimepicker({
29 controlType: ‘select’,
30 oneLine: true,
31 timeFormat: ‘hh:mm tt’,
32 minDate: this.minimumDate === false ? ‘’ : new Date(),
33 onSelect: (value) => {
34 this.value = value;
35 this.dateChange.next(value);
36 }
37 })
38.datepicker(‘setDate’, this.value);}}}
4. That’s it our directive is created now we will see how we can use this directive across all the component.
In other component’s module you have to just import SharedModule to use this directive. Here i’m creating AppModule for giving the example:
1@NgModule({
2 imports: [
3 SharedModule
4 ]
5})
6export class AppModule { }
5. Now create app.component.ts and app.component.html file(you can create component you would like to create).
In app.component.html we have to use this directive as a attribute. You will find the created directive name as attribute of input type in below image.
Usage of directive in html
Now, let’s you want to set a value in variable of corresponding component. For that we have use eventEmitter to emit the value from directive.
Here, i have used “(dateChange)=”onStartDateChange($event)” so whenever datetime is changed onStartDateChange() function is called and it sets the date in variable.
Below snippet is from app.component.ts file:
Set variable in component.ts
This is the way we can use datetimepicker in any component.
Let’s discuss the some of configurations which you can do with the this directive.
If you want to disable prior date from the today date then just write [minimumDate]=”true” along with directive.
If you want to just show datepicker then just write [onlyDatePicker]=”false” along with directive. This is already i shown in the above images.
Also, we can override the existing css to customize color of datetimepicker
We can see output of directive in below image:
Datetimepicker Directive output
Cheers:
Our directive has been created. You can also make more customizable this directive based on parameters. In this way we can write different wrappers or directive over the jquery and javascript.
Also, If you liked this post, kindly give me some claps and follow me for more posts like this one. Be sure to leave a comment if you have any thoughts or questions.
In this blog, we have seen how to create a configurable datetimepicker directive in Angular v.2,v.4 using jQuery and Angular CLI. This directive can be used to provide a simple and user-friendly UI for selecting dates and times. We have also learned how to create a shared module and import it in other modules to use the directive. I hope you found this blog useful and learned something new.
I hope you liked reading this blog post, please do checkout my other blogs written by me:
If you are looking for full-stack Angular development services, you can contact us. We have a team of experienced and skilled Angular developers who can deliver high-quality and scalable solutions for your business needs. Whether you need a simple website, a complex web app, or a hybrid mobile app we can help you achieve your goals.