Support forum for ASP.NET Zero (https://aspnetzero.com/).
By Jonas452
#16379 Hi,

I'm quite the novice regarding angular and typescript so i am sorry for asking such a basic and easy question.
However i can't seem to figure this one out.

In a plane modal i want to use the metronic ui datepicker.
i've copied this from the metronic example page to my modal.
Code: Select all<div class="input-group date" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>

however it remains a basic text field.

what am i forgetting? Can you point me in the right direction?
Thx.

this is my create-employee-modal.component.ts class and html page
Code: Select allimport { Component, Injector, OnInit } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { PersonServiceProxy, EmployeeDto, ListResultDtoOfEmployeeDto } from '@shared/service-proxies/service-proxies';

@Component({
    templateUrl: './employeepanel.component.html',
    animations: [appModuleAnimation()]
})
export class EmployeePanelComponent extends AppComponentBase implements OnInit {

    employees: EmployeeDto[] = [];
    filter: string = '';

    constructor(
        injector: Injector,       
        private _personService: PersonServiceProxy
    ) {
        super(injector);
    }

        ngOnInit(): void {
        this.getEmployee();
    }

    getEmployee(): void {
        this._personService.getEmployees(this.filter).subscribe((result) => {
            this.employees = result.items;
        });
    }

}


Code: Select all<div bsModal #modal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog">
        <div class="modal-content">
            <form *ngIf="active" #employeeForm="ngForm" novalidate (ngSubmit)="save()">
                <div class="modal-header">
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
                        <span>{{l("CreateNewEmployee")}}</span>
                    </h4>
                </div>
                <div class="modal-body">
                   
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input #nameInput class="form-control" type="text" name="name" [(ngModel)]="employee.name" required maxlength="32">
                        <label>{{l("Name")}}</label>
                    </div>

                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input class="form-control" type="text" name="firstName" [(ngModel)]="employee.firstName" required maxlength="32">
                        <label>{{l("Surname")}}</label>
                    </div>                   

                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input class="form-control" type="email" name="email" [(ngModel)]="employee.email" required maxlength="255" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$">
                        <label>{{l("EmailAddress")}}</label>
                    </div>

                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input class="form-control" type="text" name="phoneNr" [(ngModel)]="employee.phoneNr" >
                        <label>{{l("PhoneNr")}}</label>
                    </div>

<div class="input-group date" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">                       
                        <input class="form-control"
                                type="date" name="dateOfBirth" [(ngModel)]="employee.dateOfBirth" >
                        <!--<label>{{l("DateOfBirth")}}</label>-->
                    </div>                                       

                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">{{l("Cancel")}}</button>
                    <button type="submit" class="btn btn-primary blue" [disabled]="!employeeForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i>
                    <span>{{l("Save")}}</span></button>
                </div>
            </form>
        </div>
    </div>
</div>
By Jonas452
#16444 i'm assuming i still have to add some js lib and perhaps some css file. Only i don't know where the right place is to add those.
the angular 2 project structure is somewhat a mysterie to me :o
By ismcagdas
#16501 Hi,

In angular2 application, you need to convert your input to datetime picker by jquery in the show method of your modal.
It will be basically something like this:

Code: Select all@ViewChild('dateInput') dateInput: ElementRef;

show(....): void {
    $(this.dateInput.nativeElement).datetimepicker({});
}


and change your date input to
Code: Select all <input type="text" #dateInput class="form-control">


Also you might need to add datetimepicker js and css file sto .angular-cli.json file.

Before writing above code, you can run your app, open your modal and try to convert your input to datetimepicker using
Code: Select all[code]$('#idOfYourDateField').datetimepicker({});[/code]

and see if it works.