อยากได้ ค่าเริ่มต้นเป็น 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 20-10-2016 02:55:33

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

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

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ลืมบอกไป มันคือ datepicker นะคะ

catmini59 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 20-10-2016

ความคิดเห็นที่ 3

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

catmini59 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 20-10-2016

ความคิดเห็นที่ 5

ได้แล้วค่ะ ขอบุณมากค่ะ

catmini59 21-10-2016 03:08

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน