Nebulous Program Mechanic

    tzolkin

    2.1.1 • Public • Published

    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 ...
        }
      })

    Install

    npm i tzolkin

    DownloadsWeekly Downloads

    9

    Version

    2.1.1

    License

    (MIT OR Apache-2.0)

    Unpacked Size

    923 kB

    Total Files

    31

    Last publish

    Collaborators

    • aaronvb
    • sparkmasterflex