bootstrap - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์ Thu, 29 Dec 2022 18:43:26 +0000 th hourly 1 https://wordpress.org/?v=6.8.3 https://www.itoffside.com/wp-content/uploads/2020/04/cropped-favicon-96x96-1-32x32.png bootstrap - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com 32 32 การใช้งาน Bootstrap Datepicker เพื่อแสดงวันที่ปฏิทินให้สวยงาม https://www.itoffside.com/bootstrap-datepicker-calendar/ https://www.itoffside.com/bootstrap-datepicker-calendar/#respond Thu, 29 Dec 2022 18:31:32 +0000 https://www.itoffside.com/?p=3412 Bootstrap Datepicker Plugin Bootstrap datepicker เป็น plugin ที่ใช้สำหรับการเลือกวันที่ในแบบฟอร์มของเว็บไซต์ ซึ่งใช้งานได้ง่าย และสามารถปรับแต่งตามความต้องการได้หลากหลาย ในการเรียกใช้งาน Bootstrap datepicker คุณจะต้องมีการติดตั้ง Bootstrap และ datepicker ก่อน ซึ่งคุณสามารถดาวน์โหลดไฟล์ตัวอย่างของ Bo...

The post การใช้งาน Bootstrap Datepicker เพื่อแสดงวันที่ปฏิทินให้สวยงาม first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> Bootstrap Datepicker Plugin

Bootstrap datepicker เป็น plugin ที่ใช้สำหรับการเลือกวันที่ในแบบฟอร์มของเว็บไซต์ ซึ่งใช้งานได้ง่าย และสามารถปรับแต่งตามความต้องการได้หลากหลาย

ในการเรียกใช้งาน Bootstrap datepicker คุณจะต้องมีการติดตั้ง Bootstrap และ datepicker ก่อน ซึ่งคุณสามารถดาวน์โหลดไฟล์ตัวอย่างของ Bootstrap จากเว็บไซต์ของ Bootstrap หรือเรียกใช้งานโดยใช้ CDN ส่วน datepicker สามารถดาวน์โหลดจากเว็บไซต์ของ Bootstrap Datepicker แล้วเพิ่มไฟล์ที่ต้องการเข้าสู่โปรเจคของคุณ เช่น ไฟล์ CSS สำหรับรูปแบบ และไฟล์ JavaScript สำหรับการทำงานของ datepicker

หลังจากนั้น คุณสามารถเริ่มการเขียนโค้ดเพื่อเรียกใช้งาน datepicker โดยการเพิ่มปุ่มหรือฟิลด์ข้อมูลวันที่ลงในแบบฟอร์ม และกำหนดค่าต่างๆ

หลังจากนั้นคุณสามารถเขียน JavaScript เพื่อเรียกใช้ datepicker โดยใช้คำสั่ง .datepicker() ซึ่งจะถูกเรียกใช้กับอิลิเมนต์ที่กำหนดไว้ เช่น ปุ่มหรือฟิลด์ข้อมูลวันที่ ตัวอย่างการเขียน JavaScript ดังนี้:

$(document).ready(function() {
  $('#date').datepicker();
});

ในตัวอย่างนี้ คำสั่ง .datepicker() จะถูกเรียกใช้กับอิลิเมนต์ที่มี ID ชื่อ “date” คำสั่ง .ready จะทำหน้าที่เรียกใช้งาน datepicker เมื่อหน้าเว็บโหลดเสร็จสมบูรณ์

นอกจากนี้คุณยังสามารถกำหนดค่าต่างๆ เพื่อปรับแต่ง datepicker ได้ เช่น รูปแบบของวันที่ที่จะแสดง ช่วงของวันที ที่สามารถเลือกได้ และฟังก์ชันการเลือกวันที่ เช่น การเลือกวันที่เมื่อคลิกปุ่ม หรือการแสดงข้อความแจ้งเตือนเมื่อวันที่ถูกเลือก ซึ่งคุณสามารถกำหนดค่านี้โดยการใช้คำสั่ง .datepicker() พร้อมกับอาร์กิวเมนต์ของค่าที่ต้องการกำหนด ตัวอย่างการกำหนดค่าต่างๆ ดังนี้

$(document).ready(function() {
  $('#date').datepicker({
    format: 'dd/mm/yyyy',
    startDate: '01/01/2010',
    endDate: '31/12/2022',
    todayBtn: 'linked',
    todayHighlight: true,
    autoclose: true
  });
});

คำอธิบายในตัวอย่างนี้
format: ‘dd/mm/yyyy’ คือ กำหนดรูปแบบของวันที่เป็น ‘dd/mm/yyyy’
startDate: ’01/01/2010′, endDate: ’31/12/2022′ คือ กำหนดช่วงของวันที่ที่สามารถเลือกได้ จากวันที่ 1 มกราคม 2010 ถึง 31 ธันวาคม 2022
todayBtn: ‘linked’ คือ กำหนดปุ่ม “Today” เมื่อคลิกแล้วให้กรอกวันที่ปัจจุบันให้ในช่อง input
todayHighlight: true คือ กำหนดสีไฮไลท์วันที่ปัจจุบัน
autoclose: true คือ กำหนดให้ datepicker ปิดอัตโนมัติเมื่อเลือกวันที่แล้ว

ลองมาดูตัวอย่าง code Bootstrap Datepicker แบบเต็มๆกันครับ

HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
  <form>
    <div class="form-group">
      <label for="datepicker">เลือกวันที่:</label>
      <input type="text" class="form-control" id="date">
    </div>
  </form>
</body>
</html>

JavaScript:

$(document).ready(function() {
  $('#date').datepicker({
    format: 'mm/dd/yyyy',
    startDate: '01/01/2010',
    endDate: '12/31/2020',
    todayBtn: 'linked',
    todayHighlight: true,
    autoclose: true
  });
});

ผลลัพท์ของ bootstrap datepicker

bootstrap datepicker
bootstrap datepicker

หากคุณมีข้อสงสัยหรือคำถามสามารถถามได้ในคอมเม้นนี้

ขอบคุณครับ

The post การใช้งาน Bootstrap Datepicker เพื่อแสดงวันที่ปฏิทินให้สวยงาม first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> https://www.itoffside.com/bootstrap-datepicker-calendar/feed/ 0