Have ideas to improve npm?Join in the discussion! »

    angular-flatpickr

    3.6.6 • Public • Published

    Build Status

    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

    Keywords

    none

    Install

    npm i angular-flatpickr

    DownloadsWeekly Downloads

    1,253

    Version

    3.6.6

    License

    MIT

    Unpacked Size

    20.2 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar