|
|
|
ขอ code เกี่ยวกับ Javascript Calendar หน่อยค่ะ พี่ ๆ คะพอมี code ของ javascript calendar มั้ยคะ |
|
|
|
|
|
|
|
ไม่เห็นในส่วนที่ต้องการเลยค่ะ
|
|
|
|
|
Date :
2010-05-10 13:58:07 |
By :
yingnoi |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
datepicker ของ jQuery มันเป็น Tool ที่เค้าสร้างไว้ให้แล้วอะครับ เอามาใช้ได้เลยโดยเข้าไปโหลดเอามาใช้เลยครับ
ส่วนที่ คุณเจ้าหญิงน้อยต้องการ สามารถกำหนดได้ที่ Option ของ datepicker ได้เลยครับ
|
|
|
|
|
Date :
2010-05-10 15:03:37 |
By :
newnakab |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
คงต้องเขียน เงื่อนไข เชค หละ ผม ว่า
|
|
|
|
|
Date :
2010-05-10 16:51:40 |
By :
deathzap |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 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);'><</a> <a href='javascript:changeCalendarControlYear(-1);'>«</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);'>»</a> <a href='javascript:changeCalendarControlMonth(1);'>></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'> </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 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
คัยพอทราบวิธีการทำให้โค้ดปฏิทินอันนี้มันคลิกย้อนหลังไม่ได้บ้างค่ะ
ขอบคุณมากค่ะ
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> $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> พุธ </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=> </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> </td>";
$week++;
}
echo"</tr>
</table>
";
?>
|
|
|
|
|
Date :
2011-12-26 14:22:56 |
By :
ไม่ไหวจะเคลียร์ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
อิอิ
http://www.electricprism.com/aeron/calendar/
นี่ครับตามความต้องการ
|
|
|
|
|
Date :
2012-03-27 11:20:22 |
By :
test |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 01
|