Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

tail.datetime

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tail.datetime

A powerful, translat- and configurable DateTime Picker, written in Vanilla JavaScript without any dependencies!

  • 0.4.6
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
112
decreased by-22.76%
Maintainers
1
Weekly downloads
 
Created
Source

tail.DateTime

plainJS npm npm Software License Author

The tail.DateTime package provides an extensive and configurable Date/Time Calendar Picker for your website, written in vanilla JavaScript and without any dependencies! It was originally a fork of MrGuiseppes Pure JS Calendar, but version 0.4.0 broke away from the last original lines and the script is now completely independent!

Wanna see tail.DateTime in action?

Wanna translate tail.DateTime in your language?

Features

  • A beautiful Date/Time Picker (in 2 Designs + 6 Color Schemes)
  • Definable ranges of selectable dates (Blacklist / Whitelist)
  • Colorable Tooltips with an cute animation
  • Different Views to navigate quickly: Days, Months, Years & Decades
  • Completely Translatable and already available in 9 languages
  • Extendable and Bindable through different Events
  • Compatible with AMD, tested with requireJS
  • Many Settings to adapt and configure the design and behavior
  • Compatible with all modern browsers (including IE 9+)
  • No Dependencies, just embed and use
  • Free/To/Use - MIT Licensed

Install & Embed

The master branch will always contain the latest Release, which you can download directly here as .tar or as .zip archive, or just visit the Releases Page on GitHub directly. You can also be cool and using NPM (or YARN):

npm install tail.datetime --save
yarn add tail.datetime --save
bower install tail.datetime --save

Using a CDN

You can also use the awesome CDN services from jsDelivr or UNPKG.

https://cdn.jsdelivr.net/npm/tail.datetime@latest/
https://unpkg.com/tail.datetime/

Thanks To

Translations

Documentation

The Documentation has been moved to GitHubs Wiki Pages, but I will keep a table of contents list here and some basic instructions.

Basic Instructions

You can pass up to 2 arguments to the tail.DateTime constructor, the first parameter is required and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or just a single selector as string, which calls the querySelectorAll() method on its own. The second parameter is optional and, if set, MUST be an object with your tail.DateTime options.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <link type="text/css" rel="stylesheet" href="css/tail.datetime-default.css" />
        <!-- Additional Stylesheets -->
    </head>
    <body>
        <script type="text/javascript" src="js/tail.datetime.min.js"></script>
        <!-- <script type="text/javascript" src="langs/tail.datetime-{lang}.js"></script> -->

        <input type="text" class="tail-datetime-field" />

        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function(){
                tail.DateTime(".tail-datetime-field", { /* Your Options */ });
            });
        </script>
    </body>
</html>

Default Settings

Please check out GitHubs Wiki Pages to read more about each single option!

tail.DateTime(".tail-datetime-field", {
    animate: true,
    classNames: false,
    closeButton: true,              // New in 0.4.5
    dateFormat: "YYYY-mm-dd",
    dateStart: false,
    dateRanges: [],
    dateBlacklist: true,
    dateEnd: false,
    locale: "en",
    position: "bottom",
    rtl: "auto",
    startOpen: false,
    stayOpen: false,
    timeFormat: "HH:ii:ss",
    timeHours: null,                // New Syntax in 0.4.5
    timeMinutes: null,              // New Syntax in 0.4.5
    timeSeconds: 0,                 // New Syntax in 0.4.5
    timeIncrement: true,            // New in 0.4.5
    timeStepHours: 1,               // New in 0.4.3
    timeStepMinutes: 5,             // New in 0.4.3
    timeStepSeconds: 5,             // New in 0.4.3
    today: true,
    tooltips: [],
    viewDefault: "days",
    viewDecades: true,
    viewYears: true,
    viewMonths: true,
    viewDays: true,
    weekStart: 0
});

Published under the MIT-License; Copyright © 2018 - 2019 SamBrishes, pytesNET

Keywords

FAQs

Package last updated on 04 Jan 2019

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc