Date Range Picker + PHP เลือกช่วงวันที่และเก็บลงฐานข้อมูล
ใน workshop นี้จะพาทำฟอร์มการเลือกวันที่แบบง่ายๆ คือเลือกวันเริ่มต้น – วันที่สิ้นสุดโดยใช้ Date Range Picker
แต่ตอนแสดงผลบนฟอร์มจะแสดงแค่ text field เดียว เช่น ในกรอบสีแดง
ซึ่งตอนเรา action ไปเก็บในตาราง เราอาจจะเก็บในฟิลด์เดียวกันก็ได้ หรืออยากจะแยกก็ได้
**ใน workshop นี้จะพาแยกเก็บเป็น 2 ฟิลด์ คือ datestart และ dateend
Code form
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>devbanban.com</title> <!-- Include Required Prerequisites --> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /> <!-- Include Date Range Picker --> <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /> </head> <body> <div class="container"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-4"> <br> <b> Form Date Range Picker </b> <form action="datedb.php" method="post" accept-charset="utf-8"> <br/> <input type="text" name="daterange" value="01/01/2017-31/12/2017" placeholder="click" /> <script type="text/javascript"> $('input[name="daterange"]').daterangepicker( { locale: { format: 'DD/MM/YYYY' }, startDate: '01/01/2017', endDate: '31/12/2017' }, function(start, end, label) { //alert("A new date range was chosen: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD')); } ); </script> <button type="submit" name="save" class="btn btn-info"> Save </button> </form> </div> </div> </div> </body> </html> |
จะ action ไปที่ไฟล์ datedb.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php print_r($_POST); echo "<br/>"; $result = $_POST['daterange']; // value ที่ส่งมา $result_explode = explode('-', $result); // ขั้นด้วย '- echo "ds: ". $result_explode[0]."<br />"; // 0 คือค่าก่อน '-' echo "de: ". $result_explode[1]."<br />"; // 1 ค่าหลัง '-' //แยกตัวแปรเพื่อเก็บเข้าฐานข้อมูลต่อไป /* $datestart = $result_explode[0]; $dateend =$result_explode[1]; */ ?> |
ผลการทำงาน
พอเราคลิกตรงช่องให้เลือกวันที่ ก็จะแสดงวันที่เลือกเริ่มต้น – ไปวันที่สิ้นสุด
และเมื่อเราคลิกที่ปุ่ม Save ก็จะ Action ไปที่สคลิป ผลการทำงานคือ
จะ print_r ออกมาแสดงก่อน จะสังเกตเห็นว่าส่งมาแค่ฟิลด์เดียวคือ daterange จากนั้นเราก็มาแยกออกเป็น 2 ตัวแปรเพื่อเก็บเข้าฐานข้อมูลต่อไป
Array ( [daterange] => 01/01/2017 – 28/02/2017 [save] => )
ds: 01/01/2017
de: 28/02/2017
ลองประยุกต์ใช้ดูนะครับ ไม่ยากๆ ^_^
cr.http://www.daterangepicker.com/
ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com และทีมงานได้ที่
ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1
fanpage : https://www.facebook.com/sornwebsites/