merged latest

Author: mmanneva

README.md

@@ -1,10 +1,18 @@
-# ng2-datetime-picker
+# Angular(2+) Datetime Picker
 
-[![Build Status](https://travis-ci.org/ng2-ui/ng2-datetime-picker.svg?branch=master)](https://travis-ci.org/ng2-ui/ng2-datetime-picker)
-[![Join the chat at https://gitter.im/ng2-ui/ng2-datetime-picker](https://badges.gitter.im/ng2-ui/ng2-datetime-picker.svg)](https://gitter.im/ng2-ui/ng2-datetime-picker?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+## IMPORTANT NOTICE
+
+After 0.16.0 or higher, `ng2-datetime-picker` has been changed to `@ngui/datetime-picker`. Here are the changes;
+
+* Module `ng2-datetime-picker` has been changed to `@ngui/datetime-picker`.
+* Direvtive `ng2-datetime-picker` is moved to `ngui-datetime-picker`.
+* Class name `Ng2Datetime` is moved to `NguiDatetime`.
+
+[![Build Status](https://travis-ci.org/ng2-ui/datetime-picker.svg?branch=master)](https://travis-ci.org/ng2-ui/datetime-picker)
+[![Join the chat at https://gitter.im/ng2-ui/datetime-picker](https://badges.gitter.im/ng2-ui/datetime-picker.svg)](https://gitter.im/ng2-ui/datetime-picker?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 AngularJS 2 DateTime Picker
 
-<a href="https://rawgit.com/ng2-ui/ng2-datetime-picker/master/app/index.html">
+<a href="https://rawgit.com/ng2-ui/datetime-picker/master/app/index.html">
   <img src="http://i.imgur.com/g5qbBBz.png" width="50%" style="border:1px solid grey" />
 </a>
 
@@ -22,25 +30,25 @@ AngularJS 2 DateTime Picker
 
 ## Install
 
-1. install ng2-datetime-picker
+1. install datetime-picker
 
-        $ npm install ng2-datetime-picker --save
+        $ npm install @ngui/datetime-picker --save
 
-2. add `map` and `packages` to your `systemjs.config.js`
+2. If you are using SystemJS, add `map` and `packages` to your `systemjs.config.js`
 
-        map[‘ng2-datetime-picker'] = 'node_modules/ng2-datetime-picker/dist';
-        packages[‘ng2-datetime-picker'] = { main: 'ng2-datetime-picker.umd.js', defaultExtension: 'js’ }
+        map[‘@ngui/datetime-picker'] = 'node_modules/@ngui/datetime-picker/dist';
+        packages[‘@ngui/datetime-picker'] = { main: '@ngui/datetime-picker.umd.js', defaultExtension: 'js’ }
 
-3. import Ng2DatetimePickerModule to your AppModule
+3. import NguiDatetimePickerModule to your AppModule
 
         import { NgModule } from '@angular/core';
         import { FormsModule } from "@angular/forms";
         import { BrowserModule  } from '@angular/platform-browser';
         import { AppComponent } from './app.component';
-        import { Ng2DatetimePickerModule } from 'ng2-datetime-picker';
+        import { NguiDatetimePickerModule } from '@ngui/datetime-picker';
 
         @NgModule({
-          imports: [BrowserModule, FormsModule, Ng2DatetimePickerModule],
+          imports: [BrowserModule, FormsModule, NguiDatetimePickerModule],
           declarations: [AppComponent],
           bootstrap: [ AppComponent ]
         })
@@ -51,20 +59,20 @@ AngularJS 2 DateTime Picker
 
        <input
           [(ngModel)]="myDate"
-          ng2-datetime-picker
+          ngui-datetime-picker
           date-only="true" />
 
        <form [formGroup]="myForm">
          <input
            required
            [(ngModel)]='myVar'
            formControlName="date"
-           ng2-datetime-picker
+           ngui-datetime-picker
             date-only="true"/>
        </form>
 
        <input
-          [(ngModel)]="date2" ng2-datetime-picker
+          [(ngModel)]="date2" ngui-datetime-picker
           date-format="DD-MM-YYYY hh:mm"
           year="2014"
           month="12"
@@ -80,12 +88,12 @@ For full example, please check `test` directory to see the example of;
 
 ## Override default style
 
-The default style is written in `src/ng2-datetime-picker.component.ts`.
+The default style is written in `src/ngui-datetime-picker.component.ts`.
 This can be overwritten by giving a more detailed css selector.
 
 e.g.,
 
-    #my-div .ng2-datetime-picker {
+    #my-div .ngui-datetime-picker {
       background-color: blue;
     }
 
@@ -102,34 +110,34 @@ you can use both date-format and parse-format:
 
     <input
           [(ngModel)]="date"
-          ng2-datetime-picker
+          ngui-datetime-picker
           date-format="MM/DD/YYYY HH:mm"
           parse-format="YYYY-MM-DD HH:mm:ss" />
 
 If you want to have your own date format without using momentjs,
-please override `Ng2DateTime.parser` and `Ng2DateTime.formatDate` function.
+please override `NguiDateTime.parser` and `NguiDateTime.formatDate` function.
 For example,
 
-    import { Ng2DatetimePickerModule, Ng2Datetime } from 'ng2-datetime-picker';
+    import { NguiDatetimePickerModule, NguiDatetime } from '@ngui/datetime-picker';
 
     // Override Date object formatter
-    Ng2Datetime.formatDate = (date: Date) : string => {
+    NguiDatetime.formatDate = (date: Date) : string => {
         ..... my own function that returns a string ....
     };
 
     // Override Date object parser
-    Ng2Datetime.parseDate = (str: any): Date => {
+    NguiDatetime.parseDate = (str: any): Date => {
         .... my own function that returns a date ...
     } ;
 
     @NgModule({
-      imports: [BrowserModule, FormsModule, Ng2DatetimePickerModule],
+      imports: [BrowserModule, FormsModule, NguiDatetimePickerModule],
       declarations: [AppComponent],
       bootstrap: [ AppComponent ]
     })
     export class AppModule { }
 
-In addition, you can override other static variables of `Ng2Datetime` class. The following
+In addition, you can override other static variables of `NguiDatetime` class. The following
 is the list of variables that you can override.
 
   * **days**:            default: 1,2,....31           
@@ -166,7 +174,7 @@ please send me email to `allenhwkim AT gmail.com` with your github id.
 
   * **date-only**,  true or false, default is false
   * **time-only**, true or false, default is false
-  * **close-on-select**, true or false. indicates to close ng2-datetime-picker when select a date. default: true
+  * **close-on-select**, true or false. indicates to close ngui-datetime-picker when select a date. default: true
   * **date-format**,  momentjs date format, e.g. YYYY-MM-DD hh:mm:ss.
     You need to include `moment` js in your html to use date-format.
     `<script src="moment.min.js"></script>`
@@ -180,6 +188,7 @@ please send me email to `allenhwkim AT gmail.com` with your github id.
   * **min-hour** number, mininum selectable hour
   * **max-hour** number, maximum selectable hour
   * **disabled-dates**  Array of Date, dates not selectable
+  * **show-week-numbers**  trueor false, default false. Show week numbers
 
 ## Outputs of directive
 
@@ -196,8 +205,8 @@ please send me email to `allenhwkim AT gmail.com` with your github id.
 
 ### To start
 
-    $ git clone https://github.com/ng2-ui/ng2-datetime-picker.git
-    $ cd ng2-datetime-picker
+    $ git clone https://github.com/ng2-ui/datetime-picker.git
+    $ cd datetime-picker
     $ npm install
     $ npm start
 

app/app.component.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 
 //noinspection TypeScriptCheckImport
-import { Ng2Datetime } from 'ng2-datetime-picker';
-Ng2Datetime.firstDayOfWeek = 0; //e.g. 1, or 6
+import { NguiDatetime } from '@ngui/datetime-picker';
+NguiDatetime.firstDayOfWeek = 0; //e.g. 1, or 6
 
 @Component({
   selector: 'my-app',

app/build/app.js

@@ -5,12 +5,12 @@ declare var moment: any;
 moment['locale']('en-ca'); //e.g. fr-ca
 
 //noinspection TypeScriptCheckImport
-import { Ng2Datetime } from 'ng2-datetime-picker';
+import { NguiDatetime } from '@ngui/datetime-picker';
 
 var templateStr = `
     <fieldset><legend><h2>Attributes and Events</h2></legend>
-      <ng2-utils-1>
-        <ng2-datetime-picker
+      <ngui-utils-1>
+        <ngui-datetime-picker
           *ngIf="show !== false"
           date-format="DD-MM-YYYY hh:mm"
           [date-only]="false"
@@ -21,14 +21,15 @@ var templateStr = `
           [max-date]="maxDate"
           [min-hour]="9"
           [max-hour]="17"
+          [show-am-pm]="true"
           [show-close-button]="true"
           [disabled-dates]="disabledDates"
           (closing$)="show = false"
           (selected$)="selectedDate = $event">
-        </ng2-datetime-picker>
+        </ngui-datetime-picker>
         <br/> selected DateTime : {{ selectedDate || defaultValue }}
-      </ng2-utils-1>
-      <pre>{{templateStr | htmlCode:'ng2-utils-1'}}</pre>
+      </ngui-utils-1>
+      <pre>{{templateStr | htmlCode:'ngui-utils-1'}}</pre>
     </fieldset>
 `;
 

app/build/app.js.map

@@ -2,7 +2,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { Validators, FormGroup, FormArray, FormBuilder } from '@angular/forms';
 
 //noinspection TypeScriptCheckImport
-import { Ng2Datetime } from 'ng2-datetime-picker';
+import { NguiDatetime } from '@ngui/datetime-picker';
 
 declare var moment: any;
 moment['locale']('en-ca'); //e.g. fr-ca
@@ -12,53 +12,55 @@ var templateStr = `
     <h1>Ng2 DateTime Picker Test</h1>
     
     <fieldset id="test2"><legend><h2>min date, max date, disabled dates</h2></legend>
-      <ng2-utils-2>
+      <ngui-utils-2>
         <input
           [(ngModel)]="date2" 
-          ng2-datetime-picker
+          ngui-datetime-picker
           [disabled-dates]="date2DisabledDates"
           [min-date]="date2MinDate"
           [max-date]="date2MaxDate"
           [show-close-layer]="true"
+          [show-week-numbers]="true"
+          [is-draggable]="false"
           date-only="true"/>
         date2: {{date2}}
         <button id="set-date" (click)="date2 = date2New">Set 2017-12-31</button>
-      </ng2-utils-2>
-      <pre>{{templateStr | htmlCode:'ng2-utils-2'}}</pre>
+      </ngui-utils-2>
+      <pre>{{templateStr | htmlCode:'ngui-utils-2'}}</pre>
     </fieldset>
      
     <fieldset id="test3"><legend><h2>time only</h2></legend>
-      <ng2-utils-4>
+      <ngui-utils-4>
         <input [(ngModel)]="date3"
-          ng2-datetime-picker 
+          ngui-datetime-picker 
           date-format="DD-MM-YYYY hh:mm"
           time-only="true"
           minute-step="5"
           (popupClosed)="onDatetimePickerClosed()"
           [close-on-select]="false" />
-      </ng2-utils-4>
-      <pre>{{templateStr | htmlCode:'ng2-utils-4'}}</pre>
+      </ngui-utils-4>
+      <pre>{{templateStr | htmlCode:'ngui-utils-4'}}</pre>
     </fieldset>
    
     <fieldset id="test4"><legend><h2>with timezone</h2></legend>
-      <ng2-utils-6>
+      <ngui-utils-6>
         <input 
           [(ngModel)]="date4" 
-          ng2-datetime-picker
+          ngui-datetime-picker
           [date-format]="date4TimezoneFormat" />
           dateWithTimezone: {{dateWithTimezone}}
         <br/>
-      </ng2-utils-6>
-      <pre>{{templateStr | htmlCode:'ng2-utils-6'}}</pre>
+      </ngui-utils-6>
+      <pre>{{templateStr | htmlCode:'ngui-utils-6'}}</pre>
     </fieldset>
    
     <fieldset id="test5"><legend><h2>Reactive form</h2></legend>
-      <ng2-utils-3>
+      <ngui-utils-3>
         <form [formGroup]="myForm">
             <input 
               required
               formControlName="date" 
-              ng2-datetime-picker
+              ngui-datetime-picker
               [close-on-select]="false"/>
         </form>
         myForm.controls.date.value: {{myForm.controls.date.value}}
@@ -78,22 +80,22 @@ var templateStr = `
           (click)="myForm.controls.date.patchValue('2015-12-31')">
           2015-12-31
         </a>
-      </ng2-utils-3>
-      <pre>{{templateStr | htmlCode:'ng2-utils-3'}}</pre>
+      </ngui-utils-3>
+      <pre>{{templateStr | htmlCode:'ngui-utils-3'}}</pre>
     </fieldset>
 
     <fieldset id="test6">
       <legend><h2>Material Design</h2></legend>
-      <ng2-utils-4>
+      <ngui-utils-4>
         <md-input-container>
           <input mdInput 
             [(ngModel)]="mdDate"
             name="mdDate"
-            ng2-datetime-picker
+            ngui-datetime-picker
             date-only="true" 
             [close-on-select]="false" />
         </md-input-container>
-      </ng2-utils-4>
+      </ngui-utils-4>
     </fieldset>
 
   </div>
@@ -104,7 +106,7 @@ var templateStr = `
   template: templateStr,
   encapsulation: ViewEncapsulation.None,
   styles: [`
-    ng2-utils-1 .ng2-datetime-picker-wrapper { display: inline-block }
+    ngui-utils-1 .ngui-datetime-picker-wrapper { display: inline-block }
     div { font-family: Courier; font-size: 13px}
     input { min-width: 200px; font-size: 15px; }
     input.ng-dirty { background: #ddd; }
@@ -125,8 +127,8 @@ export class DirectiveTestComponent {
   date3 = new Date("Thu Jan 01 2015 00:00:00 GMT-0500 (EST)");
 
   date4TimezoneFormat = 'DD/MM/YYYY HH:mm Z';
-  date4: string = Ng2Datetime.formatDate(
-    Ng2Datetime.parseDate('2017-01-15T14:22:00-06:00', this.date4TimezoneFormat), this.date4TimezoneFormat
+  date4: string = NguiDatetime.formatDate(
+    NguiDatetime.parseDate('2017-01-15T14:22:00-06:00', this.date4TimezoneFormat), this.date4TimezoneFormat
   );
 
   mdDate: Date = new Date(2017, 0, 28);

app/component-test.component.ts

@@ -16,8 +16,8 @@ import { MaterialModule } from '@angular/material';
 import { AppComponent }   from './app.component';
 
 //noinspection TypeScriptCheckImport
-import { Ng2DatetimePickerModule, Ng2Datetime } from 'ng2-datetime-picker';
-import { Ng2UtilsModule } from 'ng2-utils';
+import { NguiDatetimePickerModule, NguiDatetime } from '@ngui/datetime-picker';
+import { NguiUtilsModule } from '@ngui/utils';
 
 import { APP_ROUTER_PROVIDERS, APP_ROUTER_COMPONENTS } from './app.route';
 
@@ -27,8 +27,8 @@ import { APP_ROUTER_PROVIDERS, APP_ROUTER_COMPONENTS } from './app.route';
     APP_ROUTER_PROVIDERS,
     FormsModule,
     ReactiveFormsModule,
-    Ng2UtilsModule, 
-    Ng2DatetimePickerModule,
+    NguiUtilsModule, 
+    NguiDatetimePickerModule,
     MaterialModule
   ],
   declarations: [AppComponent, APP_ROUTER_COMPONENTS],

app/directive-test.component.ts

@@ -4,7 +4,7 @@ const config = {
   resolve: {
     extensions: ['', '.ts', '.webpack.js', '.web.js', '.js'],
     alias: {
-      'ng2-datetime-picker': '../src/index.ts'
+      '@ngui/datetime-picker': '../src/index.ts'
     }
   },
   devtool: 'source-map',