Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ember-flatpickr

Package Overview
Dependencies
Maintainers
1
Versions
90
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-flatpickr

An Ember addon that wraps the date picker Flatpickr

  • 1.1.6
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
9.5K
decreased by-8.36%
Maintainers
1
Weekly downloads
 
Created
Source

Ember-flatpickr

npm version npm Ember Observer Score Build Status Code Climate Test Coverage

This is an Ember addon that wraps the date picker flatpickr. It uses ember-cli-node-assets to pull in flatpickr from npm.

Demo

Flatpickr http://shipshapecode.github.io/ember-flatpickr/

Installation

ember install ember-flatpickr

Usage

{{ember-flatpickr
allowInput=false
altFormat='Y-m-d'
altInput=true
altInputClass='my-alt-input'
clickOpens=true
dateFormat='M/D/Y'
defaultDate=defaultDate
disable=datesToDisable
disableMobile=false
enable=datesToEnable
enableSeconds=false
enableTime=true
flatpickrRef=flatpickrRef
hourIncrement=1
inline=false
locale='ru'
maxDate=maxDate
minDate=minDate
minuteIncrement=5
mode='single'
nextArrow='>'
noCalendar=false
onChange=(action (mut dateValue))
onClose='doSomeStuffOnClose'
onOpen='doSomeStuffOnOpen'
onReady='doSomeStuffOnReady'
parseDate=false
placeholder='Choose a Date'
prevArrow='<'
static=false
timeFormat='H:i'
time_24hr=false
utc=false
value=(readonly dateValue)
wrap=false}}

*(onChange is the only required option, but you can pass null if you do not care about it. All other options are displayed, but they have defaults and you only need to pass what you need)

Note: You should pass your value with the readonly helper, and you should only update your value selected in the onChange action. If you just want it to be set to the new dateObject, you can use (action (mut dateValue)) like the example above.

Whenever a new date is selected, the action onChange will be fired, and passed the new dateObject and dateString to that action. This allows you to pass whatever action you may want in to happen on change.

Themes

flatpickr provides several themes out of the box. You can specify a theme in your ember-cli-build.js.

const app = new EmberApp(defaults, {
  flatpickr: {
    theme: 'material_blue'
  }
});

Localization

flatpickr supports over 25 languages. You can specify the locales you want to support in your ember-cli-build.js, which will include the necessary locale js files.

const app = new EmberApp(defaults, {
  flatpickr: {
    locales: ['fr', 'de', 'ru', 'uk']
  }
});

You can then use the locales you imported by specifying which you want in your template, like so:

{{ember-flatpickr
locale='ru'
onChange=(action (mut dateValue))
}}

Manual Localization Configuration

locales option also accepts an object for custom locale configuration. This is useful for reusing app locale code.

The following example is using moment.js and assumes that a userLocale is specified to look up the correct locale configuration from moment.js.

import Ember from 'ember';
import moment from 'moment';

// app/controllers/some-controller.js
export default Ember.Controller.extend({
  userLocale: 'de',
  
  customLocaleConfig: Ember.computed(function(){
    const userLocale = this.get('userLocale');
    const localeData = moment.localeData(userLocale);
    
    return {
      ordinal: localeData.ordinal,
      weekdays: {
        longhand: localeData.weekdays(),
        shorthand: localeData.weekdaysShort()
      },
      months: {
        longhand: localeData.months()
        shorthand: localeData.monthsShort()
      }
    };
  })
})
{{ember-flatpickr
locale=customLocaleConfig
onChange=(action (mut dateValue))
}}

Check flatpickr locale documentation for a list of config options.

Observers

maxDate and minDate are watched by observers, and will update the flatpickr instance whenever you change them. This allows you to do things like having two components, used as a range picker, and updating the minDate and maxDate to display valid date choices on each.

flatpickrRef

If you need to interact directly with the flatpickr instance you have created inside the component, you can pass in flatpickrRef=myFlatpickrRefName, which would then be accesible in the controller or parent component. You can then do things like this.get('myFlatpickrRefName').close() to close the datepicker, if you wanted to make a close button.

Options

All options available to Flatpickr are available here.

Please see the flatpickr docs for a full list of options.

Contributing

If there are features you would like to see implemented, or we have missed some flatpickr options, please open an issue and/or submit a PR!

Keywords

FAQs

Package last updated on 22 Feb 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc