Basic demo

by tonytlwu

HTML

<script src="https://rawgit.com/mtrdesign/mtr-datepicker/master/dist/mtr-datepicker.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mtrdesign/mtr-datepicker/master/dist/mtr-datepicker.min.css">
<link rel="stylesheet" href="https://rawgit.com/mtrdesign/mtr-datepicker/master/dist/mtr-datepicker.default-theme.min.css">
<div id="datepicker-demo-custom"></div>

<h4>Export formats</h4>
<div id="datepicker-demo-output"></div>

JavaScript

var initDate = new Date();
var demoDatepicker = new MtrDatepicker({
  target: 'datepicker-demo-custom',
  timestamp: initDate.getTime(),
  minutes: {
    min: 0,
    max: 50,
    step: 1
  },
  disableAmPm: navigator.language === 'en-GB'
});

// Attach event listeners
var datepickerOutputElement = document.getElementById('datepicker-demo-output');
datepickerChange(datepickerOutputElement, demoDatepicker);
demoDatepicker.onChange('all', function() {
  datepickerChange(datepickerOutputElement, demoDatepicker);
});

// Other functions

function datepickerChange(resultElement, datepicker) {
  var result =
    datepicker.toDateString() + '<br />' +
    datepicker.toLocaleDateString() + '<br /><br />' +

    datepicker.toTimeString() + '<br />' +
    datepicker.getFullTime() + '<br />' +
    datepicker.format('M/D/YYYY hh:mm A') + '<br />' +
    datepicker.format('YYYY-MM-DD HH:mm') + '<br />';

  resultElement.innerHTML = result;
}