jQuery Datepicker Method : สอน method และ property ของ Datepicker Method, เรียน method และ property ของ Datepicker Method
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • datepicker ( options ) ใช้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ datepicker
    disabled ใช้กำหนดสถานะของการ datepicker ว่ายังใช้งานไม่ได้ ใช่หรือไม่ (default=false)
    altField ใช้กำหนด selector ที่จะเป็น alt ของการ hover เหนือวันที่ (default="")
    altFormat ใช้กำหนด รูปแบบ ของการแสดง alt เช่น "yy-mm-dd" (default="")
    autoSize ใช้กำหนดว่าจะปรับขนาดแบบ auto ในแต่ละ field หรือไม่ (default=false)
    changeMonth ใช้กำหนดว่าสามารถเปลี่ยนเดือน ได้หรือไม่ (default=false)
    changeYear ใช้กำหนดว่าสามารถเปลี่ยนปี ได้หรือไม่ (default=false)
    dateFormat ใช้กำหนดรูปแบบของวันที่ (default=mm/dd/yy)
    dayNames ใช้กำหนดชื่อวันแบบเต็ม (defatult=['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'])
    dayNamesMin ใช้กำหนดชื่อวันแบบย่อ (default=['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'])
    dayNamesShort ใช้กำหนดชื่อวันแบบสั้น (default=['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])
    defaultDate ใช้กำหนดค่าเริ่มต้นของวันที่ เช่น +7 (default=null)
    duration ใช้กำหนดระยะเวลาที่ให้ datepicker ปรากฏขึ้น โดยค่าที่เป็นไปได้ (default=normal)
    firstDay ใช้กำหนดวันที่จะให้เป็นวันเลขของสัปดาห์ โดย 0 คือ วันอาทิตย์ และต่อๆไปตามลำดับ (default=0)
    gotoCurrent ใช้กำหนดว่าเมื่อเปลี่ยนเดือนแล้ว จะยังคงให้ focus ไปที่ วันที่ ปัจจุบันอยู่ ใช่หรือไม่ (default=false)
    hideIfNoPrevNext ใช้กำหนดว่าในกรณีที่ เดือนปัจจุบันอยู่ใน minDate หรือ maxDate แล้ว ต้องการให้ซ่อนปุ่ม next หรือ previous ด้วย ใช่หรือไม่
    maxDate ใช้กำหนดวันที่สูงสุดของปฏิทิน โดยค่าที่เป็นไปได้ (default=null)
    minDate ใช้กำหนดวันที่ต่ำสุดของปฏิทิน
    monthNames ใช้กำหนดชื่อเดือนแบบเต็ม
    monthNamesShort ใช้กำหนดชื่อเดือนแบบสั้น (default=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])
    numberOfMonths ใช้กำหนดจำนวนของเดือนที่ต้องการให้แสดงผล คือต้องการแสดงออกมาทั้งหมดกี่เดือน (default=1)
    showAnim ใช้กำหนดรูปแบบการแสดงหรือซ่อน datepicker (default=show)
    stepMonths ใช้กำหนดว่าการ click next หรือ previous จะให้เปลี่ยนเดือนกี่เดือน (default=1)
    beforeShow ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อก่อนที่ datepicker จะแสดงขึ้นมา
    beforeShowDay ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อก่อนที่ day ของ datepicker จะแสดงขึ้นมา
    onChangeMonthYear ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ datepicker ถูกเปลี่ยนเดือนหรือปี
    onClose ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ datepicker ปิดตัวลง
    onSelect ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ datepicker ถูกเลือกวันที่
  • syntax :
    datepicker ( options )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ datepicker 
    โดย options ให้กำหนดค่า config ต่างๆ ให้กับการ datepicker ได้แก่
    disabled, altField, altFormat, autoSize, changeMonth, changeYear, dateFormat, dayNames,  
    dayNamesMin, dayNamesShort, defaultDate, duration, firstDay, gotoCurrent, hideIfNoPrevNext, 
    maxDate, minDate, monthNames, monthNamesShort, numberOfMonths, showAnim, stepMonths, 
    beforeShow, beforeShowDay, onChangeMonthYear, onClose, onSelect

    example :
    $("div#datepicker").datepicker ( { changeMonth: true } );
    var canChangeMonth = $("div#datepicker").datepicker ( "option", "changeMonth" ); // ใช้คืนค่าข้อมูลของ property ที่กำหนด
    $("div#datepicker").datepicker ( "option", "changeMonth", true ); // ใช้กำหนดค่าให้กับ property ที่กำหนด

  • config :
    disabled

    return type :
    boolean

    content :
    ใช้กำหนดสถานะของการ datepicker ว่ายังใช้งานไม่ได้ ใช่หรือไม่ (default=false)

    example :
    $("div#datepicker").datepicker ( { disabled: true } );

  • config :
    altField

    return type :
    selector

    content :
    ใช้กำหนด selector ที่จะเป็น alt ของการ hover เหนือวันที่ (default="")

    example :
    $("div#datepicker").datepicker ( { altField: "altDatePicker" } );

  • config :
    altFormat

    return type :
    string

    content :
    ใช้กำหนด รูปแบบ ของการแสดง alt เช่น "yy-mm-dd" (default="")
    โดย รูปแบบการจัดมีดังต่อไปนี้
    d คือวันที่ของเดือน เช่น 1,2,3,4,...,31
    dd - คือวันที่ของเดือน เช่น 01,02,03,04,...,31
    o - คือวันที่ของปี เช่น 1,2,3,4,...,366
    oo - คือวันที่ของปี เช่น 001,002,003,004,...,366
    D - คือชื่อวันแบบสั้น
    DD - คือชื่อวันแบบเด็ม
    m - คือเดือนที่ของปี เช่น 1,2,3,...,12
    mm - คือเดือนที่ของปี เช่น 01,02,03,...,12
    M - คือชื่อเดือนแบบสั้น
    MM - คือชื่อเดือนแบบเต็ม
    y - คือปีที่ เช่น 96,97,98,99
    yy - คือปีที่ เช่น 1996,1997,1998,1999

    example :
    $("div#datepicker").datepicker ( { altFormat: "yy-mm-dd" } );

  • config :
    autoSize

    return type :
    boolean

    content :
    ใช้กำหนดว่าจะปรับขนาดแบบ auto ในแต่ละ field หรือไม่ (default=false)

    example :
    $("div#datepicker").datepicker ( { autoSize: false } );

  • config :
    changeMonth

    return type :
    boolean

    content :
    ใช้กำหนดว่าสามารถเปลี่ยนเดือน ได้หรือไม่ (default=false)

    example :
    $("div#datepicker").datepicker ( { changeMonth: true } );

  • config :
    changeYear

    return type :
    boolean

    content :
    ใช้กำหนดว่าสามารถเปลี่ยนปี ได้หรือไม่ (default=false)

    example :
    $("div#datepicker").datepicker ( { changeYear: true } );

  • config :
    dateFormat

    return type :
    string

    content :
    ใช้กำหนดรูปแบบของวันที่ (default=mm/dd/yy)
    โดย รูปแบบการจัดมีดังต่อไปนี้
    d คือวันที่ของเดือน เช่น 1,2,3,4,...,31
    dd - คือวันที่ของเดือน เช่น 01,02,03,04,...,31
    o - คือวันที่ของปี เช่น 1,2,3,4,...,366
    oo - คือวันที่ของปี เช่น 001,002,003,004,...,366
    D - คือชื่อวันแบบสั้น
    DD - คือชื่อวันแบบเด็ม
    m - คือเดือนที่ของปี เช่น 1,2,3,...,12
    mm - คือเดือนที่ของปี เช่น 01,02,03,...,12
    M - คือชื่อเดือนแบบสั้น
    MM - คือชื่อเดือนแบบเต็ม
    y - คือปีที่ เช่น 96,97,98,99
    yy - คือปีที่ เช่น 1996,1997,1998,1999

    example :
    $("div#datepicker").datepicker ( { dateFormat: "yy-mm-dd" } );

  • config :
    dayNames

    return type :
    array

    content :
    ใช้กำหนดชื่อวันแบบเต็ม (defatult=['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'])

    example :
    $("div#datepicker").datepicker ( { dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] } );

  • config :
    dayNamesMin

    return type :
    array

    content :
    ใช้กำหนดชื่อวันแบบย่อ (default=['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'])

    example :
    $("div#datepicker").datepicker ( { dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] } );

  • config :
    dayNamesShort

    return type :
    array

    content :
    ใช้กำหนดชื่อวันแบบสั้น (default=['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])

    example :
    $("div#datepicker").datepicker ( { dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] } );

  • config :
    defaultDate

    return type :
    date, number, string

    content :
    ใช้กำหนดค่าเริ่มต้นของวันที่ เช่น +7 (default=null)

    example :
    $("div#datepicker").datepicker ( { defaultDate: +7 } );

  • config :
    duration

    return type :
    string, number

    content :
    ใช้กำหนดระยะเวลาที่ให้ datepicker ปรากฏขึ้น โดยค่าที่เป็นไปได้ (default=normal)
    ได้แก่ slow, normal, fast และ ค่าตัวเลขที่เป็น millisecond 

    example :
    $("div#datepicker").datepicker ( { duration: "fast" } );

  • config :
    firstDay

    return type :
    number

    content :
    ใช้กำหนดวันที่จะให้เป็นวันเลขของสัปดาห์ โดย 0 คือ วันอาทิตย์ และต่อๆไปตามลำดับ (default=0)

    example :
    $("div#datepicker").datepicker ( { firstDay: 1 } );

  • config :
    gotoCurrent

    return type :
    boolean

    content :
    ใช้กำหนดว่าเมื่อเปลี่ยนเดือนแล้ว จะยังคงให้ focus ไปที่ วันที่ ปัจจุบันอยู่ ใช่หรือไม่ (default=false)

    example :
    $("div#datepicker").datepicker ( { gotoCurrent: true } );

  • config :
    hideIfNoPrevNext

    return type :
    boolean

    content :
    ใช้กำหนดว่าในกรณีที่ เดือนปัจจุบันอยู่ใน minDate หรือ maxDate แล้ว 
    ต้องการให้ซ่อนปุ่ม next หรือ previous ด้วย ใช่หรือไม่ (default=false)

    example :
    $("div#datepicker").datepicker ( { hideIfNoPrevNext: true } );

  • config :
    maxDate

    return type :
    date, number, string

    content :
    ใช้กำหนดวันที่สูงสุดของปฏิทิน โดยค่าที่เป็นไปได้ (default=null)
    ได้แก่ 'y' for years, 'm' for months, 'w' for weeks, 'd' for days เช่น '+1m +1w' 

    example :
    $("div#datepicker").datepicker ( { maxDate: "+2y" } );

  • config :
    minDate

    return type :
    date, number, string

    content :
    ใช้กำหนดวันที่ต่ำสุดของปฏิทิน โดยค่าที่เป็นไปได้ 
    ได้แก่ 'y' for years, 'm' for months, 'w' for weeks, 'd' for days เช่น '-1m -1w' (default=null)

    example :
    $("div#datepicker").datepicker ( { minDate: "-2y" } );

  • config :
    monthNames

    return type :
    array

    content :
    ใช้กำหนดชื่อเดือนแบบเต็ม 
    (default=['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'])

    example :
    $("div#datepicker").datepicker ( { monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] } );

  • config :
    monthNamesShort

    return type :
    array

    content :
    ใช้กำหนดชื่อเดือนแบบสั้น (default=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])

    example :
    $("div#datepicker").datepicker ( { monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] } );

  • config :
    numberOfMonths

    return type :
    number, array

    content :
    ใช้กำหนดจำนวนของเดือนที่ต้องการให้แสดงผล คือต้องการแสดงออกมาทั้งหมดกี่เดือน (default=1)

    example :
    $("div#datepicker").datepicker ( { numberOfMonths: 3 } );

  • config :
    showAnim

    return type :
    string

    content :
    ใช้กำหนดรูปแบบการแสดงหรือซ่อน datepicker  (default=show)
    โดยค่าที่เป็นไปได้ เช่น blind, clip, drop, explode, fade, fold, puff, slide, scale, bounce, highlight, pulsate, shake, size, transfer เป็นต้น

    example :
    $("div#datepicker").datepicker ( { showAnim: "fadeIn" } );

  • config :
    stepMonths

    return type :
    number

    content :
    ใช้กำหนดว่าการ click next หรือ previous จะให้เปลี่ยนเดือนกี่เดือน (default=1)

    example :
    $("div#datepicker").datepicker ( { stepMonths: 12 } );

  • config :
    beforeShow

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อก่อนที่ datepicker จะแสดงขึ้นมา
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ

    example :
    $("div#datepicker").datepicker ( { beforeShow: function(event,object) { alert ( "datepicker before show" ); } } );

  • config :
    beforeShowDay

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อก่อนที่ day ของ datepicker จะแสดงขึ้นมา
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ

    example :
    $("div#datepicker").datepicker ( { beforeShowDay: function(event,object) { alert ( "datepicker before show day" ); } } );

  • config :
    onChangeMonthYear

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ datepicker ถูกเปลี่ยนเดือนหรือปี
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ

    example :
    $("div#datepicker").datepicker ( { onChangeMonthYear: function(event,object) { alert ( "datepicker on change year" ); } } );

  • config :
    onClose

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ datepicker ปิดตัวลง
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ

    example :
    $("div#datepicker").datepicker ( { onClose: function(event,object) { alert ( "datepicker on close" ); } } );

  • config :
    onSelect

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ datepicker ถูกเลือกวันที่
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ

    example :
    $("div#datepicker").datepicker ( { onSelect: function(event,object) { alert ( "datepicker on select" ); } } );

 
Share This Chapter Login with Facebook