Kunagorn Sirikupt: เลื่อกวันที่ Datepicker แบบ Multiple

หลายๆคนคงเคยใช้งาน Datepicker ของ jQuery UI กันมาบ้างแล้วนะครับ ซึ่งสามารถนำมาใช้งานได้ง่ายและมีประสิทธิภาพ แต่อาจจะมีข้อจำกัดในการใช้งานบางเรื่องซึ่งไม่สามารถทำได้ อย่างเช่น การเลือกวันที่แบบ Multiple ดังนั้นจึงมีการเริ่มสร้าง Extension ของ jQuery UI Datepicker เพื่อสามารถรองรับการทำงาน ในกรณที่ต้องการเลื่อกวันที่หลายๆวันได้

วันนี้เลยขอแนะนำ Extension ตัวนึงในการทำ Multiple Date Picker

เริ่มต้นให้ไปดาวน์โหลด script ที่ http://sourceforge.net/projects/multidatespickr/ จะได้ไฟล์ชือ MultiDatesPicker v1.6.1.zip เพือนำไฟล์ jquery-ui.multidatespicker.js ไปใช้งาน

ต่อมาให้ reference script ดังนี้

<!-- load jquery and jquery ui -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js">

</script>

<!-- load jquery ui -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">

</script>

<!-- load multidatespicker script and css -->
<script type="text/javascript" src="js/jquery-ui.multidatespicker.js">

</script>

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

ที่นี้ลองมาดูวิธีการใช้งา่นกันบ้างนะครับ สามารถทำได้ง่ายๆโดยการเขียน Script ดังนี้

<script>
    $(document).ready(function () {
        $('#calendar').multiDatesPicker();
    });
</script>

เท่านี้ก็สามารถสร้าง DatetimePicker แบบ Multi Select ได้แล้วนะครับ รวมถึงเราสามารถ Config เพิ่มเติมให้ DateTimePicker นี้แสดงผลในรูปแบบต่างได้ด้วย เช่น

Custom Date - การกำหนด Format และค่า Default

$('#calendar').multiDatesPicker({
    dateFormat: "yy-mm-dd",
    defaultDate: "85-02-19"
});

Pre-Select Dates - การกำหนดวันที่เริ่มต้นที่ต้องการแสดง โดยส่งข้อมูลที่ต้องการกำหนดในรูปแบบ Array ของ string หรือ Object Date

var date = new Date();
$('#calendar').multiDatesPicker({
    addDates: [date.setDate(14), date.setDate(19)]
});

Disable Dates - Disable วันที่ใน DatetimePicker

var today = new Date();
$('#calendar').multiDatesPicker({
    addDisabledDates: [date.setDate(1), date.setDate(2), date.setDate(3)]
});

Disable Calendar - Disable DatetimePicker

var today = new Date();
var tomorrow = (new Date()).setDate(today.getDate() + 1);
$('#calendar').multiDatesPicker({
    disabled: true,
    addDates: [today, tomorrow]
});

Disable Weekend - Disable วันหยุดประจำสัปดาห์

$('#calendar').multiDatesPicker({
    beforeShowDay: $.datepicker.noWeekends
});

altField - แสดงวันที่เลือกใน Control ที่กำหนด

$('#calendar').multiDatesPicker({
    altField: '#altField'
});

Set maximum Picks - กำหนดจำนวนวันที่เลือกสูงสุด

$('#calendar').multiDatesPicker({
    maxPicks: 3
});

Use pickableRange and adjustRangeToDisabled - การเลือกข้อมูลเป็นช่วง และ กำหนดช่วงที่ต้องการ Disable

var date = new Date();
$('#calendar').multiDatesPicker({
    pickableRange: 7,
    adjustRangeToDisabled: true,
    addDisabledDates: [date.setDate(10), date.setDate(15)]
});

Days Range Mode: Auto Select Range - กำหนดเลือกช่วงแบบอัตโนมัติ

$('#calendar').multiDatesPicker({
    mode: 'daysRange',
    autoselectRange: [0, 5]
});

Full year - แสดงวันที่แบบเต็ม

var today = new Date();
var y = today.getFullYear();
$('#calendar').multiDatesPicker({
    addDates: ['10/14/' + y, '02/19/' + y, '01/14/' + y, '11/16/' + y],
    numberOfMonths: [3, 4],
    showCurrentAtPos: today.getMonth()
});

credit : http://sourceforge.net/projects/multidatespickr/

:: Kunagorn Sirikup :: C# Developer

22/8/56

เลื่อกวันที่ Datepicker แบบ Multiple

1 ความคิดเห็น: