GithubHelp home page GithubHelp logo

razex2 / tail.datetime Goto Github PK

View Code? Open in Web Editor NEW

This project forked from deawx/tail.datetime

0.0 0.0 0.0 1.92 MB

A lightweight, translat- and configurable Open Source DateTime Picker, written in pure vanilla JavaScript!

Home Page: https://github.pytes.net/tail.DateTime

License: MIT License

CSS 22.90% JavaScript 77.10%

tail.datetime's Introduction

tail.DateTime

npm Version npm Downloads Support Me plainJS License

The perfect Date/Time Picker for your perfect Website / Web-Application!

The tail.DateTime script is an extensive and fully-featured Date/Time Picker, written in vanilla JavaScfript and without any dependency. It is compatible with all major browsers, starting with IE 10 and above, and is optimized for a direct use in the browser, as AMD (using requireJS) or as browserify module.


Wanna see tail.DateTime in action?

Wanna translate tail.DateTime in your language?

Support

You really like my tail.DateTime script and want to support me and all of my projects?
Then I would be extremely grateful for a coffee! (Thanks to all Supporters)

Buy Me A Coffee

Features

  • Beautiful. 2 different Designs in 4 / 2 color schemes...
  • Extensive.
    • Define Black- or Whitelists...
    • Use colorizable tooltips...
    • Restrict the date/time selection...
    • ... and way more ...
  • Configurable. 30 settings and 4 bindable events...
  • Translatable. Already available in 17 languages...
  • Zero Dependencies. And written in vanilla JavaScript...
  • Free/To/Use. Because it's MIT licensed <3

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,                  // [0.4.0]          Boolean
    classNames: false,              // [0.3.0]          Boolean, String, Array, null
    closeButton: true,              // [0.4.5]          Boolean
    dateFormat: "YYYY-mm-dd",       // [0.1.0]          String (PHP similar Date)
    dateStart: false,               // [0.4.0]          String, Date, Integer, False
    dateRanges: [],                 // [0.3.0]          Array
    dateBlacklist: true,            // [0.4.0]          Boolean
    dateEnd: false,                 // [0.4.0]          String, Date, Integer, False
    locale: "en",                   // [0.4.0]          String
    position: "bottom",             // [0.1.0]          String
    rtl: "auto",                    // [0.4.1]          String, Boolean
    startOpen: false,               // [0.3.0]          Boolean
    stayOpen: false,                // [0.3.0]          Boolean
    time12h: false,                 // [0.4.13][NEW]    Boolean
    timeFormat: "HH:ii:ss",         // [0.1.0]          String (PHP similar Date)
    timeHours: true,                // [0.4.13][UPD]    Integer, Boolean, null
    timeMinutes: true,              // [0.4.13][UPD]    Integer, Boolean, null
    timeSeconds: 0,                 // [0.4.13][UPD]    Integer, Boolean, null
    timeIncrement: true,            // [0.4.5]          Boolean
    timeStepHours: 1,               // [0.4.3]          Integer
    timeStepMinutes: 5,             // [0.4.3]          Integer
    timeStepSeconds: 5,             // [0.4.3]          Integer
    today: true,                    // [0.4.0]          Boolean
    tooltips: [],                   // [0.4.0]          Array
    viewDefault: "days",            // [0.4.0]          String
    viewDecades: true,              // [0.4.0]          Boolean
    viewYears: true,                // [0.4.0]          Boolean
    viewMonths: true,               // [0.4.0]          Boolean
    viewDays: true,                 // [0.4.0]          Boolean
    weekStart: 0                    // [0.1.0]          String, Integer
});

Copyright & License

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

tail.datetime's People

Contributors

aeadedoyin avatar ashucg avatar dimadin avatar fastslack avatar jacob273 avatar milankyncl avatar mrguiseppe avatar noxludio avatar zendbit avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.