ng-pick-datetime-fork
Advanced tools
Readme
Angular date time picker - Angular reusable UI component
This package now supports Angular 2 ang 4
*Source: https://github.com/DanielYKPan/date-time-picker
Simple Angular date time picker. Online demo is here. This picker is responsive design, so feel free to try it in your desktops, tablets and mobile devices. This picker uses MomentJS
To install this component, follow the procedure:
npm install ng-pick-datetime-fork --saveimport { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyTestApp } from './my-test-app';
import { DateTimePickerModule } from 'ng-pick-datetime';
@NgModule({
imports: [ BrowserModule, DateTimePickerModule ],
declarations: [ MyTestApp ],
bootstrap: [ MyTestApp ]
})
export class MyTestAppModule {}
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
// Other components are here...
'ng-pick-datetime': 'npm:ng-pick-datetime',
'moment': 'npm:moment',
},
packages: {
// Other components are here...
// the picker
'ng-pick-datetime': {
main: 'index.js',
defaultExtension: 'js'
},
// momentJS
'moment': {
main: 'moment.js',
defaultExtension: 'js'
},
}
});
})(this);
Use the following snippet inside your template. For example:
<input [ngModel]="momentValue | date: 'short'" [(dateTimePicker)]="momentValue" readonly />
Or:
<input [ngModel]="momentValue | date: 'short'" [dateTimePicker]="momentValue" (dateTimePickerChange)="setMoment($event)" readonly />
public setMoment(moment: any): any {
this.momentValue = moment;
// Do whatever you want to the return object 'moment'
}
[(dateTimePicker)]="momentValue". This is the two way binding feature from AngularJS.
Firstly, the local variable 'momentValue' would be bind to our 'dateTimePicker' directive Input and shows in the popup picker dialog.
Once you select your new moment value and confirm it, the local variable 'momentValue' would be updated. Or if you want to deal
with the return new moment value from our directive before update the local variable, your can separate it like this [dateTimePicker]="momentValue" (dateTimePickerChange)="setMoment($event)"[ngModel]="momentValue" from Angular built-in FormsModule to bind the moment value to the input value.[ngModel]="momentValue | date: 'short' ", we use the date pipe from Angular built-in Pipes to transform the Javascript Date Object to more friendly formats.
We only use this built-in date pipe when we set the 'dateTimePicker' return object as Javascript Date Object.Online demo is here
FAQs
Angular 2-4 Date Time Picker
The npm package ng-pick-datetime-fork receives a total of 1 weekly downloads. As such, ng-pick-datetime-fork popularity was classified as not popular.
We found that ng-pick-datetime-fork demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.