Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > ขอ code เกี่ยวกับ Javascript Calendar หน่อยค่ะ พี่ ๆ คะพอมี code ของ javascript calendar มั้ยคะ

[PHP] ขอ code เกี่ยวกับ Javascript Calendar หน่อยค่ะ พี่ ๆ คะพอมี code ของ javascript calendar มั้ยคะ

เริ่มหัวข้อใหม่

หวานซะ

โพสกระทู้ ( 512 )
บทความ ( 0 )

พี่ ๆ คะพอมี code ของ javascript calendar มั้ยคะ ที่ใช้สำหรับในการจองห้องพัก

หาใน google ไม่เจอเลย

เอารูปแบบตามรูปอ่ะค่ะ จากวันที่ (สมมุติ 10/5/2010) ถ้าเลือก ถึงวันที่ วันที่อยู่ก่อนวันที่ 10 จะไม่สามารถเลือกได้และกลายเป็นสีเทาทันที

พอมีมั้ยคะ

datepickup

Tag : - - - -

Date : 2010-05-10 09:42:43

By : yingnoi

View : 6321

Reply : 7

No. 1

Nueng

โพสกระทู้ ( 356 )
บทความ ( 0 )

หาๆดูในนี้นะครับมีให้โหลดใช้ง่ายด้วย
http://jqueryui.com/demos/datepicker/

Date : 2010-05-10 10:48:17

By : aknueng

No. 2

หวานซะ

โพสกระทู้ ( 512 )
บทความ ( 0 )

ไม่เห็นในส่วนที่ต้องการเลยค่ะ

Date : 2010-05-10 13:58:07

By : yingnoi

No. 3

Bug Maker

โพสกระทู้ ( 42 )
บทความ ( 0 )

datepicker ของ jQuery มันเป็น Tool ที่เค้าสร้างไว้ให้แล้วอะครับ เอามาใช้ได้เลยโดยเข้าไปโหลดเอามาใช้เลยครับ

ส่วนที่ คุณเจ้าหญิงน้อยต้องการ สามารถกำหนดได้ที่ Option ของ datepicker ได้เลยครับ

Date : 2010-05-10 15:03:37

By : newnakab

No. 4

Wanted

โพสกระทู้ ( 333 )
บทความ ( 0 )

คงต้องเขียน เงื่อนไข เชค หละ ผม ว่า

Date : 2010-05-10 16:51:40

By : deathzap

No. 5

โพสกระทู้ ( 564 )
บทความ ( 0 )

// calendar.js
 
function positionInfo(object) {
 
  var p_elm = object;
 
  this.getElementLeft = getElementLeft;
  function getElementLeft() {
    var x = 0;
    var elm;
    if(typeof(p_elm) == "object"){
      elm = p_elm;
    } else {
      elm = document.getElementById(p_elm);
    }
    while (elm != null) {
      x+= elm.offsetLeft;
      elm = elm.offsetParent;
    }
    return parseInt(x);
  }
 
  this.getElementWidth = getElementWidth;
  function getElementWidth(){
    var elm;
    if(typeof(p_elm) == "object"){
      elm = p_elm;
    } else {
      elm = document.getElementById(p_elm);
    }
    return parseInt(elm.offsetWidth);
  }
 
  this.getElementRight = getElementRight;
  function getElementRight(){
    return getElementLeft(p_elm) + getElementWidth(p_elm);
  }
 
  this.getElementTop = getElementTop;
  function getElementTop() {
    var y = 0;
    var elm;
    if(typeof(p_elm) == "object"){
      elm = p_elm;
    } else {
      elm = document.getElementById(p_elm);
    }
    while (elm != null) {
      y+= elm.offsetTop;
      elm = elm.offsetParent;
    }
    return parseInt(y);
  }
 
  this.getElementHeight = getElementHeight;
  function getElementHeight(){
    var elm;
    if(typeof(p_elm) == "object"){
      elm = p_elm;
    } else {
      elm = document.getElementById(p_elm);
    }
    return parseInt(elm.offsetHeight);
  }
 
  this.getElementBottom = getElementBottom;
  function getElementBottom(){
    return getElementTop(p_elm) + getElementHeight(p_elm);
  }
}
 
