อยากได้ ค่าเริ่มต้นเป็น default ในค่าสิ้นสุด แล้วมีฟังชั่นคำนวนเวลาด้วยค่ะ T_____________________T

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากได้ ค่าเริ่มต้นเป็น default ในค่าสิ้นสุด แล้วมีฟังชั่นคำนวนเวลาด้วยค่ะ T_____________________T

อยากได้ ค่าเริ่มต้นเป็น default ในค่าสิ้นสุด แล้วมีฟังชั่นคำนวนเวลาด้วยค่ะ T_____________________T
อันนี้โค๊ตของค่า default วันเริ่มต้นปรากฏในหน้าสิ้นสุด

<script type="text/javascript">
	$(function(){
	var startDateTextBox = $('#txtstartdate');
	var endDateTextBox = $('#txtenddate');
	startDateTextBox.datepicker({
    isBuddhist: true,
    showButtonPanel: true,
    currentText: 'ปัจจุบัน',
    closeText: 'ปิด',
    monthNames: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],
    dayNamesMin: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
		dateFormat: 'yy-mm-dd', 
    minDate: new Date(),
		onClose: function(dateText, inst) {
			if (endDateTextBox.val() != '') {
				var testStartDate = startDateTextBox.datepicker('getDate');
				var testEndDate = endDateTextBox.datepicker('getDate');
			if (testStartDate > testEndDate)
				endDateTextBox.datepicker('setDate', testStartDate);
			}
			else {
			endDateTextBox.val(dateText);
		}
    onSelect: function (selectedDate){
    endDateTextBox.datepicker('option', 'minDate', startDateTextBox.datepicker('getDate') );
    }
	},
	});
		endDateTextBox.datepicker({
    isBuddhist: true,
    showButtonPanel: true,
    currentText: 'ปัจจุบัน',
    closeText: 'ปิด',
    monthNames: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],
    dayNamesMin: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],                    
		dateFormat:'yy-mm-dd',
    minDate: new Date(), 
		onClose: function(dateText, inst) {
			if (startDateTextBox.val() != '') {
				var testStartDate = startDateTextBox.datepicker('getDate');
				var testEndDate = endDateTextBox.datepicker('getDate');
			if (testStartDate > testEndDate)
				startDateTextBox.datepicker('setDate', testEndDate);
			}
			else {
				startDateTextBox.val(dateText);
		}
	},
      onSelect: function (selectedDate){
    startDateTextBox.datepicker('option', 'maxDate', endDateTextBox.datepicker('getDate') );
    }
	});
});
</script>
อันนี้คือโค๊ตของการคำนวนเวลาจากค่าเริ่มต้นไปสิ้นสุด

<script type="text/javascript">
var datepicked = function() {
var from = $('#txtstartdate');
var to = $('#txtenddate');
var days = $('#txttotal');
var fromDate = from.datepicker('getDate')
var toDate = to.datepicker('getDate')
if (toDate && fromDate) {
var difference = 0;
var oneDay = 86400000; //ms per day
var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay);
days.val(difference);
}
}
$(function() {
$('#txtstartdate, #txtenddate').datepicker({
  isBuddhist: true,
    showButtonPanel: true,
    currentText: 'ปัจจุบัน',
    closeText: 'ปิด',
    monthNames: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],
    dayNamesMin: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
  dateFormat: 'yy-mm-dd',
  minDate: new Date(),
  onSelect: datepicked
});
});   
</script>
ภาพ UI ค่ะ

 

 >> หนูพยายามรวมกันแล้วแต่พอได้อีกอย่าง มันจะไม่ปรากฏอีกตัวนึงค่ะ พอดีอยากใช้ทั้งสองฟังก์ชั่นเลย มีแนะนำไหมคะ ?


Catmini59 49.228.98.xxx 20-10-2016 02:55:33

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ลืมบอกไป มันคือ datepicker นะคะ


