material-datepicker

Demo

Demo Page

Usage

Include the JavaScript file and Stylesheet in your html page.
This plugin works with moment.js.
There are two methods to include the Material-Datepicker.

Method 1
When you have included moment.js already.

  <script type="text/javascript" src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/FreddyFY/material-datepicker/1.0.9/dist/material-datepicker.css">
  <script type="text/javascript" src="https://cdn.rawgit.com/FreddyFY/material-datepicker/1.0.9/dist/material-datepicker.min.js"></script>

Method 2
When you don’t need moment.js itself.

  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/FreddyFY/material-datepicker/1.0.9/dist/material-datepicker.css">
  <script type="text/javascript" src="https://cdn.rawgit.com/FreddyFY/material-datepicker/1.0.9/dist/material-datepicker-with-moment-js.min.js"></script>

It’s better to download the files, instead of using the rawgit cdn server.

In its simplest case, Material-Picker can be initialised with a single line of Javascript.
You will probably also specify some options while applying the plugin.

var monthpicker = new MaterialDatepicker('input');
var monthpicker = new MaterialDatepicker('input', {
  type: 'month',
  lang: 'de',
  orientation: 'portrait'
});

Options

• type (default: “date”) [string] - Datepicker[“date”], Monthpicker[“month”]
• lang (default: “en”) [string] - Language
• orientation (default: “landscape”) [string] - Orientation of the picker: portait or landscape
• color (default: “#80cbc4”) [string] - Color of the picker; Html color values
• zIndex (default: “100”) [number] - z-index of the picker
• position (default: “absolute”) [string] - position of the picker [fixed, static, ..]
• theme (default: “light”) [string] - Theme of the picker: light or dark
• openOn (default: “click”) [string] - How to open the picker: Click-events or ‘direct’

• closeAfterClick (default: true) [string] - Close the picker after choose a date or not

• date (default: today or string inside input) [type: Date Object] - The initial date of the Picker

• weekBegin (default: “sunday”) [string] - Beginning weekday of the week: sunday or monday
• outputFormat (default: date “YYYY/MM/DD”; month “MMMM YYYY”) [string] - Date-format* of the output [inside a input or OutputElement]
• inputFormat (default: date “YYYY/MM/DD”; month “MMMM YYYY”) [string] - Date-format* of the input value attribute [in the inputElement]
• topHeaderFormat (default: “YYYY”) [string] - Date-format* of the output [inside a input or OutputElement]
• headerFormat (default: date “ddd, MMM D”; month “MMMM”) [string] - Date format in the header bar

• sitePickerFormat (default: date “MMMM YYYY”; month “YYYY”) [string] - Date format in the site picker bar

• onLoad (default: none) [function] - Function called when picker is loaded

• onOpen (default: none) [function] - Function called when picker is open
• onNewDate (default: none) [function] - Function called when new Date is picked and the picker is closed
• onChange (default: none) [function] - Function called when the Date is changed, even if the picker is still open
• outputElement (default: none) [string or Object] - Returns the date inside a SPAN-tag, P-tag or A-Tag

• http://momentjs.com/docs/#/displaying/format/

Example

var monthpicker = new MaterialDatepicker('input', {
  lang: 'de',
  orientation: 'portrait',
  theme: 'dark',
  color: 'red',
  date: new Date(861999834000),
  outputFormat: 'd-mm-yyyy',
  inputFormat: 'ddmmyyyy',
  outputElment: '.month',
  onChange: function() {
               alert('Date Changed!!')
             },
  onNewDate: function() {
               alert('New Date Chosen!!')
             }
});

API

.open()

.close()

.newDate( new Date(861999834000) ) set new Date

.date returns the current date

.element returns the choosen element

.picker returns the picker element

Building from source

1. Clone the repository
   • git clone https://github.com/FreddyFY/material-datepicker.git
2. Install dependencies
   • npm install
3. Run grunt watch for development
   • npm start
4. Run default grunt before a Pull Request
   • npm run build
5. Output is in dist/