function CalendarControl() {
 
  var calendarId = 'CalendarControl';
  var currentYear = 0;
  var currentMonth = 0;
  var currentDay = 0;
 
  var selectedYear = 0;
  var selectedMonth = 0;
  var selectedDay = 0;
 
  var months = ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฏาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'];
  var dateField = null;
 
  function getProperty(p_property){
    var p_elm = calendarId;
    var elm = null;
 
    if(typeof(p_elm) == "object"){
      elm = p_elm;
    } else {
      elm = document.getElementById(p_elm);
    }
    if (elm != null){
      if(elm.style){
        elm = elm.style;
        if(elm[p_property]){
          return elm[p_property];
        } else {
          return null;
        }
      } else {
        return null;
      }
    }
  }
 
  function setElementProperty(p_property, p_value, p_elmId){
    var p_elm = p_elmId;
    var elm = null;
 
    if(typeof(p_elm) == "object"){
      elm = p_elm;
    } else {
      elm = document.getElementById(p_elm);
    }
    if((elm != null) && (elm.style != null)){
      elm = elm.style;
      elm[ p_property ] = p_value;
    }
  }
 
  function setProperty(p_property, p_value) {
    setElementProperty(p_property, p_value, calendarId);
  }
 
  function getDaysInMonth(year, month) {
    return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
  }
 
  function getDayOfWeek(year, month, day) {
    var date = new Date(year,month-1,day)
    return date.getDay();
  }
 
  this.clearDate = clearDate;
  function clearDate() {
    dateField.value = '';
    hide();
  }
 
  this.setDate = setDate;
  function setDate(year, month, day) {
    if (dateField) {
      if (month < 10) {month = "0" + month;}
      if (day < 10) {day = "0" + day;}
 
      var dateString = month+"-"+day+"-"+year;
      dateField.value = dateString;
      hide();
    }
    return;
  }
 
  this.changeMonth = changeMonth;
  function changeMonth(change) {
    currentMonth += change;
    currentDay = 0;
    if(currentMonth > 12) {
      currentMonth = 1;
      currentYear++;
    } else if(currentMonth < 1) {
      currentMonth = 12;
      currentYear--;
    }
 
    calendar = document.getElementById(calendarId);
    calendar.innerHTML = calendarDrawTable();
  }
 
  this.changeYear = changeYear;
  function changeYear(change) {
    currentYear += change;
    currentDay = 0;
    calendar = document.getElementById(calendarId);
    calendar.innerHTML = calendarDrawTable();
  }
 
  function getCurrentYear() {
    var year = new Date().getYear();
    if(year < 1900) year += 1900;
    return year;
  }
 
  function getCurrentMonth() {
    return new Date().getMonth() + 1;
  } 
 
  function getCurrentDay() {
    return new Date().getDate();
  }
 
  function calendarDrawTable() {
 
    var dayOfMonth = 1;
    var validDay = 0;
    var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
    var daysInMonth = getDaysInMonth(currentYear, currentMonth);
    var css_class = null; //CSS class for each day
 
    var table = "<table cellspacing='0' cellpadding='0' border='0'>";
    table = table + "<tr class='header'>";
    table = table + "  <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'>&lt;</a> <a href='javascript:changeCalendarControlYear(-1);'>&laquo;</a></td>";
    table = table + "  <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
    table = table + "  <td colspan='2' class='next'><a href='javascript:changeCalendarControlYear(1);'>&raquo;</a> <a href='javascript:changeCalendarControlMonth(1);'>&gt;</a></td>";
    table = table + "</tr>";
    table = table + "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";
 
    for(var week=0; week < 6; week++) {
      table = table + "<tr>";
      for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
        if(week == 0 && startDayOfWeek == dayOfWeek) {
          validDay = 1;
        } else if (validDay == 1 && dayOfMonth > daysInMonth) {
          validDay = 0;
        }
 
        if(validDay) {
          if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {
            css_class = 'current';
          } else if (dayOfWeek == 0 || dayOfWeek == 6) {
            css_class = 'weekend';
          } else {
            css_class = 'weekday';
          }
 
          table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";
          dayOfMonth++;
        } else {
          table = table + "<td class='empty'>&nbsp;</td>";
        }
      }
      table = table + "</tr>";
    }
 
    table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendarControl();'>Clear</a> | <a href='javascript:hideCalendarControl();'>Close</a></td></tr>";
    table = table + "</table>";
 
    return table;
  }
 
  this.show = show;
  function show(field) {
    can_hide = 0;
   
    // If the calendar is visible and associated with
    // this field do not do anything.
    if (dateField == field) {
      return;
    } else {
      dateField = field;
    }
 
    if(dateField) {
      try {
        var dateString = new String(dateField.value);
        var dateParts = dateString.split("-");
         
        selectedMonth = parseInt(dateParts[0],10);
        selectedDay = parseInt(dateParts[1],10);
        selectedYear = parseInt(dateParts[2],10);
      } catch(e) {}
    }
 
    if (!(selectedYear && selectedMonth && selectedDay)) {
      selectedMonth = getCurrentMonth();
      selectedDay = getCurrentDay();
      selectedYear = getCurrentYear();
    }
 
    currentMonth = selectedMonth;
    currentDay = selectedDay;
    currentYear = selectedYear;
 
    if(document.getElementById){
 
      calendar = document.getElementById(calendarId);
      calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);
 
      setProperty('display', 'block');
 
      var fieldPos = new positionInfo(dateField);
      var calendarPos = new positionInfo(calendarId);
 
      var x = fieldPos.getElementLeft();
      var y = fieldPos.getElementBottom();
 
      setProperty('left', x + "px");
      setProperty('top', y + "px");
  
      if (document.all) {
        setElementProperty('display', 'block', 'CalendarControlIFrame');
        setElementProperty('left', x + "px", 'CalendarControlIFrame');
        setElementProperty('top', y + "px", 'CalendarControlIFrame');
        setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');
        setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');
      }
    }
  }
 
  this.hide = hide;
  function hide() {
    if(dateField) {
      setProperty('display', 'none');
      setElementProperty('display', 'none', 'CalendarControlIFrame');
      dateField = null;
    }
  }
 
  this.visible = visible;
  function visible() {
    return dateField
  }
 
  this.can_hide = can_hide;
  var can_hide = 0;
}
 
var calendarControl = new CalendarControl();
 
function showCalendarControl(textField) {
  // textField.onblur = hideCalendarControl;
  calendarControl.show(textField);
}
 
function clearCalendarControl() {
  calendarControl.clearDate();
}
 
function hideCalendarControl() {
  if (calendarControl.visible()) {
    calendarControl.hide();
  }
}
 
function setCalendarControlDate(year, month, day) {
  calendarControl.setDate(year, month, day);
}
 
function changeCalendarControlYear(change) {
  calendarControl.changeYear(change);
}
 
function changeCalendarControlMonth(change) {
  calendarControl.changeMonth(change);
}
 
document.write("<iframe id='CalendarControlIFrame' src='javascript:;' frameBorder='0' scrolling='no'></iframe>");
document.write("<div id='CalendarControl'></div>");

//////////////////////////////////////////////////////////////////////////////////////////////////

//calendar.css
 
#CalendarControlIFrame {
  display: none;
  left: 0px;
  position: absolute;
  top: 0px;
  height: 250px;
  width: 250px;
  z-index: 99;
}
 
#CalendarControl {
  position:absolute;
  background-color:#FFF;
  margin:0;
  padding:0;
  display:none;
  z-index: 100;
}
 
#CalendarControl table {
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 8pt;
  border-left: 1px solid #336;
  border-right: 1px solid #336;
}
 