catmini59 49.228.97.xxx 20-10-2016 02:57
 ความคิดเห็นที่ 2
 ไม่ค่อยเข้าใจคำถาม แต่ถ้าดูจากโค้ด ลองดูตัวอย่างนี้เป็นแนวทาง


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="txtstartdate" name="txtstartdate">
<br>
<label for="to">to</label>
<input type="text" id="txtenddate" name="txtenddate">
<br>
<label for="to">total</label>
<input type="text" id="txttotal" name="txttotal">
<script type="text/javascript">  
var monthNamesTH = ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'];
var dayNamesMinTH = ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'];
var dateOptions = {
	isBuddhist: true,  
	showButtonPanel: true,  
	currentText: 'ปัจจุบัน',  
	closeText: 'ปิด',  
	monthNames: monthNamesTH,  
	dayNamesMin: dayNamesMinTH,  
	dateFormat: 'yy-mm-dd'   		
};
$(function(){  

	var inst =null; // สร้างตัวแปรไว้เก็บค่าว่า ตัวไหนกำลังแสดงปฏิทิน
	$('#txtstartdate, #txtenddate').on("click",function(){
		inst=$(this).attr("id"); // เก็บชื่อ id
	});

	var datepicked = function() {  
//		console.log(inst);
		var from = $('#txtstartdate');  
		var to = $('#txtenddate');  
		var days = $('#txttotal');  
		var fromDate = from.datepicker('getDate')  
		var toDate = to.datepicker('getDate')  
		
		if(inst=='txtstartdate'){	
			to.datepicker('option', 'minDate', fromDate);  	
		}
		if(inst=='txtenddate'){
			from.datepicker('option', 'maxDate', toDate );  						
		}
//		console.log(toDate);
		if (toDate && fromDate) {  
			var difference = 0;  
			var oneDay = 86400000; //ms per day  
			var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay);  
			days.val(difference);  
		}  
	}  
	
	$('#txtstartdate, #txtenddate').datepicker($.extend(dateOptions,{
		minDate: new Date(),  
		onSelect: function (){
			return datepicked()  		
		}
	}));  
});     
</script>
</body>
</html>



ตัวอย่าง



ninenik 180.183.141.xxx 20-10-2016
 ความคิดเห็นที่ 3
พอเลือกวันที่ในวันเริ่มต้นแล้ววันที่สิ้นสุดจะปรากฏด้วย เช่น เลือก วันที่เริ่มต้น  2016/10/02  วันที่สิ้นสุด 2016/10/02  แบบนี้อ่าค่ะ  แล้ววันที่สิ้นสุดไม่สามารถเลือกวันน้อยกว่าวันที่เริ่มต้นได้   จากนั้นก็คำนวนจำนวนวันออกมาที่  จำนวนวันทั้งหมด


catmini59 49.228.97.xxx 20-10-2016 22:04
 ความคิดเห็นที่ 4
to.datepicker('setDate', fromDate);  
fromDate = from.datepicker('getDate')  
toDate = to.datepicker('getDate')  			


เพิ่มสามบรรทัดนี้เข้าไปใน

if(inst=='txtstartdate'){
	to.datepicker('option', 'minDate', fromDate);  			
}


จะได้เป็น

if(inst=='txtstartdate'){
	to.datepicker('option', 'minDate', fromDate);  	
	to.datepicker('setDate', fromDate);  
	fromDate = from.datepicker('getDate')  
	toDate = to.datepicker('getDate')  			
}


>>>  อัพเดท >>> 20-10-2016
------------------------------------------
หรือแบบนี้ก็ได้

if(inst=='txtstartdate'){
	to.datepicker('option', 'minDate', fromDate);  	
	to.datepicker('setDate', fromDate);  
	toDate = to.datepicker('getDate')  			
}


โดยตัดบรรทัดนี้ออก

fromDate = from.datepicker('getDate')  // ตัดออกได้ เพราะซ้ำกับด้านบน


ninenik 1.47.129.xxx 20-10-2016
 ความคิดเห็นที่ 5
ได้แล้วค่ะ ขอบุณมากค่ะ 


catmini59 49.228.98.xxx 21-10-2016 03:08
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