Moment JS

Moment JS Fromat Fiddle

by chintsu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/locale/ru.js"></script>
<label>
  Format:
  <input id="inpFormat" type="text"/>
  <button id="btnFormat">Format</button>
</label>

<div id="console">&nbsp;</div>
<div id="history"></div>

CSS

body {
  padding: .7em;
}

label {
  display: block;
  padding: .5em;
}

#console {
  padding: .5em;
  border: 2px solid #2E99EB;
  background-color: #0187C5;
  color: white;
  line-height: 1.5em;
  height: 1.5em;
  margin-bottom:.5em;
}

#history {
  padding: .5em;
  border: 2px solid #DBDBDD;
  background-color: #DFDFE1;
  font-family: monospace;
}

#history p {
  line-height: 1.5em;
  padding: .2em;
}

#history p + p {
  border-top: 1px white dashed;
}

JavaScript

var btnFormat = document.getElementById('btnFormat');
var inpFormat = document.getElementById('inpFormat');
var consoleD = document.getElementById('console');
var historyD = document.getElementById('history');

var moment = moment();

btnFormat.addEventListener('click', function() {
	var format = inpFormat.value;
  
  if(!format) {
  	return;
  }
  
  var result = moment.format(format);

	consoleD.innerHTML = result;
  historyD.innerHTML += '<p>' + '"' + format + '" -> '  + result + '</p>';
});


// Moment JS - Formatting Guide: http://momentjs.com/docs/#/parsing/string-format/