#CalendarControl th {
  font-weight: normal;
}
 
#CalendarControl th a {
  font-weight: normal;
  text-decoration: none;
  color: #FFF;
  padding: 1px;
}
 
#CalendarControl td {
  text-align: center;
}
 
#CalendarControl .header {
  background-color: #336;
}
 
#CalendarControl .weekday {
  background-color: #DDD;
  color: #000;
}
 
#CalendarControl .weekend {
  background-color: #FFC;
  color: #000;
}
 
#CalendarControl .current {
  border: 1px solid #339;
  background-color: #336;
  color: #FFF;
}
 
#CalendarControl .weekday,
#CalendarControl .weekend,
#CalendarControl .current {
  display: block;
  text-decoration: none;
  border: 1px solid #FFF;
  width: 2em;
}
 
#CalendarControl .weekday:hover,
#CalendarControl .weekend:hover,
#CalendarControl .current:hover {
  color: #FFF;
  background-color: #336;
  border: 1px solid #999;
}
 
#CalendarControl .previous {
  text-align: left;
}
 
#CalendarControl .next {
  text-align: right;
}
 
#CalendarControl .previous,
#CalendarControl .next {
  padding: 1px 3px 1px 3px;
  font-size: 1.4em;
}
 
#CalendarControl .previous a,
#CalendarControl .next a {
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
}
 
#CalendarControl .title {
  text-align: center;
  font-weight: bold;
  color: #FFF;
}
 
#CalendarControl .empty {
  background-color: #CCC;
  border: 1px solid #FFF;
}

วิธีใช้

<html>
<head>
    <link rel="stylesheet" type="text/css" href="calendar.css"/>
    <script type="text/javascript" src="calendar.js"></script>
</head>
<body> 
   
  <input type="text" onfocus="showCalendarControl(this);" style="cursor:pointer;"/>
 
 
</body>
</html>

Date : 2010-05-10 17:00:29

By : kalamell

No. 6

Guest

คัยพอทราบวิธีการทำให้โค้ดปฏิทินอันนี้มันคลิกย้อนหลังไม่ได้บ้างค่ะ
ขอบคุณมากค่ะ

Code (PHP)

<?
  $mon=$_POST['mon'];
  $a = date(j); // , 1 to 31 
  $b = date(a); // am,
  $c = date(A); // AM,
  $d = date(B); // Swatch Internet time 000 -999
  $e = date(d); // , 01 to 31
  $f = date(D); // , sat 
  $g = date(F); // , November 
  $h = date(g); // , 1 through 12
  $hh = date(G); // , 0 through 23
  $i = date(h); // , 01 through 12 
  $j = date(H); // , 00 through 23 
  $k = date(i); // , 00 to 59 
  $l = date(I); // 0, 1 if Daylight Savings Time, 0 otherwise. 
  $m = date(l); // , Sunday through Saturday
  $n = date(L); // 0, 1 if it is a leap year, 0 otherwise.
  $o = date(m); // , 01 through 12
  $p = date(M); // , Jan through Dec
  $q = date(n); // , 1 through 12
  $r = date(o); // Example: +0200 
  $s = date(r); // Example: Thu, 21 Dec 2000 16:01:07 +0200
  $t = date(s); // 00 through 59
  $u = date(S); // st, nd, rd or th. Works well with j 
  $v = date(t); // 28 through 31
  $w = date(T); // time zoneseting Examples: EST, MDT ...
  $x = date(u); // See also time()
  $y = date(w); // 0 (for Sunday) through 6 (for Saturday)
  $z = date(W); // Example: 42 (the 42nd week in the year)
  $aa = date(y); // Examples: 99 or 03
  $bb = date(Y); // Examples: 1999 or 2003
  $cc = date(z); 
  $dd = date(Z); 
