@acadomia/datepicker

Date and time pickers for Angular 2/4

Usage no npm install needed!

<script type="module">
  import acadomiaDatepicker from 'https://cdn.skypack.dev/@acadomia/datepicker';
</script>

README

Angular 2/4 Datetime Picker

Native Angular 2 date picker component styled by Twitter Bootstrap 3

The idea of this project is to create a custome component selecting and showing dates selected by the user. I've decided NOT to use html <input type="date|datetime-local|month|time"> because of browser restriction (does not work on firefox), and be cause I'd like the flexibility of customizing the appearance of the date using HTML tags. I've decided NOT to use @angular/material because I wanted something easier to customize

There is still much to do here, and any support is welcome. I'm in no way an expert in frontend devepment (I'm a Java developer), so alot of these things are new to me.

View Demo

Installation

Install @novalinc/datepicker via NPM

$ cd /path/to/your-awesome-project
$ npm install --save @novalinc/datepicker@latest

Angular CLI Scripts and Styles Configuration

Date picker relies heavily on Twitter Bootstrap for styling, so you need to configure bootstrap globally for your application. In the .angular-cli.json file, please be sure to set the followng:

...
    "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
    ],
    "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
    ],
...

Intergration

In your application's module file

import { DatepickerModule } from '@novalinc/datepicker';

]);

@NgModule({
...
    DatepickerModule
...
})
export class FeatureModule { }

In your application's component file

import { Component } from '@angular/core';
import { DateModel, DatepickerOptions, TemporalType } from '@novalinc/datepicker';
 
@Component({
  selector: 'ft-comp',
  templateUrl: 'feature.component.html'
})

export class FeatureComponent implements OnInit {
    departure: DateModel;
    departureOptions: DatepickerOptions;

    ngOnInit(): void {
        // Set options for the datepicker
        this.departureOptions = new DatepickerOptions();
        this.departureOptions.temporal = TemporalType.TIMESTAMP; 
        this.departureOptions.placeholder = "Depart date";
    }
}

In your component's view (html)


<form #form="ngForm"> 
    <div class="row">
        <div class="col-sm-6">
            <h4>Selecting both date and time e.g. Departure time</h4>
            <nl-datepicker name="departure" [options]="departureOptions" [(ngModel)]="departure"></nl-datepicker>
        </div>
        <div class="col-sm-6">

        </div>
    </div>
</form>

Developement

$ cd novalinc-datepicker
# Build library
$ npm run build

Publish Library

# Ensure that the project has been built first
$ cd dist # Be sure to ONLY publish the dist content and NOT the rest of the project
$ npm publish --access=public

Dependencies

All dependencies are specified in the package.json, but the following are a MUST:

  • moment (2.17.1)
  • bootstrap (3.3.7)