https://github.com/adibro500/ngx-adibro-datetime-picker

https://github.com/adibro500/ngx-adibro-datetime-picker

Last synced: 18 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/adibro500/ngx-adibro-datetime-picker
• Owner: adibro500
• Created: 2018-07-10T14:56:11.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-20T06:44:29.000Z (over 6 years ago)
• Last Synced: 2024-12-08T22:55:28.182Z (about 1 month ago)
• Language: HTML
• Size: 450 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular-components - adibro500/ngx-adibro-datetime-picker

README

        
# ngx-adibro-datetime-picker for Angular 5+

This is an angular directive for date-time picker. This is built on top of jquery.

Note: This is a replacement to ngx-teslas-date-picker

# For demos please visit 

[demos](http://righteous-society.surge.sh/)

## Installation

```

npm install --save ngx-adibro-datetime-picker@latest

```

## Usage

### In angular-cli/angular.json add styles and scripts:

```

"styles": [

"../node_modules/ngx-adibro-datetime-picker/src/assets/jquery-ui.css",

"../node_modules/ngx-adibro-datetime-picker/src/assets/css/jquery-ui-timepicker-addon.css"

],

"scripts": [

"../node_modules/ngx-adibro-datetime-picker/src/assets/js/jquery.js",              

"../node_modules/ngx-adibro-datetime-picker/src/assets/jquery-ui.js",

"../node_modules/ngx-adibro-datetime-picker/src/assets/js/jquery-ui-timepicker-addon.js"

],

```

### Inside app.module file import the directive and module:

```

import {NgxAdibroDatetimePickerModule, NgxAdibroDatetimePickerDirective} from 'ngx-adibro-datetime-picker';

@NgModule({

  declarations: [

    ...

  ],

  imports: [

    ... ,

    NgxAdibroDatetimePickerModule,

    ... ,

  ],

  providers: [NgxAdibroDatetimePickerDirective],

  bootstrap: [...]

})

export class AppModule { }

```

### In your HTML file you can do:

```

```

### You can then access the value of the picker in your component file like so:

```

startDate:any = new Date();

onStartDateChange(date){

    this.startDate = date;

    this.startDate = new Date(this.startDate).toISOString();

  }

```

Have fun !!!