Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 106,783

HOME > PHP > PHP Forum > ต้องการสร้างปฏิทินการลงเวลาของพนักงาน ให้มี UI ประมาณรูปนี้ค่ะ







 

ต้องการสร้างปฏิทินการลงเวลาของพนักงาน ให้มี UI ประมาณรูปนี้ค่ะ

 
Topic : 132901



โพสกระทู้ ( 78 )
บทความ ( 0 )



สถานะออฟไลน์



ต้องการสร้างปฏิทินการลงเวลาของพนักงาน ให้มี UI ประมาณรูปนี้ค่ะ
calendar2

โดยจะแสดงปฎิทิน และมี textbox ให้กรอกวันที่เริ่มงาน กับวันที่สิ้นสุด แล้วจะมีปุ่มที่ให้แสดง status ในปฎิทินค่ะ
เช่น เลือกวันที่ แล้วกดปุ่มสีเขียวทำงาน ในปฎิทินก็จะเป็นสีเขียน ถ้ากดปุ่มสีแดงหยุดงาน ในปฏิทินก็จะเป็นสีแดงค่ะ

พอจะแนะนำ Library ที่สามารถจะมาประยุกต์หรือตอบโทรย์ UI ตัวนี้ไหมค่ะ ลองหาแล้วมีแต่ตัวเสียตังค่ะ



Tag : PHP, MySQL, JavaScript, Ajax, jQuery


Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2019-01-11 13:53:00 By : จุ๋มจิ๋ม View : 116 Reply : 5
 

 

No. 1



โพสกระทู้ ( 132 )
บทความ ( 0 )



สถานะออฟไลน์


ลอง jquery datepicker ดูหรือยังครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-01-11 13:58:57 By : Jatmentz
 


 

No. 2



โพสกระทู้ ( 78 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : Jatmentz เมื่อวันที่ 2019-01-11 13:58:57
รายละเอียดของการตอบ ::
ยังเลยค่ะ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-01-11 14:26:50 By : จุ๋มจิ๋ม
 


 

No. 3



โพสกระทู้ ( 73,641 )
บทความ ( 833 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

=> jQuery UI Datepicker ปฏิทินวันที่ Calendar เลือกลงใน Textbox เลือกได้ทั้ง

ที่เหลือเขียนแค่ Event ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-01-15 10:50:32 By : mr.win
 


 

No. 4



โพสกระทู้ ( 78 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณมากค่ะ ตอนนี้เปลี่ยน UI ใหม่แล้ว ประมาณนี้ค่ะ คือ
จะออกแบบเป็น 2 ปุ่ม
1.สีแดง (วันที่หยุดงาน)
2.สีฟ้า (วันทำงาน)

joom

คลิกที่วันจะมีการ highlight สีและแสดงวันที่เลือก
** ที่อย่างได้คือ พอกดปุ่มสีแดง แล้วไปคลิกวันในปฎิทิน จะ highlight เป็นสีแดง และแสดง Value วันที่หยุดงาน
ถ้ากดปุ่มสีฟ้า แล้วไปคลิกวันในปฎิทิน จะ highlight เป็นสีฟ้า และแสดง Value วันที่ทำงาน

พอจะแยกยังไงด้บ้างคะ รบกวนดูโค้ดหน่อยค่ะ

Code (PHP)
<html>
    <head>   	
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
    	<style type="text/css">
#print-array {
  position: fixed;
  top: 0;
  right: 0;
  padding: 20px;
  color: red;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight-tt a{
	    background: green !important;
}

</style>
    </head>
    <body>
        <div class="container">
        	<div id="datepicker"></div>
			<div id="print-array"></div>
			<button id="red">แดง</button>  


		</div>   

		<script type="text/javascript">

			$(document).ready(function() {

                     
					var dates = new Array();
					function addDate(date) {
						if (jQuery.inArray(date, dates) < 0) dates.push(date);
					}

					function removeDate(index) {
						dates.splice(index, 1);
					}

					function printArray() {
						var printArr = new String;
						dates.forEach(function(val) {
						printArr += '<h4>' + val + '</h4>';
						});
						$('#print-array').html(printArr);
					}
					// Adds a date if we don't have it yet, else remove it
					function addOrRemoveDate(date) {
						var index = jQuery.inArray(date, dates);
						if (index >= 0)
							removeDate(index);
						else
						addDate(date);
						printArray();
					}

					// Takes a 1-digit number and inserts a zero before it
					function padNumber(number) {
						var ret = new String(number);
						if (ret.length == 1) ret = "0" + ret;
						return ret;
					}

					$("#datepicker").datepicker({
						onSelect: function(dateText, inst) {
						addOrRemoveDate(dateText);
					},
						beforeShowDay: function(date) {
						var year = date.getFullYear();
						// months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009"
						var month = padNumber(date.getMonth() + 1);
						var day = padNumber(date.getDate());
						// This depends on the datepicker's date format
						var dateString = month + "/" + day + "/" + year;

 
						var gotDate = jQuery.inArray(dateString, dates);
						if (gotDate >= 0) {
						// Enable date so it can be deselected. Set style to be highlighted
						return [true, "ui-state-highlight-tt"];
						}
						// Dates not in the array are left enabled, but with no extra style
						return [true, ""];


					}
				});

});

		</script>




    </body>
    
</html>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-01-15 22:09:46 By : จุ๋มจิ๋ม
 


 

No. 5



โพสกระทู้ ( 78 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 4 เขียนโดย : จุ๋มจิ๋ม เมื่อวันที่ 2019-01-15 22:09:46
รายละเอียดของการตอบ ::
... ใส่ความคิดเห็นตรงนี้....... ตอบความคิดเห็นที่ : 3 เขียนโดย : mr.win เมื่อวันที่ 2019-01-15 10:50:32
รายละเอียดของการตอบ ::
แล้วตัว calendar ที่โชว์นี่ ก็ใช้ datepicker เหมือนกันใช่ไหมคะ


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-01-18 16:53:31 By : จุ๋มจิ๋ม
 


   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ต้องการสร้างปฏิทินการลงเวลาของพนักงาน ให้มี UI ประมาณรูปนี้ค่ะ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, vps | เช่า vps , รับทำเว็บไซต์ รับเขียนโปรแกรม

Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2019 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่