ng2-datepicker其他属性用法

时间:2018-07-04 08:55:32

标签: angular ng2-datepicker

有人可以帮助我使用ng2-datepicker的其他属性吗?

我尝试过:

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

我想在两个不同的地方以两种方式使用日期选择器的日历。

  1. 默认情况下必须打开日历,并且在选择日期时不应隐藏
  2. 其他情况则相反(ng2-datepicker的默认工作方式)

1 个答案:

答案 0 :(得分:1)

我使用https://github.com/bleenco/ng2-datepicker为您制作了一些组件。

安装此依赖行,

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

这是stackblitz中的一个来源。 stackblitz不支持sass属性。这就是为什么不显示输出的原因。您复制了ng-datepicker文件夹并经过了项目文件夹。

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

将此行添加到app.module.ts文件中,

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

imports: [   
    NgDatepickerModule,
],

app.html文件

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

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

在这两个标签之间使用一些br标签。因为打开了默认的第一个标签。因此它占用了一些空间并覆盖了第二个标签。

Working Perfect经过测试,这是一些屏幕截图, enter image description here

让我们尝试一次,让我知道。

编辑:-(请检查)

app.module.ts文件

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仅在此行添加了内容。