jQuery UI Datepicker แสดงปุ่ม Today

ในกรณีที่เราใช้งาน jQuery UI Datepicker เพื่อแสดง Calendar โดยทั่วไปจะไม่แสดงปุ่ม Today เพื่อให้สามารถเลือกวันที่ปัจจุบันได้ ซึ่งจริงๆแล้วสามารถทำได้ ดังนี้

HTML

<p>Date:<input type="text" id="datepicker" /></p>

JavaScript

<script>

    $(function () {

        var _gotoToday = $.datepicker._gotoToday;

        $.datepicker._gotoToday = function (a) {

            var target = $(a);

            var inst = this._getInst(target[0]);

            _gotoToday.call(this, a);

            $.datepicker._selectDate(a, $.datepicker._formatDate(inst, inst.selectedDay, inst.selectedMonth, inst.selectedYear));

            target.blur();

        }

        $("#datepicker").datepicker({

            showButtonPanel: true,

            dateFormat: 'dd/mm/yy'

        });

    });

</script>

เมื่อแสดงผลแล้ว DatetimePicker จะแสดงปุ่ม Today เพิ่มขึ้นมาให้สามารถเลือกวันที่ปัจจุบันได้

credit : http://www.blrf.net/blog/18/code/jquery/datepickers-today-button-problem/

เลื่อกวันที่ 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/

CSS สร้าง Gradient Background

CSS สำหรับสร้าง Gradient Background โดยสร้าง class ชือ gradient โดยรวม Code ในการใช้งานจะมี กำหนด parameter ดังนี้

Start Color - สีแรก ในตัวอย่างนี้ผมจะใช้  สีขาว (#FFFFFF) 
End Color - สีที่สอง ในตัวอย่างนี้ผมจะใช้ สีน้ำเงิน (#0A82D7)

แบบ linear

.gradient-linear {
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #0A82D7 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #0A82D7 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #0A82D7 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #0A82D7));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #0A82D7 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to top, #FFFFFF 0%, #0A82D7 100%);
}

แบบ circular

.gradient-circular{
    /* IE10 Consumer Preview */ 
    background-image: -ms-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* Opera */ 
    background-image: -o-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #FFFFFF), color-stop(1, #0A82D7));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: radial-gradient(circle farthest-corner at left top, #FFFFFF 0%, #0A82D7 100%);
}


แบบ elliptical
.gradient-elliptical{
    /* IE10 Consumer Preview */ 
    background-image: -ms-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* Opera */ 
    background-image: -o-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #FFFFFF), color-stop(1, #0A82D7));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #0A82D7 100%);
}