JSFiddle - React, Tailwind, and code Playground

by Szymon Lisowiec

HTML

<input id="calendar" type="date" />

JavaScript

'use strict';
function InputMethods(obj, config){
	var self = this;
  self.obj = [];
  self.config = {
  	format: '%d-%m-%Y',
  	lang: {
    	months: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
      format: {
      	'%Y': 'rrrr',
        '%m': 'mm',
        '%d': 'dd'
      }
    }
  };
  
  self.validators = {
  	date: function(date){
    	if(!/^(\d{1,2})[-\/\.](\d{1,2})[-\/\.](\d{4})$/.exec(date)) return false;
      if(date.indexOf('.') > -1) date = date.split('.');
      else if(date.indexOf('-') > -1) date = date.split('-');
      else if(date.indexOf('/') > -1) date = date.split('/');
      if(parseInt(date[0]) > 12 || parseInt(date[0]) < 1 || parseInt(date[1]) > 12 || parseInt(date[1]) < 1) return false;
      return true;
    }
  };
  
  self.formating = function(date, lastcorrect){
  	var v = {
    	'%Y': 0,
      '%m': 0,
      '%d': 0
    };
    if(typeof date === 'object'){
   		
    }else{
    	for(var k in v){
      	v[k] = self.config.lang.format[k]
      }
    }
    
    var s = '';
    if(typeof lastcorrect == 'undefined'){
      s = self.config.format;
      for(var k in v){
        s = s.replace(k, self.config.lang.format[k]);
      }
    }else s = lastcorrect;
    return s;
  };
  
  if(typeof config !== 'undefined'){
  	for(var c in config)
    	if(typeof self.config[c] !== 'undefined')
      	self.config[c] = config[c];
  }
  
  if(obj){
  	if(typeof obj === 'array')
    	self.obj.concat(obj);
    else self.obj.push(obj);
  }else{
  	obj = document.getElementsByTagName('input');
    for(var i=0;i<obj.length;i++){
    	if(obj[i].getAttribute('type') == 'date'){
        var cloned = obj[i].cloneNode(true);
        cloned.setAttribute('type','text');
        
        obj[i].outerHTML = '<div class="InputMethods date">'+cloned.outerHTML+'</div>';
        obj[i].value = self.formating();
        obj[i].addEventListener('blur', function(e){
         ...