^ $(document).ready(function() { // ---------------------------------------------------------------------- // 1. กำหนด Datepicker สำหรับ #datetimepicker1 และ #datetimepicker2 (ชุดเดิม) $('#datetimepicker1').datepicker({ weekStart: 0, todayBtn: "linked", language: "us", orientation: "bottom auto", keyboardNavigation: false, autoclose: true }); $('#datetimepicker2').datepicker({ weekStart: 0, todayBtn: "linked", language: "us", orientation: "bottom auto", keyboardNavigation: false, autoclose: true }); // ---------------------------------------------------------------------- // 2. กำหนด Datepicker สำหรับ booking_detail_date (ชุดใหม่ที่ต้องการ) // วนลูปหาทุก Element ที่มี class 'booking_detail_date1' (คือตัว input) // และผูก Datepicker เข้ากับ Element แม่ที่มี class 'input-group date' $('.booking_detail_date1').each(function(index) { var $inputGroup = $(this).closest('.input-group.date'); // ตรวจสอบว่ามี ID ขึ้นต้นด้วย booking_detail_date เพื่อความชัวร์ (ถ้าไม่ใช้ PHP ก็จะใช้ Class 'input-group date' ตรงๆ) if ($inputGroup.attr('id') && $inputGroup.attr('id').startsWith('booking_detail_date')) { $inputGroup.datepicker({ weekStart: 0, todayBtn: "linked", language: "us", orientation: "bottom auto", keyboardNavigation: false, autoclose: true // ทำให้ปฏิทินซ่อนเมื่อเลือกวันที่ }).on('changeDate', function(e) { // เมื่อมีการเลือกวันที่จากปฏิทิน // เรียกฟังก์ชัน cal_date() ซึ่งคุณได้ผูก Event handlers ไว้ภายใน // **ถ้าคุณต้องการเรียก calB(index) โดยตรง ให้เปลี่ยนบรรทัดนี้เป็น calB(index);** cal_date(); }); } }); // หมายเหตุ: โค้ดนี้สมมติว่าฟังก์ชัน cal_date() และ calB(i) ที่คุณให้มาอยู่ใน scope ที่สามารถเรียกใช้ได้ });