datetime-picker

by ng2-ui

Angular2 DateTime Picker

126 Stars 69 Forks Last release: Not found MIT License 324 Commits 60 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Angular(2+) Datetime Picker

Build Status Join the chat at https://gitter.im/ng2-ui/datetime-picker AngularJS 2 DateTime Picker

NOTE: NOT-MAINTAINED :(

This project has been archived because of inactivity of the owner, Allen Kim. The current owner is looking for a new owner and ready to transfer ownership. Please send me the email to "allenhwkim AT gmail.com" to claim the ownership.

Plunker Example
French Example

How Does It Work

  1. Get a Date or string from input field.
  2. If input value is string, convert it to Date object and save it internally.
  3. When the input field is clicked, show date time picker with date value.
  4. When date time is selected, set
    toString
    function of selected date for formatting.
  5. Set input field with the selected value.

Install

  1. install datetime-picker

    $ npm install @ngui/datetime-picker --save
    
  2. If you are using SystemJS, add

    map
    and
    packages
    to your
    systemjs.config.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 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 { NguiDatetimePickerModule } from '@ngui/datetime-picker';
    
    

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

Use it in your code

   

For full example, please check

test
directory to see the example of;
  • app.module.ts
  • and
    app.component.ts
    .

Override default style

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 .ngui-datetime-picker {
  background-color: blue;
}

Override built-in date parser and date formatter

The default date parser and formatter can only handle 'YYYY-MM-DD HH:MM' format if you are not using momentjs. If you use momentjs, you can use momentjs dateformat by adding the following in your html.


If you are using moment and want to pass in a string date value in one format but display it in a different format you can use both date-format and parse-format:


If you want to have your own date format without using momentjs, please override

NguiDateTime.parser
and
NguiDateTime.formatDate
function. For example,
import { NguiDatetimePickerModule, NguiDatetime } from '@ngui/datetime-picker';

// Override Date object formatter NguiDatetime.formatDate = (date: Date) : string => { ..... my own function that returns a string .... };

// Override Date object parser NguiDatetime.parseDate = (str: any): Date => { .... my own function that returns a date ... } ;

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

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
  • daysOfWeek: default: Sunday, Monday, .....
  • weekends: default: 0,6
  • firstDayOfWeek: default: 0 as in Sunday
  • months: default: January, February
  • formatDate: default: returns YYYY-MM-DD HH:MM
  • parseDate: default: returns date from YYYY-MM-DD HH:MM
  • locale: default: 'date', 'year', 'month', time', 'hour', 'minute'

ng2-ui welcomes new members and contributors

This module is only improved and maintained by contributors like you;

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. It’s required to be open-minded and interested in helping others. You can contribute to the following;

  • Updating README.md
  • Making more and clearer comments
  • Answering issues and building FAQ
  • Documentation
  • Translation

In result of your active contribution, you will be listed as a core contributor on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui, please send me email to

allenhwkim AT gmail.com
with your github id.

Attributes

All options are optional except value

  • 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 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.
    
    
  • parse-format, momentjs date format used to parse a string input value, e.g. YYYY-MM-DD hh:mm:ss. You need to include
    moment
    js in your html to use parse-format.
    
    
  • default-value a date selected when a popup opens, default the current date
  • minute-step the interval of minutes, default 1
  • min-date Date, mininum selectable date
  • max-date Date, maximum selectable date
  • 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

  • ngModelChange, triggered when the input value as changed (contains new input value)
  • valueChanged, triggered when a date modification is done (contains new date value)
  • popupClosed, triggered when the component is closed (contains a boolean true)

Outputs of component

  • selected$, triggered when a date modification is done (contains new date value)
  • closing$, triggered when the component is closed (contains a boolean true)

For Developers

To start

$ git clone https://github.com/ng2-ui/datetime-picker.git
$ cd datetime-picker
$ npm install
$ npm start

List of available npm tasks

  • npm run
    : List all available tasks
  • npm start
    : Run
    app
    directory for development using
    webpack-dev-server
    with port 9001
  • npm run clean
    : Remove dist folder
  • npm run clean:dist
    : Clean up unnecessary dist folder within dist and app directory
  • npm run lint
    : Lint TypeScript code
  • npm run build:ngc
    : build ES module
  • npm run build:umd
    : Build UMD module
    ng2-map.umd.js
  • npm run build:app
    : Build
    app/build/app.js
    for runnable examples
  • npm run build
    : Build all(build:ngc, build:umc, build:app, and clean:dist)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.