File Manager

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<title>ทำปฏิทิน Datepicker ไทยแบบปีพุทธศักราช (พ.ศ.) (พัฒนาโดย Anassirk.Com)</title>
		<link type="text/css" href="./ทำปฏิทิน Datepicker ไทยแบบปีพุทธศักราช (พ.ศ.) (พัฒนาโดย Anassirk.Com)_files/jquery-ui-1.8.10.custom.css" rel="stylesheet">	
		<script type="text/javascript" src="./ทำปฏิทิน Datepicker ไทยแบบปีพุทธศักราช (พ.ศ.) (พัฒนาโดย Anassirk.Com)_files/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="./ทำปฏิทิน Datepicker ไทยแบบปีพุทธศักราช (พ.ศ.) (พัฒนาโดย Anassirk.Com)_files/jquery-ui-1.8.10.offset.datepicker.min.js"></script>
		<script type="text/javascript">
		  $(function () {
		    var d = new Date();
		    var toDay = d.getDate() + '/' + (d.getMonth() + 1) + '/' + (d.getFullYear() + 543);

// กรณีต้องการใส่ปฏิทินลงไปมากกว่า 1 อันต่อหน้า ก็ให้มาเพิ่ม Code ที่บรรทัดด้านล่างด้วยครับ (1 ชุด = 1 ปฏิทิน)

$("#datepicker-th").datepicker({ dateFormat: 'dd/mm/yy', isBuddhist: true, defaultDate: toDay, dayNames: ['อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสบดี', 'ศุกร์', 'เสาร์'],
              dayNamesMin: ['อา.','จ.','อ.','พ.','พฤ.','ศ.','ส.'],
              monthNames: ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'],
              monthNamesShort: ['ม.ค.','ก.พ.','มี.ค.','เม.ย.','พ.ค.','มิ.ย.','ก.ค.','ส.ค.','ก.ย.','ต.ค.','พ.ย.','ธ.ค.']});

$("#datepicker-th-2").datepicker({ changeMonth: true, changeYear: true,dateFormat: 'dd/mm/yy', isBuddhist: true, defaultDate: toDay,dayNames: ['อาทิตย์','จันทร์','อังคาร','พุธ','พฤหัสบดี','ศุกร์','เสาร์'],
              dayNamesMin: ['อา.','จ.','อ.','พ.','พฤ.','ศ.','ส.'],
              monthNames: ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'],
              monthNamesShort: ['ม.ค.','ก.พ.','มี.ค.','เม.ย.','พ.ค.','มิ.ย.','ก.ค.','ส.ค.','ก.ย.','ต.ค.','พ.ย.','ธ.ค.']});

$("#datepicker-en").datepicker({ dateFormat: 'dd/mm/yy'});

$("#inline").datepicker({ dateFormat: 'dd/mm/yy', inline: true });

});
		</script>
		<style type="text/css">

.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
			ul.test {list-style:none; line-height:30px;}
		</style>	
	</head>
	<body>

<center><h1>ทำปฏิทิน Datepicker ไทยแบบปีพุทธศักราช (พ.ศ.) (พัฒนาโดย Anassirk.Com)</h1></center>

<h2 class="demoHeaders">ตัวอย่างการทำงาน</h2>

แบบปี พ.ศ. ไม่สามารถเลือกเดือน/ปีได้ : <input type="text" size="10" id="datepicker-th" name="date0" class="hasDatepicker"><br>
    แบบปี พ.ศ. สามารถเลือกเดือน/ปีได้ : <input type="text" size="10" id="datepicker-th-2" name="date1" class="hasDatepicker"><br>
    แบบปี ค.ศ. : <input type="text" size="10" id="datepicker-en" name="date2" class="hasDatepicker"><br>
    แบบปี ค.ศ. Inline : <div id="inline" class="hasDatepicker"><div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_1424661924414.datepicker._adjustDate(&#39;#inline&#39;, -1, &#39;M&#39;);" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_1424661924414.datepicker._adjustDate(&#39;#inline&#39;, +1, &#39;M&#39;);" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">February</span>&nbsp;<span class="ui-datepicker-year">2015</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th><th><span title="Monday">Mo</span></th><th><span title="Tuesday">Tu</span></th><th><span title="Wednesday">We</span></th><th><span title="Thursday">Th</span></th><th><span title="Friday">Fr</span></th><th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">1</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">2</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">3</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">4</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">5</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">6</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">7</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">8</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">9</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">10</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">11</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">12</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">13</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">14</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">15</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">16</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">17</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">18</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">19</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">20</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">21</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">22</a></td><td class=" ui-datepicker-days-cell-over  ui-datepicker-current-day ui-datepicker-today" onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default ui-state-highlight ui-state-active ui-state-hover" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">23</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">24</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">25</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">26</a></td><td class=" " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">27</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1424661924414.datepicker._selectDay(&#39;#inline&#39;,1,2015, this);return false;"><a class="ui-state-default" href="http://www.codetukyang.com/html/technic/filedatas/datepicker_buddhist_year/index.html#">28</a></td></tr></tbody></table></div></div><br><br>

<h2>วิธีการใช้งาน</h2>
    <p>
      plugin นี้ base on Datepicker ใน jQuery UI v1.8.10 ซึ่งต้องการ jQuery 1.4+ ครับ<br>
      การใช้งานเหมือน <a href="http://jqueryui.com/demos/datepicker/">Datepicker ปกติ</a> ของ jQuery แต่มี option เพิ่มขึ้นมา 1 อันคือ <strong>"isBuddhist" </strong>           
    </p>
    <p>กรณี พ.ศ. ให้ใช้แบบนี้: <br>
    $("#datepicker-th").datepicker({ dateFormat: 'dd/mm/yy', isBuddhist: true, defaultDate: toDay });
    </p>
    <ul>
      <li>isBuddhist ให้ใส่ true</li>
      <li>ใน version นี้ <strong>ต้องใส่</strong> defaultDate ใน format วันที่พ.ศ.ด้วย ไม่เช่นนั้นปฏิทินจะแสดงผลผิดไปเป็น ค.ศ.</li>
    </ul>
    <p>กรณี ค.ศ. ให้ใช้แบบปกติเลย: <br>
    $("#datepicker-en").datepicker({ dateFormat: 'dd/mm/yy'});
    </p>
    <ul>
      <li>isBuddhist ให้ใส่ false หรือไม่ต้องใส่ก็ได้</li>
      <li>defaultDate ไม่ต้องใส่ก็ได้ หรือถ้าใส่ให้ใส่วันที่เป็นค.ศ. (ถ้าไม่ใส่ ปฏิทินจะแสดงวันที่ของวันนี้ในรูปแบบค.ศ.)</li>
      <li>ใช้แบบ inline ได้ตามปกติ</li>
    </ul>
    <p>อนึ่ง อันนี้ผมทำใช้เอง จึง test ตามที่ผมใช้เท่านั้น ที่ทำขึ้นมาเพราะ google แล้วไม่เจอ (เจอแต่คนถามหา) หากมี bug หรือข้อแนะนำใดๆเชิญ email: kriss@anassirk.com</p>

File Manager

Editing: js/testdate.asp