Flat DateTime Picker - suthikiet076/ASP.NET-jQueryLibrary GitHub Wiki

#Flat DateTime Picker

วิธีการติดตั้ง

  • Extract file CuriousSolutions-DateTimePicker-0.1.35-1-g593a382
  • Coding

• Add this code in HTML <head>… </head> 

<script type="text/javascript" src="demo/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="src/DateTimePicker.css" />
<script type="text/javascript" src="src/DateTimePicker.js"></script>
<script type="text/javascript" src="src/i18n/DateTimePicker-i18n.js"></script>
<script>
	$(document).ready(function(){
		$("#dtBox").DateTimePicker();
	 });
</script>

• Add this code in HTML <body>…</body> 

<!--  Date Input  --> 
	<p>Date : </p>
	<input type="text" data-field="date" readonly>
		
	<!--  Time Input  -->
	<p>Time : </p>
	<input type="text" data-field="time" readonly>
		
	<!--  DateTime Input  -->
	<p>DateTime : </p>
	<input type="text" data-field="datetime" readonly>

<div id="dtBox"></div>
  1. Run file

ตัวอย่างการใช้งานเบื้องต้น

  • เมื่อ Run file จะแสดง textbox
  • คลิกที่ textbox จะมีหน้าต่างตัวเลือกวันที่และเวลาเป็น user interface ที่สวยงาม

  • เลื่อน slide bar เพื่อเลือกวันที่และเวลา

  • คลิก set เพื่อเลือกวันที่และเวลาที่ตั้งไว้

  • คลิก clear เพื่อลบวันที่และเวลาที่เลือกไว้ และปิดหน้าต่างนี้

หน้าจอการแสดงผลลัพธ์

เมื่อคลิก set จะได้ผลลัพธ์ดังนี้

Sample code

   <!doctype html>
<html>
<head>
	<title>Test</title>
    	<meta charset="utf-8">
	<meta name="viewport"content="width=device-width,initial-scale=1">
    
	<script type="text/javascript" src="demo/jquery-1.11.0.min.js"></script>
	<link rel="stylesheet" type="text/css" href="src/DateTimePicker.css" />
	<script type="text/javascript" src="src/DateTimePicker.js"></script>
	<script type="text/javascript" src="src/i18n/DateTimePicker-i18n.js"></script>

	<script>
		$(document).ready(function(){
			$("#dtBox").DateTimePicker();
	 });
	</script>

</head>
<body>	
	<!--  Date Input  --> 
	<p>Date : </p>
	<input type="text" data-field="date" readonly>
		
	<!--  Time Input  -->
	<p>Time : </p>
	<input type="text" data-field="time" readonly>
		
	<!--  DateTime Input  -->
	<p>DateTime : </p>
	<input type="text" data-field="datetime" readonly>	

<div id="dtBox"></div>
</body>
</html>
⚠️ **GitHub.com Fallback** ⚠️