Nebulous Program Mechanic


    2.1.1 • Public • Published


    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


      npm install tzolkin --save

    React/JSX Usage

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

    Standard JavaScript or jQuery Usage


      <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');
        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:

    Multiple Instances

      <input type='text' name='date' class='select-datetime' />
      <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});


    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('') or ''
    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


    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


      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 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


        type: 'datetime',
        input: '.select-datetime',
        onOpen: (date, picker_el, input_el) => {
          console.log("Opening date/time picker");
          // ... 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 ...


    npm i tzolkin

    DownloadsWeekly Downloads





    (MIT OR Apache-2.0)

    Unpacked Size

    923 kB

    Total Files


    Last publish


    • aaronvb
    • sparkmasterflex