JSFiddle - React, Tailwind, and code Playground

by VVetya

HTML

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<form name="reportinputform">
<input id="calendar" name="date" value="" pattern="[0-9]{2}\s[0-9]{2}\s[0-9]{2}" placeholder="ДД-ММ-ГГ" maxlength="8"  type="text"/>
</form>
<input type="button" id="addButton"  value="Создать № отчета">
<input type="button" id="delButton"  onClick="handleButton2Click()" value="Удалить последнюю запись"><br />
Присвоен номер отчета: <div id="Numb" type="text"></div>
<script>
/**
Дата создания
**/
window.onload = init;
//**var seq=0; seq=seq+1;  - это моя попытка создать порядковый номер :_:
var seq=0;
now = new Date();
var month=new Array("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
  var week=new Array("воскресенье","понедельник","вторник","среда","четверг","пятница","суббота");
/**
так пытаюсь записать 
**/

var reportsbase = [].map.call(document.querySelectorAll('.input_block'), function(block) {
  return [].map.call(block.querySelectorAll('.field'), function(inp) {
    return inp.value;
  });
});

/**
Ввод только цифр и "-" в инпут
**/
var cc = reportinputform.calendar;
for (var i in ['input', 'change', 'blur', 'keyup']) {
    cc.addEventListener('input', formatCalendar, false);
}
function formatCalendar() {
    var calendar = this.value.replace(/[^\d]/g, '').substring(0,6);
    calendar = calendar != '' ? calendar.match(/.{1,2}/g).join('-') : '';
    this.value = calendar;
}
/**
Кнопка создать
**/
function init(){
var button = document.getElementById("addButton");
button.onclick = handleButtonClick;
       }
function handleButtonClick() {
    var textInput0 = document.getElementById("calendar");
	  seq=seq+1;
    document.getElementById("Numb").value = seq;
    var calendarinput = textInput0.value;
    var reportCreationdate = calendarinput.replace (/\-/g, '.');
              if(calendarinput == "" || textInput0.value.length<6){
              	...

CSS

/* calendar */
.datepicker { border-collapse: collapse; border: 2px solid #999; position: absolute; z-index:1000}
.datepicker tr.controls th { height: 22px; font-size: 11px; }
.datepicker select { font-size: 11px; }
.datepicker tr.days th { height: 18px; }
.datepicker tfoot td { height: 18px; text-align: center; text-transform: capitalize; }
.datepicker th, .datepicker tfoot td { background: #eee; font: 10px/18px Verdana, Arial, Helvetica, sans-serif; }
.datepicker th span, .datepicker tfoot td span { font-weight: bold; }

.datepicker tbody td { width: 24px; height: 24px; border: 1px solid #ccc; font: 11px/22px Arial, Helvetica, sans-serif; text-align: center; background: #fff; }
.datepicker tbody td.date { cursor: pointer; }
.datepicker tbody td.date.over { background-color: #99ffff; }
.datepicker tbody td.date.chosen { font-weight: bold; background-color: #ccffcc; }