https://github.com/adibro500/ngx-teslas-date-picker

https://github.com/adibro500/ngx-teslas-date-picker

Last synced: 25 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/adibro500/ngx-teslas-date-picker
• Owner: adibro500
• Created: 2018-07-08T09:29:57.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-09T17:41:07.000Z (over 6 years ago)
• Last Synced: 2024-11-08T17:53:10.535Z (3 months ago)
• Language: HTML
• Size: 695 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NgxTeslasDatePicker for Angular 4+

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

## Installation

```

npm install --save ngx-teslas-date-picker@latest

```

## Usage

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

```

"styles": [

"./node_modules/ngx-teslas-date-picker/src/assets/jquery-ui.css",

"./node_modules/ngx-teslas-date-picker/src/assets/css/jquery-ui-timepicker-addon.css"

],

"scripts": [

"./node_modules/ngx-teslas-date-picker/src/assets/js/jquery.js",              

"./node_modules/ngx-teslas-date-picker/src/assets/jquery-ui.js",

"./node_modules/ngx-teslas-date-picker/src/assets/js/jquery-ui-timepicker-addon.js"

],

```

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

```

import {DatetimeModule, NgxTeslaDatetimePickerDirective} from 'ngx-teslas-date-picker';

@NgModule({

  declarations: [

    ...

  ],

  imports: [

    ... ,

    DatetimeModule,

    ... ,

  ],

  providers: [NgxTeslaDatetimePickerDirective],

  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 !!!