Base solution for your next web application
Ends in:
01 DAYS
01 HRS
01 MIN
01 SEC
Open Closed

Datepicker component implementation #2504


User avatar
0
cangunaydin created

I have tried to implement the datepicker component to my project. I have tried to import the module in this link. <a class="postlink" href="https://valor-software.com/ng2-bootstrap/#/datepicker">https://valor-software.com/ng2-bootstrap/#/datepicker</a> I think this module is already in the project. I have tried to declare it like daterangepicker in app-common-module.ts

import * as ngCommon from '@angular/common';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ModalModule } from 'ng2-bootstrap';

import { UtilsModule } from '@shared/utils/utils.module';
import { AbpModule } from '@abp/abp.module';
import { CommonModule } from '@shared/common/common.module';

import { TimeZoneComboComponent } from './timing/timezone-combo.component';
import { AppAuthService } from './auth/app-auth.service';
import { JqPluginDirective } from './libs/jq-plugin.directive';
import { CommonLookupModalComponent } from './lookup/common-lookup-modal.component';
import { DateRangePickerComponent } from './timing/date-range-picker.component';
import { DatepickerModule } from 'ng2-bootstrap/datepicker';
import { AppRouteGuard } from './auth/auth-route-guard';

@NgModule({
    imports: [
        DatepickerModule.forRoot(),
        ngCommon.CommonModule,
        FormsModule,
        ModalModule.forRoot(),
        UtilsModule,
        AbpModule,
        CommonModule
    ],
    declarations: [
        TimeZoneComboComponent,
        JqPluginDirective,
        CommonLookupModalComponent,
        DateRangePickerComponent
    ],
    exports: [
        TimeZoneComboComponent,
        JqPluginDirective,
        CommonLookupModalComponent,
        DateRangePickerComponent
    ]
})
export class AppCommonModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: AppCommonModule,
            providers: [
                AppAuthService,
                AppRouteGuard
            ]
        }
    }
}

But it seems sth. is wrong with the implementation. What will be the best way to implement the datepicker component?


2 Answer(s)
  • User Avatar
    0
    cangunaydin created

    Nevermind, I need to export the DatePickerComponent which i forgot at first place.

    working code.

    import * as ngCommon from '@angular/common';
    import { NgModule, ModuleWithProviders } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { ModalModule } from 'ng2-bootstrap';
    
    import { UtilsModule } from '@shared/utils/utils.module';
    import { AbpModule } from '@abp/abp.module';
    import { CommonModule } from '@shared/common/common.module';
    
    import { TimeZoneComboComponent } from './timing/timezone-combo.component';
    import { AppAuthService } from './auth/app-auth.service';
    import { JqPluginDirective } from './libs/jq-plugin.directive';
    import { CommonLookupModalComponent } from './lookup/common-lookup-modal.component';
    import { DateRangePickerComponent } from './timing/date-range-picker.component';
    import { DatepickerModule,DatePickerComponent } from 'ng2-bootstrap/datepicker';
    import { AppRouteGuard } from './auth/auth-route-guard';
    
    @NgModule({
        imports: [
            ngCommon.CommonModule,
            FormsModule,
            ModalModule.forRoot(),
            UtilsModule,
            AbpModule,
            CommonModule,
            DatepickerModule.forRoot()
        ],
        declarations: [
            TimeZoneComboComponent,
            JqPluginDirective,
            CommonLookupModalComponent,
            DateRangePickerComponent
        ],
        exports: [
            TimeZoneComboComponent,
            JqPluginDirective,
            CommonLookupModalComponent,
            DateRangePickerComponent,
            DatePickerComponent
        ]
    })
    export class AppCommonModule {
        static forRoot(): ModuleWithProviders {
            return {
                ngModule: AppCommonModule,
                providers: [
                    AppAuthService,
                    AppRouteGuard
                ]
            }
        }
    }
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Thanks for the info.