Simple create date format validation with jqueryUI

Using jquery ui help us in creating various kinds of html elements, which is useful for the development of web design. I’ll create a date format validation using jquery and jquery ui. So, you can use my class to create the date format in your web application.

create date format validation with jqueryui

To be able to use jquery, please download this plugin in jquery official website here. Besides jquery, we also need a plugin jqueryUI for the manufacture of elements in the input text html date, download here

Okay, lets begin the script

1. Create javascript file as myfunc.js in your web folder and then copy this script below

// JavaScript Document
$(function() {
	$(".dateinput").datepicker({dateFormat: 'dd/mm/yy',
                  showButtonPanel: true,
                  showTime: true,
               }).attr("placeholder", "* Format : dd/mm/yyyy").blur(function(){
  	var checkstr = "0123456789";
	var Datevalue = "";
	var DateTemp = "";
	var seperator = "/";
	var day;
	var month;
	var year;
	var leap = 0;
	var err = 0;
	var i;
	   err = 0;
	   DateValue = $(".dateinput").val();
	   for (i = 0; i < DateValue.length; i++) {
		  if (checkstr.indexOf(DateValue.substr(i,1)) >= 0) {
			 DateTemp = DateTemp + DateValue.substr(i,1);
		  }
	   }
	   DateValue = DateTemp;
	   if (DateValue.length == 6) {
		  DateValue = DateValue.substr(0,4) + '20' + DateValue.substr(4,2); }
	   if (DateValue.length != 8) {
		  err = 19;}
	   year = DateValue.substr(4,4);
	   if (year == 0) {
		  err = 20;
	   }
	   month = DateValue.substr(2,2);
	   if ((month < 1) || (month > 12)) {
		  err = 21;
	   }
	   day = DateValue.substr(0,2);
	   if (day < 1) {
		 err = 22;
	   }
	   if ((year % 4 == 0) || (year % 100 == 0) || (year % 400 == 0)) {
		  leap = 1;
	   }
	   if ((month == 2) && (leap == 1) && (day > 29)) {
		  err = 23;
	   }
	   if ((month == 2) && (leap != 1) && (day > 28)) {
		  err = 24;
	   }
	   if ((day > 31) && ((month == "01") || (month == "03") || (month == "05") || (month == "07") || (month == "08") || (month == "10") || (month == "12"))) {
		  err = 25;
	   }
	   if ((day > 30) && ((month == "04") || (month == "06") || (month == "09") || (month == "11"))) {
		  err = 26;
	   }
	   if ((day == 0) && (month == 0) && (year == 00)) {
		  err = 0; day = ""; month = ""; year = ""; seperator = "";
	   }
	   if (err == 0) {
		   $(".dateinput").val(day + seperator + month + seperator + year) ;
	   }
	   else {
		  alert("Wrong format!");
		  $(".dateinput").select();
		   $(".dateinput").focus();
		  $(".dateinput").val('');
	   }
	});
    });

2. Lets try to use that script, please create new php or html page

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Datepicker jquery format</title>
</head>
<link rel="stylesheet" href="../../css/jquery-ui-1.10.3.custom.css" media="screen"> /* jqueryui css load here */
<script src="../../javascript/jquery-1.9.1.js" type="text/javascript"></script> /*jquery load here*/
<script src="../../javascript/jquery-ui-1.10.3.custom.js" type="text/javascript"></script> /* jqueryui plugin load here */
<script src="../../javascript/myjqueryui_func.js" type="text/javascript"></script> /* load my script here */
<body>
<div id="content">
    <div id="header_judul">How to create simple date format validation<br/> with jqueryUI by Seegatesite.com</div>
  	<label>Date : </label><input type="textbox" class="dateinput" />
</div>
</body>
</html>

To create your text element into date format element, you can call class “dateinput”, in my example, my date format is dd/mm/YYYY

<input type="textbox" class="dateinput" />

My date format validation script with jquery ui is still far from perfect, please modification itself to fit your needs

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: