วันพุธที่ 19 มิถุนายน พ.ศ. 2556

jQuery Datepicker แบบไทย

ต้องการ textbox ที่รับข้อความแบบวันที่ไทยแบบนี้
   

ไฟล์  http://goo.gl/IrwUKB

วิธีทำ

ใช้ 2 file จาก link ข้างบนคือ  ui.datepicker.js, ui.datepicker-th.js ใสในโฟล์เดอร์ Scripts
และ file อืน ๆ จาก jQuery-ui-1.7.2.zip  แตกไฟล์แล้วหาไฟล์ในโฟล์เดอร์ \jquery-ui-1.7.2\themes\base มาเพิ่มในโฟเดอร์ Styles ดังรูป



ใน Source


<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="Styles/ui.all.css" rel="stylesheet" type="text/css" />
    <link href="Styles/ui.datepicker.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="Scripts/ui.datepicker.js"></script>
    <script type="text/javascript" src="Scripts/ui.datepicker-th.js"></script>
  
 <script type="text/javascript">
     $(function () {
         $("#<%= txtFrom.ClientID %>").datepicker({
             showmonth: true,
             autoSize: true,
             showAnim: 'slideDown',
             duration: 'fast',
             changeMonth: true,
             changeYear: true
         });

     });

    </script>
</asp:Content>

วิธีเรียกใช้

<asp:TextBox ID="TxtFrom" runat="server"></asp:TextBox>

ข้อระวัง

jQuery UI 1.7.2 is only supported with jQuery 1.3.2

jQuery UI 1.8 RC 2+ is supported with jQuery 1.3.2 and jQuery 1.4.2


ไม่มีความคิดเห็น:

แสดงความคิดเห็น