npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

light-vue-pikaday

v1.0.4

Published

A lightweight VueJs component wrapper for [Pikaday](https://github.com/Pikaday/Pikaday)

Downloads

2

Readme

About:

A lightweight VueJs component wrapper for Pikaday

NPM version License

Higly customizable Pikaday Vue Component

  • Simple and Lightweight
  • Dependencies: Pikaday and Moment.js
  • Same configuration of Pikaday can be applied.

Pikaday Screenshot

Install

You can install it via npm:

npm i light-vue-pikaday

Then where you want to use the pikaday, you should import and register the component.

import PikadayPicker from "light-vue-pikaday";

// register the component
components: {
  PikadayPicker;
}

Then you can simply place the component where you want

<pikaday-picker value="2020-03-20"></pikaday-picker>

Example:


<template>
  <div id="app">
    <pikaday-picker :value="value" format="DD/MM/YYYY" :options="options"></pikaday-picker>
  </div>
</template>

<script>
import PikadayPicker from "light-vue-pikaday";
export default {
  name: "app",

  data() {
    return {
      value: "08/03/1994",
      options: {
        disableWeekends: true,
        yearRange: [1990, 2000]
      }
    };
  },
  components: {
    PikadayPicker
  }
};
</script>

Pikaday Component Props:

pikaday-picker accepets the following props:

value

required It's the default value of the date picker.

format

optional

default: YYYY-MM-DD

Any Moment.js format can be used

options

optional

default: {}

Object that can have any configuration that Pikaday has.

These are a list of configuration that you can pass, source: Pikaday

  • field bind the datepicker to a form field
  • trigger use a different element to trigger opening the datepicker, see [trigger example][] (default to field)
  • bound automatically show/hide the datepicker on field focus (default true if field is set)
  • ariaLabel data-attribute on the input field with an aria assistance tekst (only applied when bound is set)
  • position preferred position of the datepicker relative to the form field, e.g.: top right, bottom right Note: automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see positions example (default to 'bottom left')
  • reposition can be set to false to not reposition datepicker within the viewport, forcing it to take the configured position (default: true)
  • container DOM node to render calendar into, see container example (default: undefined)
  • formatStrict the default flag for moment's strict date parsing
  • toString(date, format) function which will be used for custom formatting. This function will take precedence over moment.
  • parse(dateString, format) function which will be used for parsing input string and getting a date object from it. This function will take precedence over moment.
  • defaultDate the initial date to view when first opened
  • setDefaultDate Boolean (true/false). make the defaultDate the initial selected value
  • firstDay first day of the week (0: Sunday, 1: Monday, etc)
  • minDate the minimum/earliest date that can be selected (this should be a native Date object - e.g. new Date() or moment().toDate())
  • maxDate the maximum/latest date that can be selected (this should be a native Date object - e.g. new Date() or moment().toDate())
  • disableWeekends disallow selection of Saturdays or Sundays
  • disableDayFn callback function that gets passed a Date object for each day in view. Should return true to disable selection of that day.
  • yearRange number of years either side (e.g. 10) or array of upper/lower range (e.g. [1900,2015])
  • showWeekNumber show the ISO week number at the head of the row (default false)
  • pickWholeWeek select a whole week instead of a day (default false)
  • isRTL reverse the calendar for right-to-left languages
  • i18n language defaults for month and weekday names (see internationalization below)
  • yearSuffix additional text to append to the year in the title
  • showMonthAfterYear render the month after year in the title (default false)
  • showDaysInNextAndPreviousMonths render days of the calendar grid that fall in the next or previous months (default: false)
  • enableSelectionDaysInNextAndPreviousMonths allows user to select date that is in the next or previous months (default: false)
  • numberOfMonths number of visible calendars
  • mainCalendar when numberOfMonths is used, this will help you to choose where the main calendar will be (default left, can be set to right). Only used for the first display or when a selected date is not already visible
  • events array of dates that you would like to differentiate from regular days (e.g. ['Sat Jun 28 2017', 'Sun Jun 29 2017', 'Tue Jul 01 2017',])
  • theme define a classname that can be used as a hook for styling different themes, see [theme example][] (default null)
  • blurFieldOnSelect defines if the field is blurred when a date is selected (default true)
  • onSelect callback function for when a date is selected
  • onOpen callback function for when the picker becomes visible
  • onClose callback function for when the picker is hidden
  • onDraw callback function for when the picker draws a new month
  • keyboardInput enable keyboard input support (default true)

License

MIT © Kamal Albatarni