Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

mtr-datepicker

mtrdesign58MIT0.3.11

The pure JavaScript ultimate datepicker

datepicker, mtr datepicker, mtr design, pure javascript, javascript datepicker, js datepicker

readme

mtr-datepicker Build Status Coverage Status Built with Grunt

The pure JavaScript ultimate datepicker

MTR Datepicker - Screen

About

MTR Datepicker is a library written in pure JavaScript which allows you to create great looking and lightweight datepickers for you web apps. It is supported by all of the modern internet browsers and comes with a few customizable themes.

Use these docs to learn how to use it or if you need more details go to the official Documentation. If you are interested in that "How it is made?" you can check the jsdocs or directly dive into the code. We appreciate your feedback so you can contact us always in the issues section. And don't forget to check the Contributions guide, maybe you can help us to make the datepicker better.

Demo

A simple preview of the datepicker is available here. You can customize the datepicker and make it works the way you want.

Documentation

Installation

Get the code

There are two possible ways to include the mtr-datepicker library in your project. You can download the latest stable release form the official site and include it in your templates.

Or if you prefer to be up-to-date with our latest releases with a package manager you can use NPM, just type in your Terminal or CMD the following command:

npm install --save mtr-datepicker

Or if you are fan of YARN you can use it to install the lib

yarn add mtr-datepicker

Load the library

First you need to load the styles of the datepicker. Put the following lines in the head section of your html file or template:

<link rel="stylesheet" type="text/css" href="dist/mtr-datepicker.min.css">
<link rel="stylesheet" type="text/css" href="dist/mtr-datepicker.default-theme.min.css">

Then you should load the JavaScript, we suggest you to put the lines at the bottom of the body section of your html file or template. That is all, now you are ready to initialize your first datepicker.

<script type="text/javascript" src="dist/mtr-datepicker.min.js"></script>

How to use

To use the loaded scripts just add an element with specific id to your html and then tell the library to make it a datepicker. Here is a simple example:

<div id="first-mtr-datepicker"></div>

<script>
  var config = {
    target: 'first-mtr-datepicker'
  };
  var myDatepicker = new MtrDatepicker(config);
</script>

You can use more advanced datepickers and customize their behavior. To learn how, you should go and read more from the API section of the docs.

Contribute

We will appreciate it if you want to support our project and contribute to make it better. You can read our Contributions guide in the official docs or go to the CONTRIBUTING.md file here in GitHub.

License

MTR Datepicker is open source and available under the GPL license.

changelog

Changelog

0.3.11 - 2020-07-14

  • Fixed minutes output when the value is less than 10
  • Added a way to apply the changed of the input after an enter key press
  • Added ability to control the order of the date fields
  • Other minor bugs fixes and improvements

0.3.10 - 2020-06-30

  • Added ability to toggle the date/time picker elements
  • Fixed input when provided values with leading zero
  • Other minor bugs fixes and improvements

0.3.9 - 2020-06-25

  • Bugs fixes and improvements related with the timezones

0.3.8 - 2017-11-15

  • Added basic timezones support

0.3.7 - 2017-09-29

  • If you don't like the AM/PM time format now you can use the datepicker with full 24 hours time format
  • Now you can enter values manually on mobile (exclude iOS for now)
  • fixed issues with synchronicity losses

0.3.5 - 2017-09-04

  • Make smart hours smarter. Now the datepicker automatically switch the PM to AM when you go back from 12 PM to 11 AM
  • Added additional input validations to ensure correct initialization of the datepicker

0.3.3 - 2016-08-08

  • Fix bug with the mouse wheel on Firefox. Now, when you scroll up, the value will increase!

  • Added swipe support for mobile. Finally, you can change the values of the inputs using a cool swipe gesture.

  • Fixed bug with rounding the input timestamps.