angular-flatpickr

WebJar for angular-flatpickr

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	angular-flatpickr
Last Version	2.5.0
Release Date	Sep 7, 2017
Type	jar
Description	angular-flatpickr WebJar for angular-flatpickr
Project URL	http://webjars.org
Source Code Management	https://github.com/archsaber/angular-flatpickr

Download angular-flatpickr

Filename	Size
angular-flatpickr-2.5.0.pom
angular-flatpickr-2.5.0.jar	9 KB
angular-flatpickr-2.5.0-sources.jar	22 bytes
angular-flatpickr-2.5.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/angular-flatpickr/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>angular-flatpickr</artifactId>
    <version>2.5.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/angular-flatpickr/
implementation 'org.webjars.npm:angular-flatpickr:2.5.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/angular-flatpickr/
implementation ("org.webjars.npm:angular-flatpickr:2.5.0")

Apache Buildr

'org.webjars.npm:angular-flatpickr:jar:2.5.0'

Apache Ivy

<dependency org="org.webjars.npm" name="angular-flatpickr" rev="2.5.0">
  <artifact name="angular-flatpickr" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='angular-flatpickr', version='2.5.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "angular-flatpickr" % "2.5.0"

Leiningen

[org.webjars.npm/angular-flatpickr "2.5.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

Angular-flatpickr

An angular directive to use flatpickr. Currently it has following capabilities

• setting init options using fp-opts attribute
• on setup callback using fp-on-setup attribute to get the created flatpickr object

There are now support for a directive based approach and a component based

Install

• install it with npm install -S angular-flatpickr
• Add the dependency
  • Component based angular 1.5+ - node_modules/angular-flatpickr/dist/ng-flatpickr-comp.js
  • Directive based angular older - node_modules/angular-flatpickr/dist/ng-flatpickr.js
• Add the angular-flatpickr module in your app as shown

var module = angular.module('atApp.somemodule', [
  'angular-flatpickr' // <- important
]);

Example as Component

• inside your parent controller or component set your default options and the post setup callback

ctrl.dateOpts = {
  dateFormat: 'Y-m-d',
  placeholder: 'Change date..', // Default: 'Select Date..'
  defaultDate: '2016-03-01 03:30:00 -0300',
  onChange: function(selectedDates, dateStr, instance) {
    // Do stuff on change
  }
};

ctrl.datePostSetup = function(fpItem) {
  console.log('flatpickr', fpItem);
}

2 ways to use the component, first is just stating the ng-flatpickr

<ng-flatpickr
  fp-opts="$ctrl.dateOpts"
  fp-on-setup="$ctrl.datePostSetup({
    fpItem: fpItem
  })">
</ng-flatpickr>

The other way is if you want to set a placeholder or do something in the inside element you can use it like this

<ng-flatpickr
  fp-opts="$ctrl.dateOpts"
  fp-on-setup="$ctrl.datePostSetup({
    fpItem: fpItem
  })">
</ng-flatpickr>

If ng-model is stated it will set the initial date to match it

<ng-flatpickr
  ng-model="'28-10-2018'"
  fp-opts="$ctrl.dateOpts"
  fp-on-setup="$ctrl.datePostSetup({
    fpItem: fpItem
  })">
</ng-flatpickr>

Example as Directive

• inside your controller set your default options and the post setup callback

$scope.dateOpts = {
  dateFormat: 'Y-m-d',
  placeholder: 'Change date..', // Default: 'Select Date..'
  defaultDate: '2016-03-01 03:30:00 -0300',
  onChange: function(selectedDates, dateStr, instance){
    // Do stuff on change
  }
};

$scope.datePostSetup = function(fpItem) {
  console.log('flatpickr', fpItem);
}

<div ng-repeat="date in dates">
  <input
    ng-flatpickr
    fp-opts="dateOpts"
    fp-on-setup="datePostSetup(fpItem)"
    ng-model="date.selectedDateObj"
    data-enabletime="true">
</div>

Note: This directive doesn't watch over the fp-opts values. For doing any changes to the flatpickr element created, use object returned from the on-setup callback

License

angular-flatpickr module is under MIT license see project root

ArchSaber

Versions

Version
2.5.0 Sep 7, 2017