ng2-datepicker additional attributes usage

Question

Can anyone help me in using additional attributes of ng2-datepicker?

I have tried:

<ng-datepicker [(ngModel)]="date" [options]="options" [isOpened]="true"></ng-datepicker>

I want to use the calendar of date picker in two ways in two different places.

Calendar has to be opened by default and should not hide on selection of date
vice-versa of the other(default working of ng2-datepicker)

Welcome to SO. I took the liberty to format your code so that it renders correctly. Can you please add some information on what does not work with your current approach? What do you expect to happened and what happens instead? Are there error messages? If so, please add them to the question. — m00am, Jul 04 '18 at 09:08
Look my answer here, it can help you out : https://stackoverflow.com/questions/51170663/always-showing-the-calendar-from-datepicker-angular — Jacopo Sciampi, Jul 04 '18 at 10:05
did you tried my answer.Once you tried let me know.Perfect working. — Karnan Muthukumar, Jul 04 '18 at 10:51
did you used same code what iam maked stackblitz?. please follow same steps — Karnan Muthukumar, Jul 05 '18 at 06:08

Karnan Muthukumar · Accepted Answer · 2018-07-05T06:19:19.983

1

I made some component for you using https://github.com/bleenco/ng2-datepicker this.

Install this depenencies lines,

date-fns

npm i date-fns

https://www.npmjs.com/package/date-fns

ngx-slimscroll

npm install ngx-slimscroll

https://www.npmjs.com/package/ngx-slimscroll

Here is an source in stackblitz. The sass property not supported in stackblitz. That's why output not displayed.You copy the ng-datepicker folder and past your project folder.

https://stackblitz.com/edit/angular-agvjhm

Add this line in app.module.ts file,

import { NgDatepickerModule } from '../app/ng-datepicker/module/ng-datepicker.module';

imports: [   
    NgDatepickerModule,
],

app.html file,

<ng-datepicker [(ngModel)]="date" [isOpened]="true">

<ng-datepicker-default [(ngModel)]="date">

use some br tag between this two tags. Because opened default first tag. So it's occupy some spaces and covered second tag.

Working Perfect tested, Here is some screenshot,

let try this once and let me know.

Edit:-(Please Check)

app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { NgDatepickerModule } from './ng-datepicker/module/ng-datepicker.module';

@NgModule({
  imports:      [ BrowserModule, FormsModule, NgDatepickerModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

ng-datepicker.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgSlimScrollModule } from 'ngx-slimscroll';
import { NgDatepickerModifiedComponent } from '../ng-datepicker-modified/ng-datepicker-modified';
import { NgDatepickerDefaultComponent } from '../ng-datepicker-default/ng-datepicker-default';

@NgModule({
  declarations: [ NgDatepickerModifiedComponent,NgDatepickerDefaultComponent ],
  imports: [ CommonModule, FormsModule, NgSlimScrollModule ],
  exports: [ NgDatepickerModifiedComponent,NgDatepickerDefaultComponent, CommonModule, FormsModule, NgSlimScrollModule ]
})
export class NgDatepickerModule { }

Iam added this lines only see.

edited Jul 05 '18 at 06:19

answered Jul 04 '18 at 10:18

Karnan Muthukumar

1,843
1
8
15

hi,thanks for your help..there is an error while using ng-datepicker-default. the code which i used is as follows:
– Monica Murugappan Jul 05 '18 at 05:57
and the error is: compiler.js:486 Uncaught Error: Template parse errors: 'ng-datepicker-default' is not a known element: 1. If 'ng-datepicker-default' is an Angular component, then verify that it is part of this module. 2. If 'ng-datepicker-default' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("atepicker> --> [ERROR ->] – Monica Murugappan Jul 05 '18 at 06:00
show your app.module.ts file. The error is occured during you have not imported this module – Karnan Muthukumar Jul 05 '18 at 06:04
please uninstall whay you installed before you don't need this. npm uninstall ng2-datepicker --save use this line – Karnan Muthukumar Jul 05 '18 at 06:06
import {NgDatepickerModule} from '../ng-datepicker/module/ng-datepicker.module'; imports: [ NgDatepickerModule, ], – Monica Murugappan Jul 05 '18 at 06:10
import { NgDatepickerModifiedComponent } from '../ng-datepicker-modified/ng-datepicker-modified'; import { NgDatepickerDefaultComponent } from '../ng-datepicker-default/ng-datepicker-default'; that module contain this lines? – Karnan Muthukumar Jul 05 '18 at 06:12
No that module doesnot have these lines – Monica Murugappan Jul 05 '18 at 06:17
that's the problem see my answer updated both modules – Karnan Muthukumar Jul 05 '18 at 06:19
how to add import { NgDatepickerModifiedComponent } from '../ng-datepicker-modified/ng-datepicker-modified'; import { NgDatepickerDefaultComponent } from '../ng-datepicker-default/ng-datepicker-default'; to ng-datepicker.module.ts – Monica Murugappan Jul 05 '18 at 06:57
please see my answer iam updated completely.It's easy to understand – Karnan Muthukumar Jul 05 '18 at 06:58
please copy and past all part of that module. – Karnan Muthukumar Jul 05 '18 at 07:00
I did copy and paste but its giving error message as follows: cannot find module '../ng-datepicker-default/ng-datepicker-default'. – Monica Murugappan Jul 05 '18 at 08:05
It's a path problem please give correct actual path of an your app – Karnan Muthukumar Jul 05 '18 at 08:15
is it not reqiured to have ng-datepicker-default in my app?should I install some npm packages for it? – Monica Murugappan Jul 05 '18 at 08:17
no i did without any installation. Give your project structure and error screenshot – Karnan Muthukumar Jul 05 '18 at 08:18
sorry i cant share screenshots as i am in secured network – Monica Murugappan Jul 05 '18 at 08:31
I do my lot of help for you. I provide stackblitz also follow that example. That's all i have to help you. – Karnan Muthukumar Jul 05 '18 at 08:38

ng2-datepicker additional attributes usage

1 Answers1