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

tzolkin

v2.2.1

Published

React date/time picker using moment.js

Downloads

36

Readme

Tzolkin

React DateTime picker for Real Geeks' LeadManager and beyond!

About the Name

Tzolk'in (Mayan pronunciation: [t͡sol ˈkʼin], formerly and commonly tzolkin) is the name bestowed by Mayanists on the 260-day Mesoamerican calendar originated by the Maya civilization of pre-Columbian Mesoamerica.

read more

Install

  npm install tzolkin --save

React/JSX Usage

  { Tzolkin } = require('tzolkin')

  render: => {
    return (
      <div>
        <Tzolkin type="datetime">
          <input defaultValue="3/09/2018" type="input" />
        </Tzolkin>
      </div>
    )
  }

Standard JavaScript or jQuery Usage

HTML:

  <input type='text' name='date' class='select-datetime' />

To prevent any browser Date/Time picker UI, use a standard text input vs date, time or datetime.

TzolkinPlugin v1.x.x JS:

  { TzolkinPlugin } = require('tzolkin');

  TzolkinPlugin.create({
    type: 'datetime',
    input: '.select-datetime'
  })

TzolkinPlugin v2.x.x JS:

  { TzolkinPlugin } = require('tzolkin');

  tz = new TzolkinPlugin().create({
    type: 'datetime',
    input: '.select-datetime'
  })

  // if you need to:
  tz.close()

Multiple Instances

  <label>Date</label>
  <input type='text' name='date' class='select-datetime' />

  <label>Time</label>
  <input type='text' name='time' class='select-datetime' />

If there are multiple inputs which need to use Tzolkin then set input key equal to a JavaScript selected element or have different classes for each and pass just the CSS class as a string.

  { TzolkinPlugin } = require('tzolkin');

  dt_input = document.querySelectorAll('.select-datetime')[0];
  // or $('.select-datetime')[0]
  tm_input = document.querySelectorAll('.select-datetime')[1];
  // or $('.select-datetime')[1]

  TzolkinPlugin.create({ type: 'date', input:  dt_input});
  TzolkinPlugin.create({ type: 'time', input:  tm_input});

Options

| Option | Data Type | Description | Acceptable options | |---------|------------|--------------------------------|--------------------| | input * | DOM element, String | <input> to trigger date picker and receive selected date/time | document.querySelector('.select-date') or '.select-date' | | type | String | picker has date, time or both | 'date', 'time', 'datetime' | | date | String | Date/time for Tzolkin to start with | "03/12/2018" | | format | String | Date/time format desired using moment.js formating | "MM/DD/YYYY h:mm a" | | trigger | DOM element, String | link, span, button, etc to trigger date picker | document.querySelector('a.select-date-trigger') or 'a.select-date-trigger' | | step | Integer | For time picker, minutes increments between hours | 15, 30, etc | | minDate | String | disable any dates earlier than this date | "01/01/2001" | | maxDate | String | disable any dates later than this date | "12/31/2025" | | disable | Object | see below | | | onOpen | callback | see below | | | onSelect | callback | see below | | | onClose | callback | see below | |

* non-React only

Defaults

All options, minus input are optional and most have a default value that they fall back on if no value is passed in the configurations.

| Option | Default | More... | |--------|-----------------|---------| | type | 'date' | | | format | depends on type | date: "MM/DD/YYYY" datetime: "MM/DD/YYYY h:mm a" time: "h:mm a" | | minDate | -2 years | Jan 1st of 2 years ago | | maxDate | +2 years | Dec 31st of 2 years in future |

Disabling Dates and Times

Tzolkin allows selected days of week, months, dates, hours and/or years to disable from user selection. This option expects a JavaScript object with one or more of the following keys.

| key | description | |----------|-----------------------------------------------------------------| | years | a list of years where every day will be disabled | | months | a list of months where every day will be disabled | | dates | a list of individual dates to be disabled across all months | | days | all dates that fall under selected days (Monday, Tuesday, etc) | | hours | a list of hours to be disable from selection |

Example:

  let disable = {
    years: [2010, 2012, 2014],
    months: ["February", "May"],
    dates: [1, 5, 24],
    days: ["Sunday", "Saturday"],
    hours: ["11am", "12am", "1pm"]
  }

  <Tzolkin type="datetime" disable={disable}>
    <input defaultValue="3/09/2018 9:30 am" type="input"/>
  </Tzolkin>

Callbacks

Tzolkin allows for 3 callbacks occurring at different points in the lifecycle of the date/time picker.

| callback | when | |----------|--------------------------------------------------------------| | onOpen | during componentDidMount called on picker component | | onSelect | called immediately after a date or time has been clicked | | onClose | during componentWillUnmount called on picker component |

Example:

  Tzolkin.create({
    type: 'datetime',
    input: '.select-datetime',

    onOpen: (date, picker_el, input_el) => {
      console.log("Opening date/time picker");
      console.log(date);
      // ... do something cool ...
    },

    onSelect: (date, picker_el, input_el) => {
      alert("You picked" + date);
      // ... do something EVEN cooler ...
    },

    onClose: (date, picker_el, input_el) => {
      console.log("Closing date/time picker")
      // ... do something mildly entertaining ...
    }
  })