Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
ember-flatpickr
Advanced tools
This is an Ember addon that wraps the date picker flatpickr. It uses ember-cli-node-assets to pull in flatpickr from npm.
http://shipshapecode.github.io/ember-flatpickr/
ember install ember-flatpickr
{{ember-flatpickr
allowInput=false
altFormat='Y-m-d'
altInput=true
altInputClass='my-alt-input'
clickOpens=true
date=(readonly defaultDate) // Required Option
dateFormat='M/D/Y'
defaultDate=defaultDate
defaultHour=12
defaultMinute=0
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 dateValues)) // Required Option
onClose=(action 'doSomeStuffOnClose')
onOpen=(action 'doSomeStuffOnOpen')
onReady=(action 'doSomeStuffOnReady')
parseDate=false
placeholder='Choose a Date'
prevArrow='<'
shorthandCurrentMonth=false
static=false
time_24hr=false
weekNumbers=false
wrap=false
}}
*(date
and onChange
are the only required options, but you can pass null if you do not care about it. All other options are taken straight from the flatpickr options, but they have defaults and you only need to pass what you need.)
Note: You should pass your date
with the readonly
helper, and you should only update your date
selected in the onChange
action.
date
property accepts:
dateObject
string
containing a date formatted accordingly to dateFormat
dateObject
string
containing dates formatted accordingly to dateFormat
onChange
, onClose
, onOpen
, onReady
receive 3 parameters:
dateObjects
dateFormat
representing the last selected dateFlatpickr
instanceWhenever a new date is selected, the action onChange
will be fired: if you just want the event to set the array of selected dateObject
, you can use (action (mut dateValues))
like the example above. Otherwise you should implement you own onChange
action.
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'
}
});
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))
}}
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.
date
, locale
, maxDate
and minDate
are watched by the component, 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.
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.
All options available to Flatpickr are available here.
Please see the flatpickr docs for a full list of options.
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!
FAQs
An Ember addon that wraps the date picker Flatpickr
The npm package ember-flatpickr receives a total of 7,870 weekly downloads. As such, ember-flatpickr popularity was classified as popular.
We found that ember-flatpickr demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.