Preview 1

demo :

clasStyle: theme4-pack1-blue

shortDay: 3

code :

<html>
	<head>
		<title>tgl.js</title>
		<script type="text/javascript" src="js/tgl.1.1.min.js"></script>
	</head>

	<body>
		<form method='get'>
			<input type='text' id='tes1' value='' name='tes1'>
		</form>

		<script>
			tgl({
				input : 'tes1',
				clasStyle : 'theme4-pack1-blue',
				shortDay : '3'
			});
		</script>
	</body>
</html>

Preview 2

demo :

clasStyle: theme4-pack1-teal

timePicker: true

datePicker: false

format: hh:nn:ss

code :

<html>
	<head>
		<title>tgl.js</title>
		<script type="text/javascript" src="js/tgl.1.1.min.js"></script>
	</head>

	<body>
		<form method='get'>
			<input type='text' id='tes6' value='' name='tes6'>
		</form>

		<script>
			tgl({
				input : 'tes6',
				clasStyle : 'theme4-pack1-teal',
				timePicker : true,
				datePicker : false,
				format : 'hh:nn:ss'
			});
		</script>
	</body>
</html>

Preview 3

demo :

clasStyle: theme4-pack1-green

shortDay: 3

timePicker: true

format: yyyy/mm/dd hh:nn:ss

code :

<html>
	<head>
		<title>tgl.js</title>
		<script type="text/javascript" src="js/tgl.1.1.min.js"></script>
	</head>

	<body>
		<form method='get'>
			<input type='text' id='tes7' value='' name='tes7'>
		</form>

		<script>
			tgl({
				input : 'tes7',
				clasStyle : 'theme4-pack1-green',
				shortDay : 3,
				timePicker : true,
				format : 'yyyy/mm/dd hh:nn:ss'
			});
		</script>
	</body>
</html>

Preview 4

demo :

clasStyle: theme2-pack0-blue

shortDay: 3

code :

<html>
	<head>
		<title>tgl.js</title>
		<script type="text/javascript" src="js/tgl.1.1.min.js"></script>
	</head>

	<body>
		<form method='get'>
			<input type='text' id='tes2' value='' name='tes2'>
		</form>

		<script>
			tgl({
				input : 'tes2',
				clasStyle : 'theme2-pack0-blue',
				shortDay : '3'
			});
		</script>
	</body>
</html>

Preview 5

demo :

clasStyle: theme2-pack3-red

timePicker: true

datePicker: false

format: hh:nn

code :

<html>
	<head>
		<title>tgl.js</title>
		<script type="text/javascript" src="js/tgl.1.1.min.js"></script>
	</head>

	<body>
		<form method='get'>
			<input type='text' id='tes8' value='' name='tes8'>
		</form>

		<script>
			tgl({
				input : 'tes8',
				clasStyle : 'theme2-pack3-red',
				timePicker : true,
				datePicker : false,
				format : 'hh:nn'
			});
		</script>
	</body>
</html>

Preview 6

demo :

clasStyle: theme2-pack2-blue

shortDay: 3

timePicker: true

format: yyyy/mm/dd hh:nn

code :

<html>
	<head>
		<title>tgl.js</title>
		<script type="text/javascript" src="js/tgl.1.1.min.js"></script>
	</head>

	<body>
		<form method='get'>
			<input type='text' id='tes9' value='' name='tes9'>
		</form>

		<script>
			tgl({
				input : 'tes9',
				clasStyle : 'theme2-pack2-blue',
				shortDay : 3,
				timePicker : true,
				format : 'yyyy/mm/dd hh:nn'
			});
		</script>
	</body>
</html>

Preview 7

demo :

clasStyle: theme2-pack0-purple

format: yyyy mmmm(m) dddd(d)

code :

<html>
	<head>
		<title>tgl.js</title>
		<script type="text/javascript" src="js/tgl.1.1.min.js"></script>
	</head>

	<body>
		<form method='get'>
			<input type='text' id='tes3' value='' name='tes3'>
		</form>

		<script>
			tgl({
				input : 'tes3',
				clasStyle : 'theme2-pack0-purple',
				format : 'yyyy mmmm(m) dddd(d)'
			});
		</script>
	</body>
</html>

Preview 8

demo :

clasStyle: theme4-pack1-red

shortDay: 2

format: dddd, dd mmmm yyyy

code :

<html>
	<head>
		<title>tgl.js</title>
		<script type="text/javascript" src="js/tgl.1.1.min.js"></script>
	</head>

	<body>
		<form method='get'>
			<input type='text' id='tes4' value='' name='tes4'>
		</form>

		<script>
			tgl({
				input : 'tes4',
				clasStyle : 'theme4-pack1-red',
				shortDay : '2'
				format : 'dddd, dd mmmm yyyy'
			});
		</script>
	</body>
</html>

Preview 9

demo :

shortDay: 2

with custom region: af

customize day: Sondag, Maandag, Dinsdag, Woensdag, Donderdag, Vrydag, Saterdag

customize month: Januarie, Februarie, Maart, April, Mei, Junie, Julie, Augustus, September, Oktober, November, Desember

code :

<html>
	<head>
		<title>tgl.js</title>
		<script type="text/javascript" src="js/tgl.1.1.min.js"></script>
	</head>

	<body>
		<form method='get'>
			<input type='text' id='tes5' value='' name='tes5'>
		</form>

		<script>
			tgl({
				input : 'tes5',
				shortDay : '2',
				region : 'af',
				day: 	{ 
						af : ["Sondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrydag","Saterdag"],
					},
				month: 	{ 
						af : ["Januarie","Februarie","Maart","April","Mei","Junie","Julie","Augustus","September","Oktober","November","Desember"]
					}
			});
		</script>
	</body>
</html>

TGL.js

javascript date picker & time picker

Preview 1

demo :

code :

Preview 2

demo :

code :

Preview 3

demo :

code :

Preview 4

demo :

code :

Preview 5

demo :

code :

Preview 6

demo :

code :

Preview 7

demo :

code :

Preview 8

demo :

code :

Preview 9

demo :

code :