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" /> |
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.
Latest posts by Sigit Prasetya Nugroho (see all)
- How To Insert Ads In The Middle Post Blogspot Blogger - January 26, 2019
- Login Page – Tutorial CRUD Client and API Server Using JQuery And Lumen Part 2 - January 23, 2019
- Tutorial CRUD Client and API Server Using JQuery And Lumen Part 1 - January 4, 2019