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.
By Jonas452
#16981 Okay, I got the datetimepicker working. No issue.
However. the datepicker is an issue.

<a href="https://ibb.co/ih00WQ"><img src="https://preview.ibb.co/b8UurQ/Klembord_afbeelding_2017_04_27_23_54_55.png" alt="Klembord_afbeelding_2017_04_27_23_54_55" border="0"></a><br /><a target='_blank' href='https://nl.imgbb.com/'>upload picture</a><br />

As you can see. the datepicker isn't showing. here is my angular-cli.json file
for clarity sake. everything linked to the datetimepicker has been removed.

Code: Select all{
  "project": {
    "version": "1.0.0-beta.30",
    "name": "abp-zero-template"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        {
          "glob": "abp.signalr.js",
          "input": "../node_modules/abp-web-resources/Abp/Framework/scripts/libs/",
          "output": "./assets/abp/"
        },
        {
          "glob": "**.*",
          "input": "../node_modules/jtable/lib/localization/",
          "output": "./assets/localization/jtable/"
        },
        {
          "glob": "**.*",
          "input": "../node_modules/bootstrap-select/dist/js/i18n/",
          "output": "./assets/localization/bootstrap-select/"
        },
        {
          "glob": "**.*",
          "input": "../node_modules/timeago/locales/",
          "output": "./assets/localization/jquery-timeago/"
        }
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "../node_modules/simple-line-icons/css/simple-line-icons.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/famfamfam-flags/dist/sprite/famfamfam-flags.css",

        "../node_modules/bootstrap-select/dist/css/bootstrap-select.css",
        "../node_modules/jquery.uniform/dist/css/default.css",
        "../node_modules/toastr/build/toastr.css",
        "../node_modules/sweetalert/dist/sweetalert.css",
        "../node_modules/jstree/dist/themes/default/style.min.css",
        "../node_modules/jtable/lib/themes/metro/blue/jtable.min.css",
        "../node_modules/morris.js/morris.css",

        "../external_libs/Jcrop/css/Jcrop.css",
        "../node_modules/bootstrap-daterangepicker/daterangepicker.css",
        "../node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css",                     

        "../src/app/shared/core.less",
        "../src/app/shared/layout/layout.less",

        "../src/assets/metronic/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.standalone.css", 

        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/jquery-migrate/dist/jquery-migrate.min.js",
        "../node_modules/jqueryui/jquery-ui.min.js",
        "../node_modules/js-cookie/src/js.cookie.js",
        "../node_modules/jstree/dist/jstree.min.js",

        "../node_modules/bootstrap/dist/js/bootstrap.js",
        "../node_modules/bootstrap-select/dist/js/bootstrap-select.js",
        "../node_modules/tether/dist/js/tether.min.js",

        "../node_modules/lodash/lodash.min.js",
        "../node_modules/moment/min/moment.min.js",

        "../node_modules/signalr/jquery.signalR.js",

        "../node_modules/jtable/lib/jquery.jtable.min.js",
        "../node_modules/jtable/lib/extensions/jquery.jtable.record-actions.js",
        "../external_libs/Jcrop/js/Jcrop.js",
        "../node_modules/morris.js/morris.min.js",
        "../node_modules/raphael/raphael.min.js",
        "../node_modules/jquery-sparkline/jquery.sparkline.min.js",

        "../node_modules/toastr/toastr.js",
        "../node_modules/sweetalert/dist/sweetalert-dev.js",
        "../node_modules/block-ui/jquery.blockUI.js",
        "../node_modules/spin.js/spin.min.js",
        "../node_modules/spin.js/jquery.spin.js",

        "../node_modules/bootstrap-daterangepicker/daterangepicker.js",
        "../node_modules/jquery-slimscroll/jquery.slimscroll.min.js",
        "../node_modules/timeago/jquery.timeago.js",
        "../node_modules/localforage/dist/localforage.min.js",
        "../node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js",
        "../node_modules/push.js/push.min.js",

        "../node_modules/abp-web-resources/Abp/Framework/scripts/abp.js",
        "../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js",
        "../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.toastr.js",
        "../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.blockUI.js",
        "../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.spin.js",
        "../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.sweet-alert.js",
        "../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.moment.js",

        "../src/assets/metronic/global/scripts/app.js",

        "../src/assets/metronic/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js",

        "../src/assets/metronic/admin/layout4/scripts/layout.js",
        "../src/assets/metronic/layouts/global/scripts/quick-sidebar.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "hmr": "environments/environment.hmr.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "files": "src/**/*.ts",
      "project": "src/tsconfig.json"
    },
    {
      "files": "e2e/**/*.ts",
      "project": "e2e/tsconfig.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}



I have tried every datepicker css. don't get why it doesnt show up correctly.

Thx for your help.
By Jonas452
#17039 Sure. Here you go. Thx
Code: Select allimport { Component, ViewChild, Injector, ElementRef, Output, EventEmitter } from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap';
import { PersonServiceProxy, EmployeeFullDto } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/common/app-component-base';

@Component({
    selector: 'createEmployeeModal',
    templateUrl: './create-Employee-modal.component.html'
})
export class CreateEmployeeModalComponent extends AppComponentBase {

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

    @ViewChild('modal') modal: ModalDirective;
    @ViewChild('nameInput') nameInput: ElementRef;
    @ViewChild('dateInput') dateInput: ElementRef;


    employee: EmployeeFullDto;

    active: boolean = false;
    saving: boolean = false;

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

    show(): void {
        this.active = true;
        this.employee = new EmployeeFullDto();       
        this.modal.show();
    }

    onShown(): void {
        $(this.dateInput.nativeElement).datepicker({});
        $(this.nameInput.nativeElement).focus();
    }

    save(): void {
        this.saving = true;
        this._personService.createEmployee(this.employee[0])
            .finally(() => this.saving = false)
            .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.close();
                this.modalSave.emit(this.employee);
            });
    }

    close(): void {
        this.modal.hide();
        this.active = false;
    }
}

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="form-group form-md-line-input form-md-floating-label no-hint">
                        <input #dateInput class="form-control" type="text" name="dateInput" [(ngModel)]="employee.dateOfBirth" >
                        <label>{{l("DateOfBirth")}}</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
#17128 Thx, email with a wetransfer link has been sent.
I've only recently started on the front end. So the angular project is almost exactly the same as the template project.
By ismcagdas
#17164 Hi,

Thank you for sharing project with us.
It seems like including css files is not working for your project.

I have followed below steps to use datepicker in your project.
You can use npm packages instead of metronic plugins, in that way you can also upgrade your packages easily.

1. install bootstrap-datepicker using this command
Code: Select allnpm i bootstrap-datepicker --save


2. Then, in your .angular-cli.json change paths to
for js:
Code: Select all"../node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"

for css:
Code: Select all"../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css"


3. Define typing in typings.d.ts by adding below statement
Code: Select allinterface JQuery {
  datepicker(...any): any;
}


4. In your modal component below code will convert your input to datepicker
Code: Select all$(this.dateInput.nativeElement).datepicker({
  startDate: '-3d'
});