if(!$mon){
  $mon = $o ;
}else{
  $mon = $mon ;
}
if(!$year){
  $year = $bb ;
}else{
  $year = $year;
}
  $firstday = mktime(0,0,0,$mon,1,$bb);
  $firstdays = date('w',$firstday); 
  $lastdays = date('t',$firstday); 
  $year_view = date('Y',$firstday); 
  $mon_view = date('m',$firstday); 
echo"
<script>
function d_s( su , mnp){ 
if(mnp == 'm'){
document.dat_form.mon.value = su - 1 ;
}else{
document.dat_form.mon.value = su + 1 ;
}
document.dat_form.submit();
}
</script>
<form name=dat_form action='$PHP_SELF' method=post>
<input type=hidden name=mon value=''>
<table border=2 width=600 cellpadding=2 cellspacing=-2 bordercolor=#42C1FF>
<tr bgcolor=#FFCCCC>
<td colspan=7 align=center><a href=\"javascript:d_s($mon,'m')\"> Last Month.<< </a>&nbsp;$year_view - $mon_view <a href=\"javascript:d_s($mon,'p')\" > Next Month.>></a></td>
</tr>
</form>
<tr align=center><td><font Tahoma size=3 color=#FF0000>อาทิตย์</a></td><td><font Tahoma size=3color=#FFFF00>จันทร์</a></td><td><font Tahoma size=3 color=#FF66CC>อังคาร</a></td><td><font Tahoma size=3 color=#00CC00> &nbsp;&nbsp;พุธ&nbsp;&nbsp; </a></td><td><font Tahoma size=3 color=#FF6600>พฤหัสฯ</a></td><td><font Tahoma size=3 color=#00CCFF>ศุกร์</a></td><td><font Tahoma size=3 color=#6600CC>เสาร์</font></td></tr>
<tr align=right>";
//// 
for($i = 0; $i < 7 ; $i++){
if($firstdays == $i){
break;
}
else{
echo"<td width8=>&nbsp;</td>";
}
$week++; 
}
for($i=1; $i<=$lastdays ;$i++){
if($week % 7 == 0){
echo"</tr><tr align=right>";
}
if($a == $i){ 
$bgcolor = "bgcolor=#FFCCCC";
}else{
$bgcolor = 'bgcolor=white';
} 
if($week%7==0){ 
echo"<td $bgcolor><font Tahoma size=3 color=white><a href='Reservation_Select.php?day=$i&mon=$mon&year=$year'>$i</a></font></td>";
}else if($week%7==6){ 
echo"<td $bgcolor><font Tahoma size=3 color=white><a href='Reservation_Select.php?day=$i&mon=$mon&year=$year'>$i</a></font></td>";
}else{ // 
echo"<td $bgcolor><font Tahoma size=3><a href='Reservation_Select.php?day=$i&mon=$mon&year=$year'>$i</a></font></td>";
}
$week++;
}
while($week%7!=0){
echo"<td>&nbsp;</td>";
$week++;
}
echo"</tr>
</table>
";
?>

Date : 2011-12-26 14:22:56

By : ไม่ไหวจะเคลียร์

No. 7

Guest

อิอิ
http://www.electricprism.com/aeron/calendar/
นี่ครับตามความต้องการ

Date : 2012-03-27 11:20:22

By : test

ค้นหาข้อมูล

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

Re : ขอ code เกี่ยวกับ Javascript Calendar หน่อยค่ะ พี่ ๆ คะพอมี code ของ javascript calendar มั้ยคะ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Registered : 109,038

document.write("<font color=996600>[PHP]</font>"); [PHP] ขอ code เกี่ยวกับ Javascript Calendar หน่อยค่ะ พี่ ๆ คะพอมี code ของ javascript calendar มั้ยคะ