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.
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | // 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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
1 | <input type="textbox" class="dateinput" /> |
Leave a Reply