Markus Möller: Datum in Input-Feldern

Beitrag lesen

SELF-Forum

Datum in Input-Feldern

Markus Möller Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo!
Genau vor dem selben Problem stehe ich auch gerade. Ich habe jetzt folgende JavaScript-Lösung gebastelt, klappt noch nicht ganz 100%, ist aber schon mal ein guter Anfang. Vielleicht hilft's ja. Wenn du das gebrauchen kannst, sag Bescheid, dann laß ich dir die fertige Version zukommen, wenn alles komplett funktionert!

Die JS-Datei:
----------------------
// -------------------------------------------------------------------------
// ----- Date-Field --------------------------------------------------------
// -------------------------------------------------------------------------

var oldValues = new Array();
var DATE_SEPARATOR = "\.";

function checkDateField(field) {
 var s = document.detailform.elements[field].value;
 if ((!_isValidDateFormat(field)) && (s.length > 0)) {
  document.detailform.elements[field].value = oldValues[field];
 }
}

function storeDateField(field) {
 var s = document.detailform.elements[field].value;
 if (_isValidDateFormat(field)) {
  oldValues[field] = s;
 }
}

function formatDateField(field) {
 var result = document.detailform.elements[field].value;

if (result.length > 0) {
  // Only one figure
  var search = eval("/^(\d\d?)" + DATE_SEPARATOR + "?$/");
  if(search.test(result)) {
   first = RegExp.$1;
                        year = (new Date()).getFullYear();
   month = (new Date()).getMonth() + 1;
   result =
    first + DATE_SEPARATOR.replace(/\/, "") +
    month + DATE_SEPARATOR.replace(/\/, "") +
    year ;
  }

// Day
  var search = eval("/^(\d" + DATE_SEPARATOR + ")/");
  search.exec(result);
  first = RegExp.$1;
  result =
   result.replace(
    eval(
     "/^\d" + DATE_SEPARATOR + "/"
    ),
    "0" + first
   );

// Month
  search = eval("/^(\d\d" + DATE_SEPARATOR + ")(\d(" + DATE_SEPARATOR + "|$))/");
  search.exec(result);
  first = RegExp.$1;
  second = RegExp.$2;
  result =
   result.replace(
    eval(
     "/^\d\d" + DATE_SEPARATOR + "\d(" + DATE_SEPARATOR + "|$)/"
    ),
    first + "0" + second
   );

// Year
  // No year
  search = eval("/^(\d\d" + DATE_SEPARATOR + "\d\d)" + DATE_SEPARATOR + "?$/");
  search.exec(result);
  first = RegExp.$1;
                year = (new Date()).getFullYear();
  if (year < 1000) { year += 1900; }
  result =
   result.replace(
    eval(
     "/^\d\d" + DATE_SEPARATOR + "\d\d" + DATE_SEPARATOR + "?$/"
    ),
    first + DATE_SEPARATOR.replace(/\/, "") + year
   );

// One digits
  search = eval("/^(\d\d" + DATE_SEPARATOR + "\d\d" + DATE_SEPARATOR + ")(\d)$/");
  search.exec(result);
  first = RegExp.$1;
  second = RegExp.$2;
  result =
   result.replace(
    eval(
     "/^\d\d" + DATE_SEPARATOR + "\d\d" + DATE_SEPARATOR + "\d$/"
    ),
    first + 0 + second
   );

// three digits
  search = eval("/^(\d\d" + DATE_SEPARATOR + "\d\d" + DATE_SEPARATOR + ")(\d\d\d)$/");
  search.exec(result);
  first = RegExp.$1;
  second = RegExp.$2;
  result =
   result.replace(
    eval(
     "/^\d\d" + DATE_SEPARATOR + "\d\d" + DATE_SEPARATOR + "\d\d\d$/"
    ),
    first + 0 + second
   );

// Add century
  search = eval("/^(\d\d" + DATE_SEPARATOR + "\d\d" + DATE_SEPARATOR + ")(\d\d)$/");
  search.exec(result);
  first = RegExp.$1;
  second = RegExp.$2;
  var century = "20";
  if (second > 50) {
   century = "19";
  }
  result =
   result.replace(
    eval(
     "/^\d\d" + DATE_SEPARATOR + "\d\d" + DATE_SEPARATOR + "\d\d$/"
    ),
    first + century + second
   );

document.detailform.elements[field].value = result;

if (!_isValidDate(field)) {
   alert("Date is not valid!");  // TRANSLATE
   document.detailform.elements[field].focus();
  }
 }
}

function _isValidDateFormat(field) {
 var txt = document.detailform.elements[field].value;
 var search;
 var first;
 var second;

// Digits and separators only
 search = eval("/[^\d" + DATE_SEPARATOR + "]/");
 if (search.test(txt)) {
  return false;
 }

// ---- SEPERATORS ----

// At most two separators
 search = eval("/" + DATE_SEPARATOR + ".*" + DATE_SEPARATOR + ".*" + DATE_SEPARATOR + "/");
 if (search.test(txt)) {
  return false;
 }

// String mustn't contain two successive separators
 search = eval("/" + DATE_SEPARATOR + "{2}/");
 if (search.test(txt)) {
  return false;
 }

// String mustn't start with a separator
 search = eval("/^" + DATE_SEPARATOR + "/");
 if (search.test(txt)) {
  return false;
 }

// ---- DAY ----

// Day mustn't be 0
 search = eval("/^0" + DATE_SEPARATOR + "/");
 if (search.test(txt)) {
  return false;
 }

// Day mustn't be 00
 search = /^00/;
 if (search.test(txt)) {
  return false;
 }

// Day mustn't be a number higher than 31
 search = eval("/^3[^01" + DATE_SEPARATOR + "]/");
 if (search.test(txt)) {
  return false;
 }
 search = /[1]\d/;
 if (search.test(txt)) {
  return false;
 }

// Enter without seperators
 search = /^(\d\d)(\d)/;
 if(search.test(txt)) {
  first = RegExp.$1;
  second = RegExp.$2;
  txt =
   txt.replace(
    /^\d\d\d/,
    first + DATE_SEPARATOR.replace(/\/, "") + second
   );
  document.detailform.elements[field].value = txt;
 }

// ---- MONTH ----

// Month mustn't be 0
 search = eval("/^\d\d?" + DATE_SEPARATOR + "0" + DATE_SEPARATOR + "/");
 if (search.test(txt)) {
  return false;
 }

// Month mustn't be 00
 search = eval("/^\d\d?" + DATE_SEPARATOR + "00/");
 if (search.test(txt)) {
  return false;
 }

// Month mustn't be with a number higher than 12
 search = eval("/^\d\d?" + DATE_SEPARATOR + "1[^012" + DATE_SEPARATOR + "]/");
 if (search.test(txt)) {
  return false;
 }
 search = eval("/^\d\d?" + DATE_SEPARATOR + "[23456789]\d/");
 if (search.test(txt)) {
  return false;
 }

// Enter without seperators
 search = /^(\d\d.\d\d)(\d)/;
 if(search.test(txt)) {
  first = RegExp.$1;
  second = RegExp.$2;
  txt =
   txt.replace(
    /^\d\d.\d\d\d/,
    first + DATE_SEPARATOR.replace(/\/, "") + second
   );
  document.detailform.elements[field].value = txt;
 }

// ---- YEAR ----

// Year has to consist of at most four digits
 search = eval("/^\d\d?" + DATE_SEPARATOR + "\d\d?" + DATE_SEPARATOR + "\d{5}/");
 if (search.test(txt)) {
  return false;
 }

// ---- OK ----

// Everything's alright
 return true;
}

function _isValidDate(field) {
 var txt = document.detailform.elements[field].value;
 var day = txt.substring(0, 2);
 var month = txt.substring(3, 5);
 var year = txt.substring(6, 10);

// Day
 var daysInMonth = new Array (31, _getDaysInFebruary(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
 if ((day > daysInMonth[month-1]) || (day < 1)) {
  return false;
 }

// Month
 if ((month < 1) || (month > 12)) {
  return false;
 }

return true;
}

function _getDaysInFebruary (year) {
 if (
  (year % 4 == 0)  &&
  (
   (year % 100 != 0)  ||
   (year % 400 == 0)
  )
 ) {
 return 29;
 }
 return 28;
}
----------------------

Die HTML-Datei:
----------------------
<html>
<head>
<script language="JavaScript" src="date.js">

</script>
</head>
<body>
 <form name="detailform">
  <input
   type="textfield"
   name="field"
   onKeyDown="storeDateField('field')"
   onKeyUp="checkDateField('field')"
   onKeyPress="checkDateField('field')"
   onBlur="formatDate('field')"
  >
 </form>
</body>
</html>
----------------------

  1. 456789 ↩︎

Beitrag melden
–
Informationen zu den Bewertungsregeln