Javascript 如何在WordPress中向自定义页面添加日期选择器？
我有一个WordPress网站，并创建了一个自定义页面（由于连接了一个单独的数据库）。在这个自定义页面上，我正在创建一个高级搜索表单。在搜索表单上，我有一个开始日期日期选择器和一个结束日期日期选择器 出于某种明显的原因，我似乎无法让jQuery日期选择器甚至HTML日期选择器用于我的自定义表单编码。我发现了一个JavaScript版本，它在某种程度上可以工作，但问题是当你选择一个日期时，它会将第二天的日期放在文本框中。另一个问题是日历在设计上看起来很糟糕 现在这个表单上还有其他方面，但它们都正常工作。我正在使用PHP和PostgreSQL来获取研究信息。我有下面的标题和表单代码。并放置一个指向日期选择器的JavaScript代码的链接 我怎样才能使选择日期和CSS更好 标题：Javascript 如何在WordPress中向自定义页面添加日期选择器？,javascript,php,jquery,wordpress,datepicker,Javascript,Php,Jquery,Wordpress,Datepicker,我有一个WordPress网站，并创建了一个自定义页面（由于连接了一个单独的数据库）。在这个自定义页面上，我正在创建一个高级搜索表单。在搜索表单上，我有一个开始日期日期选择器和一个结束日期日期选择器 出于某种明显的原因，我似乎无法让jQuery日期选择器甚至HTML日期选择器用于我的自定义表单编码。我发现了一个JavaScript版本，它在某种程度上可以工作，但问题是当你选择一个日期时，它会将第二天的日期放在文本框中。另一个问题是日历在设计上看起来很糟糕 现在这个表单上还有其他方面，但它们都正常
<link rel="stylesheet" type="text/css" href="/VCSWeb/wp-content/themes/i-excel-child/css/datepicker.css" />
<script type="text/javascript" src="/VCSWeb/wp-content/themes/i-excel-child/js/datepicker.js">
<script type="text/javascript" src="/VCSWeb/wp-content/themes/i-excel-child/js/timepicker.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker("option","dateFormat","yy-mm-dd");
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
</script>
$（函数（）{
$（“#日期选择器”）。日期选择器（“选项”、“日期格式”、“yy-mm-dd”）；
$（“#格式”）.change（函数（）{
$（“#datepicker”）.datepicker（“option”，“dateFormat”，“this.val（））；
});
});
开始日期：
结束日期：
// Converts a date into '2016-04-29' format
function getDateString(dt) {
return dt.getFullYear() + '-' +
['01','02','03','04','05','06','07','08','09','10','11','12'][dt.getMonth()] +
'-' + ['01','02','03','04','05','06','07','08','09','10','11','12', '13', '14', '15', '16', '17', '18', '19', '20','21','22','23','23','24','25','26','27','28','29','30','31'][dt.getDate()];
}
// Converts a date into 'July 2010' format
function getMonthYearString(dt) {
return ['January','February','March','April','May','June','July',
'August','September','October','November','December'][dt.getMonth()] +
' ' + dt.getFullYear();
}
// This is the function called when the user clicks any button
function chooseDate(e) {
var targ; // Crossbrowser way to find the target (http://www.quirksmode.org/js/events_properties.html)
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug
var div = targ.parentNode.parentNode.parentNode.parentNode.parentNode; // Find the div
var idOfTextbox = div.getAttribute('datepickertextbox'); // Get the textbox id which was saved in the div
var textbox = document.getElementById(idOfTextbox); // Find the textbox now
if (targ.value=='<' || targ.value=='>' || targ.value=='<<' || targ.value=='>>') { // Do they want the change the month?
createCalendar(div, new Date(targ.getAttribute('date')));
return;
}
textbox.value = targ.getAttribute('date'); // Set the selected date
div.parentNode.removeChild(div); // Remove the dropdown box now
}
// Parse a date in d-MMM-yyyy format
function parseMyDate(d) {
if (d=="") return new Date('NotADate'); // For Safari
var a = d.split('-');
if (a.length!=2) return new Date(d); // Missing 2 dashes
var m = -1; // Now find the month
if (a[1]=='01') m=0;
if (a[1]=='02') m=1;
if (a[1]=='03') m=2;
if (a[1]=='04') m=3;
if (a[1]=='05') m=4;
if (a[1]=='06') m=5;
if (a[1]=='07') m=6;
if (a[1]=='08') m=7;
if (a[1]=='09') m=8;
if (a[1]=='10') m=9;
if (a[1]=='11') m=10;
if (a[1]=='12') m=11;
if (m<0) return new Date(d); // Couldn't find the month
var d = -1; // Now find the month
if (a[1]=='01') d=0;
if (a[1]=='02') d=1;
if (a[1]=='03') d=2;
if (a[1]=='04') d=3;
if (a[1]=='05') d=4;
if (a[1]=='06') d=5;
if (a[1]=='07') d=6;
if (a[1]=='08') d=7;
if (a[1]=='09') d=8;
if (a[1]=='10') d=9;
if (a[1]=='11') d=10;
if (a[1]=='12') d=11;
if (a[1]=='13') d=12;
if (a[1]=='14') d=13;
if (a[1]=='15') d=14;
if (a[1]=='16') d=15;
if (a[1]=='17') d=16;
if (a[1]=='18') d=17;
if (a[1]=='19') d=18;
if (a[1]=='20') d=19;
if (a[1]=='21') d=20;
if (a[1]=='22') d=21;
if (a[1]=='23') d=22;
if (a[1]=='24') d=23;
if (a[1]=='25') d=24;
if (a[1]=='26') d=25;
if (a[1]=='27') d=26;
if (a[1]=='28') d=27;
if (a[1]=='29') d=28;
if (a[1]=='30') d=29;
if (a[1]=='31') d=30;
if (d<0) return new Date(d); // Couldn't find the month
return new Date(0,0,0,0,m,a[0],d,a[2]);
}
// This creates the calendar for a given month
function createCalendar(div, month) {
var idOfTextbox = div.getAttribute('datepickertextbox'); // Get the textbox id which was saved in the div
var textbox = document.getElementById(idOfTextbox); // Find the textbox now
var tbl = document.createElement('table');
var topRow = tbl.insertRow(-1);
var td = topRow.insertCell(-1);
var lastYearBn = document.createElement('input');
lastYearBn.type='button'; // Have to immediately set the type due to IE
td.appendChild(lastYearBn);
lastYearBn.value='<<';
lastYearBn.onclick=chooseDate;
lastYearBn.setAttribute('date',new Date(month.getFullYear(),month.getMonth()-12,1,0,0,0,0).toString());
var td = topRow.insertCell(-1);
var lastMonthBn = document.createElement('input');
lastMonthBn.type='button'; // Have to immediately set the type due to IE
td.appendChild(lastMonthBn);
lastMonthBn.value='<';
lastMonthBn.onclick=chooseDate;
lastMonthBn.setAttribute('date',new Date(month.getFullYear(),month.getMonth()-1,1,0,0,0,0).toString());
var td = topRow.insertCell(-1);
td.colSpan=3;
var mon = document.createElement('input');
mon.type='text';
td.appendChild(mon);
mon.value = getMonthYearString(month);
mon.size=15;
mon.disabled='disabled';
mon.className='monthDsp';
var td = topRow.insertCell(-1);
var nextMonthBn = document.createElement('input');
nextMonthBn.type='button';
td.appendChild(nextMonthBn);
nextMonthBn.value = '>';
nextMonthBn.onclick=chooseDate;
nextMonthBn.setAttribute('date',new Date(month.getFullYear(),month.getMonth()+1,1,0,0,0,0).toString());
var td = topRow.insertCell(-1);
var nextYearBn = document.createElement('input');
nextYearBn.type='button'; // Have to immediately set the type due to IE
td.appendChild(nextYearBn);
nextYearBn.value='>>';
nextYearBn.onclick=chooseDate;
nextYearBn.setAttribute('date',new Date(month.getFullYear(),month.getMonth()+12,1,0,0,0,0).toString());
var daysRow = tbl.insertRow(-1);
daysRow.insertCell(-1).innerHTML="Mon";
daysRow.insertCell(-1).innerHTML="Tue";
daysRow.insertCell(-1).innerHTML="Wed";
daysRow.insertCell(-1).innerHTML="Thu";
daysRow.insertCell(-1).innerHTML="Fri";
daysRow.insertCell(-1).innerHTML="Sat";
daysRow.insertCell(-1).innerHTML="Sun";
daysRow.className='daysRow';
// Make the calendar
var selected = parseMyDate(textbox.value); // Try parsing the date
var today = new Date();
date = new Date(month.getFullYear(),month.getMonth(),1,0,0,0,0); // Starting at the 1st of the month
var extras = (date.getDay() + 6) % 7; // How many days of the last month do we need to include?
date.setDate(date.getDate()-extras); // Skip back to the previous monday
while (1) { // Loop for each week
var tr = tbl.insertRow(-1);
for (i=0;i<7;i++) { // Loop each day of this week
var td = tr.insertCell(-1);
var inp = document.createElement('input');
inp.type = 'button';
td.appendChild(inp);
inp.value = date.getDate();
inp.onclick = chooseDate;
inp.setAttribute('date',getDateString(date));
if (date.getMonth() != month.getMonth()) {
if (inp.className) inp.className += ' ';
inp.className+='othermonth';
}
if (date.getDate()==today.getDate() && date.getMonth()==today.getMonth() && date.getFullYear()==today.getFullYear()) {
if (inp.className) inp.className += ' ';
inp.className+='today';
}
if (!isNaN(selected) && date.getDate()==selected.getDate() && date.getMonth()==selected.getMonth() && date.getFullYear()==selected.getFullYear()) {
if (inp.className) inp.className += ' ';
inp.className+='selected';
}
date.setDate(date.getDate()+1); // Increment a day
}
// We are done if we've moved on to the next month
if (date.getMonth() != month.getMonth()) {
break;
}
}
// At the end, we do a quick insert of the newly made table, hopefully to remove any chance of screen flicker
if (div.hasChildNodes()) { // For flicking between months
div.replaceChild(tbl, div.childNodes[0]);
} else { // For creating the calendar when they first click the icon
div.appendChild(tbl);
}
}
// This is called when they click the icon next to the date inputbox
function showDatePicker(idOfTextbox) {
var textbox = document.getElementById(idOfTextbox);
// See if the date picker is already there, if so, remove it
x = textbox.parentNode.getElementsByTagName('div');
for (i=0;i<x.length;i++) {
if (x[i].getAttribute('class')=='datepickerdropdown') {
textbox.parentNode.removeChild(x[i]);
return false;
}
}
// Grab the date, or use the current date if not valid
var date = parseMyDate(textbox.value);
if (isNaN(date)) date = new Date();
// Create the box
var div = document.createElement('div');
div.className='datepickerdropdown';
div.setAttribute('datepickertextbox', idOfTextbox); // Remember the textbox id in the div
createCalendar(div, date); // Create the calendar
insertAfter(div, textbox); // Add the box to screen just after the textbox
return false;
}
// Adds an item after an existing one
function insertAfter(newItem, existingItem) {
if (existingItem.nextSibling) { // Find the next sibling, and add newItem before it
existingItem.parentNode.insertBefore(newItem, existingItem.nextSibling);
} else { // In case the existingItem has no sibling after itself, append it
existingItem.parentNode.appendChild(newItem);
}
}
function onDOMReady(fn,ctx){var ready,timer;var onStateChange=function(e){if(e&&e.type=="DOMContentLoaded"){fireDOMReady()}else if(e&&e.type=="load"){fireDOMReady()}else if(document.readyState){if((/loaded|complete/).test(document.readyState)){fireDOMReady()}else if(!!document.documentElement.doScroll){try{ready||document.documentElement.doScroll('left')}catch(e){return}fireDOMReady()}}};var fireDOMReady=function(){if(!ready){ready=true;fn.call(ctx||window);if(document.removeEventListener)document.removeEventListener("DOMContentLoaded",onStateChange,false);document.onreadystatechange=null;window.onload=null;clearInterval(timer);timer=null}};if(document.addEventListener)document.addEventListener("DOMContentLoaded",onStateChange,false);document.onreadystatechange=onStateChange;timer=setInterval(onStateChange,5);window.onload=onStateChange};
// This is called when the page loads, it searches for inputs where the class is 'datepicker'
onDOMReady(function(){
// Search for elements by class
var allElements = document.getElementsByTagName("*");
for (i=0; i<allElements.length; i++) {
var className = allElements[i].className;
if (className=='datepicker' || className.indexOf('datepicker ') != -1 || className.indexOf(' datepicker') != -1) {
// Found one! Now lets add a datepicker next to it
var a = document.createElement('a');
a.href='#';
a.className="datepickershow";
a.setAttribute('onclick','return showDatePicker("' + allElements[i].id + '")');
var img = document.createElement('img');
img.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABGdBTUEAAK/INwWK6QAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAAdtJREFUOE+Vj+9PUnEUxvPvar3xja96Q1hGEKG0ubZqbfHCNqIVA4eYLAwFp0LYD4iIJEdeRGGZwDAEcUOn9oNIvPcGgjBQfHE69/YFihe1zs59du7d83nOuR0AcOq/CgEqWbaHDqaD+clF1rLAmija6MsZ5vb0s9nB1xm168s9x67y6Y7q2TaXjo8tVKjUTv7Zt61pAkwt/UA3zFwFuxysV2BKAuYeMAnBcBaGukDdCaozaLg5sUGAiQDLA3IIDIBfAfO34N118PaDRwYvRfBcCMrTaLg2liTAOEW3NjzpBZsMpqUwKQaLCMYvwGMhjArQIDfGCTDqy3EAX47lfVTnCo3qCnOzJ8IpW6pJR2IEGHn7/bBaR5MLO8y8CtPuKO2J0nMfGdKr+5uZ4kVdhAD6N99K1bo7ynB5vHpj3AZ0NxWBbs0KAbTur8VKfTbGeFcbkc1sfnBHuA1CzTIB7js/H5SPffFW3q9sau2PDdLhxkl3X+wiQCVYf4Jt3h1Itmb8iBvEusZJd2a2CuXjxXUWU5dSnAZ5/b0QkOobgMKWzh8eMcXaXr6aYSqfcuXtbAkdbS3RfSD/MGDfvGFO9ZuSfY/ilx/GLumi57Vhgfp9W597ECJA2/a/v/4ENLpYKsDo3kgAAAAASUVORK5CYII=';
img.title='Show calendar';
a.appendChild(img);
insertAfter(a, allElements[i]);
}
}
});
//将日期转换为“2016-04-29”格式
函数getDateString（dt）{
返回dt.getFullYear（）+'-'+
[01'，'02'，'03'，'04'，'05'，'06'，'07'，'08'，'09'，'10'，'11'，'12'][dt.getMonth（）]
“-”+['01'，'02'，'03'，'04'，'05'，'06'，'07'，'08'，'09'，'10'，'11'，'12'，'13'，'14'，'15'，'16'，'17'，'18'，'19'，'20'，'21'，'22'，'23'，'23'，'24'，'25'，'26'，'27'，'28'，'29'，'30'，'31'][dt.getDate（）；
}
//将日期转换为“2010年7月”格式
函数getMonthYearString（dt）{
返回['一月'，'二月'，'三月'，'四月'，'五月'，'六月'，'七月'，
“八月”、“九月”、“十月”、“十一月”、“十二月”][dt.getMonth（）]+
''+dt.getFullYear（）；
}
//这是当用户单击任何按钮时调用的函数
函数选择器（e）{
var targ；//交叉浏览查找目标的方法(http://www.quirksmode.org/js/events_properties.html)
如果（！e）var e=window.event；
如果（e.target）target=e.target；
如果（e.src元素）target=e.src元素，则为else；
if（target.nodeType==3）target=target.parentNode；//击败Safari bug
var div=target.parentNode.parentNode.parentNode.parentNode.parentNode；//查找div
var idOfTextbox=div.getAttribute（'datepickertextbox'）；//获取保存在div中的文本框id
var textbox=document.getElementById（idOfTextbox）；//立即查找文本框
如果（目标值=“”| |目标值=“”）{//他们想在本月更改吗？
createCalendar（div，新日期（target.getAttribute（'Date'））；
返回；
}
textbox.value=target.getAttribute（'date'）；//设置所选日期
div.parentNode.removeChild（div）；//立即删除下拉框
}
//以d-MMM-yyyy格式解析日期
函数parseMyDate（d）{
如果（d==“”）返回新日期（'NotADate'）；//用于Safari
变量a=d.split（'-'）；
如果（a.length！=2）返回新日期（d）；//缺少2个破折号
var m=-1；//现在查找月份
如果（a[1]=='01'）m=0；
如果（a[1]=='02'）m=1；
如果（a[1]=='03'）m=2；
如果（a[1]=='04'）m=3；
如果（a[1]=='05'）m=4；
如果（a[1]=='06'）m=5；
如果（a[1]=='07'）m=6；
如果（a[1]=='08'）m=7；
如果（a[1]=='09'）m=8；
如果（a[1]='10'）m=9；
如果（a[1]=='11'）m=10；
如果（a[1]=='12'）m=11；
如果（mI）复制了您的代码并可以重现问题。我删除了$（“#格式”）.change（function（）{
handler要简化一些东西，但它仍然显示错误的日期。那个日期选择器是从哪里来的？对我来说，它看起来像是个bug-或者可能是时区配置问题？你考虑过jQuery UI日期选择器吗？我在我的自定义wordpress模板中尝试过jQuery UI日期选择器，但它不想在单击时拉出日历它，特别是在FireFox中出于某种奇怪的原因。多次尝试使用jQuery UI Datepicker，但似乎不想在自定义wordpress模板中工作。是否可以修复此代码？我复制了您的代码并可以重现此问题。我删除了$（“#格式”）。更改（函数（）{
handler要简化一些东西，但它仍然显示错误的日期。那个日期选择器是从哪里来的？对我来说，它看起来像是个bug-或者可能是时区配置问题？你考虑过jQuery UI日期选择器吗？我在我的自定义wordpress模板中尝试过jQuery UI日期选择器，但它不想在单击时拉出日历它，特别是在FireFox中，由于一些奇怪的原因。多次尝试使用jQuery UI Datepicker，但似乎不想在自定义wordpress模板中工作。是否可以修复此代码？
// Converts a date into '2016-04-29' format
function getDateString(dt) {
return dt.getFullYear() + '-' +
['01','02','03','04','05','06','07','08','09','10','11','12'][dt.getMonth()] +
'-' + ['01','02','03','04','05','06','07','08','09','10','11','12', '13', '14', '15', '16', '17', '18', '19', '20','21','22','23','23','24','25','26','27','28','29','30','31'][dt.getDate()];
}
// Converts a date into 'July 2010' format
function getMonthYearString(dt) {
return ['January','February','March','April','May','June','July',
'August','September','October','November','December'][dt.getMonth()] +
' ' + dt.getFullYear();
}
// This is the function called when the user clicks any button
function chooseDate(e) {
var targ; // Crossbrowser way to find the target (http://www.quirksmode.org/js/events_properties.html)
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug
var div = targ.parentNode.parentNode.parentNode.parentNode.parentNode; // Find the div
var idOfTextbox = div.getAttribute('datepickertextbox'); // Get the textbox id which was saved in the div
var textbox = document.getElementById(idOfTextbox); // Find the textbox now
if (targ.value=='<' || targ.value=='>' || targ.value=='<<' || targ.value=='>>') { // Do they want the change the month?
createCalendar(div, new Date(targ.getAttribute('date')));
return;
}
textbox.value = targ.getAttribute('date'); // Set the selected date
div.parentNode.removeChild(div); // Remove the dropdown box now
}
// Parse a date in d-MMM-yyyy format
function parseMyDate(d) {
if (d=="") return new Date('NotADate'); // For Safari
var a = d.split('-');
if (a.length!=2) return new Date(d); // Missing 2 dashes
var m = -1; // Now find the month
if (a[1]=='01') m=0;
if (a[1]=='02') m=1;
if (a[1]=='03') m=2;
if (a[1]=='04') m=3;
if (a[1]=='05') m=4;
if (a[1]=='06') m=5;
if (a[1]=='07') m=6;
if (a[1]=='08') m=7;
if (a[1]=='09') m=8;
if (a[1]=='10') m=9;
if (a[1]=='11') m=10;
if (a[1]=='12') m=11;
if (m<0) return new Date(d); // Couldn't find the month
var d = -1; // Now find the month
if (a[1]=='01') d=0;
if (a[1]=='02') d=1;
if (a[1]=='03') d=2;
if (a[1]=='04') d=3;
if (a[1]=='05') d=4;
if (a[1]=='06') d=5;
if (a[1]=='07') d=6;
if (a[1]=='08') d=7;
if (a[1]=='09') d=8;
if (a[1]=='10') d=9;
if (a[1]=='11') d=10;
if (a[1]=='12') d=11;
if (a[1]=='13') d=12;
if (a[1]=='14') d=13;
if (a[1]=='15') d=14;
if (a[1]=='16') d=15;
if (a[1]=='17') d=16;
if (a[1]=='18') d=17;
if (a[1]=='19') d=18;
if (a[1]=='20') d=19;
if (a[1]=='21') d=20;
if (a[1]=='22') d=21;
if (a[1]=='23') d=22;
if (a[1]=='24') d=23;
if (a[1]=='25') d=24;
if (a[1]=='26') d=25;
if (a[1]=='27') d=26;
if (a[1]=='28') d=27;
if (a[1]=='29') d=28;
if (a[1]=='30') d=29;
if (a[1]=='31') d=30;
if (d<0) return new Date(d); // Couldn't find the month
return new Date(0,0,0,0,m,a[0],d,a[2]);
}
// This creates the calendar for a given month
function createCalendar(div, month) {
var idOfTextbox = div.getAttribute('datepickertextbox'); // Get the textbox id which was saved in the div
var textbox = document.getElementById(idOfTextbox); // Find the textbox now
var tbl = document.createElement('table');
var topRow = tbl.insertRow(-1);
var td = topRow.insertCell(-1);
var lastYearBn = document.createElement('input');
lastYearBn.type='button'; // Have to immediately set the type due to IE
td.appendChild(lastYearBn);
lastYearBn.value='<<';
lastYearBn.onclick=chooseDate;
lastYearBn.setAttribute('date',new Date(month.getFullYear(),month.getMonth()-12,1,0,0,0,0).toString());
var td = topRow.insertCell(-1);
var lastMonthBn = document.createElement('input');
lastMonthBn.type='button'; // Have to immediately set the type due to IE
td.appendChild(lastMonthBn);
lastMonthBn.value='<';
lastMonthBn.onclick=chooseDate;
lastMonthBn.setAttribute('date',new Date(month.getFullYear(),month.getMonth()-1,1,0,0,0,0).toString());
var td = topRow.insertCell(-1);
td.colSpan=3;
var mon = document.createElement('input');
mon.type='text';
td.appendChild(mon);
mon.value = getMonthYearString(month);
mon.size=15;
mon.disabled='disabled';
mon.className='monthDsp';
var td = topRow.insertCell(-1);
var nextMonthBn = document.createElement('input');
nextMonthBn.type='button';
td.appendChild(nextMonthBn);
nextMonthBn.value = '>';
nextMonthBn.onclick=chooseDate;
nextMonthBn.setAttribute('date',new Date(month.getFullYear(),month.getMonth()+1,1,0,0,0,0).toString());
var td = topRow.insertCell(-1);
var nextYearBn = document.createElement('input');
nextYearBn.type='button'; // Have to immediately set the type due to IE
td.appendChild(nextYearBn);
nextYearBn.value='>>';
nextYearBn.onclick=chooseDate;
nextYearBn.setAttribute('date',new Date(month.getFullYear(),month.getMonth()+12,1,0,0,0,0).toString());
var daysRow = tbl.insertRow(-1);
daysRow.insertCell(-1).innerHTML="Mon";
daysRow.insertCell(-1).innerHTML="Tue";
daysRow.insertCell(-1).innerHTML="Wed";
daysRow.insertCell(-1).innerHTML="Thu";
daysRow.insertCell(-1).innerHTML="Fri";
daysRow.insertCell(-1).innerHTML="Sat";
daysRow.insertCell(-1).innerHTML="Sun";
daysRow.className='daysRow';
// Make the calendar
var selected = parseMyDate(textbox.value); // Try parsing the date
var today = new Date();
date = new Date(month.getFullYear(),month.getMonth(),1,0,0,0,0); // Starting at the 1st of the month
var extras = (date.getDay() + 6) % 7; // How many days of the last month do we need to include?
date.setDate(date.getDate()-extras); // Skip back to the previous monday
while (1) { // Loop for each week
var tr = tbl.insertRow(-1);
for (i=0;i<7;i++) { // Loop each day of this week
var td = tr.insertCell(-1);
var inp = document.createElement('input');
inp.type = 'button';
td.appendChild(inp);
inp.value = date.getDate();
inp.onclick = chooseDate;
inp.setAttribute('date',getDateString(date));
if (date.getMonth() != month.getMonth()) {
if (inp.className) inp.className += ' ';
inp.className+='othermonth';
}
if (date.getDate()==today.getDate() && date.getMonth()==today.getMonth() && date.getFullYear()==today.getFullYear()) {
if (inp.className) inp.className += ' ';
inp.className+='today';
}
if (!isNaN(selected) && date.getDate()==selected.getDate() && date.getMonth()==selected.getMonth() && date.getFullYear()==selected.getFullYear()) {
if (inp.className) inp.className += ' ';
inp.className+='selected';
}
date.setDate(date.getDate()+1); // Increment a day
}
// We are done if we've moved on to the next month
if (date.getMonth() != month.getMonth()) {
break;
}
}
// At the end, we do a quick insert of the newly made table, hopefully to remove any chance of screen flicker
if (div.hasChildNodes()) { // For flicking between months
div.replaceChild(tbl, div.childNodes[0]);
} else { // For creating the calendar when they first click the icon
div.appendChild(tbl);
}
}
// This is called when they click the icon next to the date inputbox
function showDatePicker(idOfTextbox) {
var textbox = document.getElementById(idOfTextbox);
// See if the date picker is already there, if so, remove it
x = textbox.parentNode.getElementsByTagName('div');
for (i=0;i<x.length;i++) {
if (x[i].getAttribute('class')=='datepickerdropdown') {
textbox.parentNode.removeChild(x[i]);
return false;
}
}
// Grab the date, or use the current date if not valid
var date = parseMyDate(textbox.value);
if (isNaN(date)) date = new Date();
// Create the box
var div = document.createElement('div');
div.className='datepickerdropdown';
div.setAttribute('datepickertextbox', idOfTextbox); // Remember the textbox id in the div
createCalendar(div, date); // Create the calendar
insertAfter(div, textbox); // Add the box to screen just after the textbox
return false;
}
// Adds an item after an existing one
function insertAfter(newItem, existingItem) {
if (existingItem.nextSibling) { // Find the next sibling, and add newItem before it
existingItem.parentNode.insertBefore(newItem, existingItem.nextSibling);
} else { // In case the existingItem has no sibling after itself, append it
existingItem.parentNode.appendChild(newItem);
}
}
function onDOMReady(fn,ctx){var ready,timer;var onStateChange=function(e){if(e&&e.type=="DOMContentLoaded"){fireDOMReady()}else if(e&&e.type=="load"){fireDOMReady()}else if(document.readyState){if((/loaded|complete/).test(document.readyState)){fireDOMReady()}else if(!!document.documentElement.doScroll){try{ready||document.documentElement.doScroll('left')}catch(e){return}fireDOMReady()}}};var fireDOMReady=function(){if(!ready){ready=true;fn.call(ctx||window);if(document.removeEventListener)document.removeEventListener("DOMContentLoaded",onStateChange,false);document.onreadystatechange=null;window.onload=null;clearInterval(timer);timer=null}};if(document.addEventListener)document.addEventListener("DOMContentLoaded",onStateChange,false);document.onreadystatechange=onStateChange;timer=setInterval(onStateChange,5);window.onload=onStateChange};
// This is called when the page loads, it searches for inputs where the class is 'datepicker'
onDOMReady(function(){
// Search for elements by class
var allElements = document.getElementsByTagName("*");
for (i=0; i<allElements.length; i++) {
var className = allElements[i].className;
if (className=='datepicker' || className.indexOf('datepicker ') != -1 || className.indexOf(' datepicker') != -1) {
// Found one! Now lets add a datepicker next to it
var a = document.createElement('a');
a.href='#';
a.className="datepickershow";
a.setAttribute('onclick','return showDatePicker("' + allElements[i].id + '")');
var img = document.createElement('img');
img.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABGdBTUEAAK/INwWK6QAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAAdtJREFUOE+Vj+9PUnEUxvPvar3xja96Q1hGEKG0ubZqbfHCNqIVA4eYLAwFp0LYD4iIJEdeRGGZwDAEcUOn9oNIvPcGgjBQfHE69/YFihe1zs59du7d83nOuR0AcOq/CgEqWbaHDqaD+clF1rLAmija6MsZ5vb0s9nB1xm168s9x67y6Y7q2TaXjo8tVKjUTv7Zt61pAkwt/UA3zFwFuxysV2BKAuYeMAnBcBaGukDdCaozaLg5sUGAiQDLA3IIDIBfAfO34N118PaDRwYvRfBcCMrTaLg2liTAOEW3NjzpBZsMpqUwKQaLCMYvwGMhjArQIDfGCTDqy3EAX47lfVTnCo3qCnOzJ8IpW6pJR2IEGHn7/bBaR5MLO8y8CtPuKO2J0nMfGdKr+5uZ4kVdhAD6N99K1bo7ynB5vHpj3AZ0NxWBbs0KAbTur8VKfTbGeFcbkc1sfnBHuA1CzTIB7js/H5SPffFW3q9sau2PDdLhxkl3X+wiQCVYf4Jt3h1Itmb8iBvEusZJd2a2CuXjxXUWU5dSnAZ5/b0QkOobgMKWzh8eMcXaXr6aYSqfcuXtbAkdbS3RfSD/MGDfvGFO9ZuSfY/ilx/GLumi57Vhgfp9W597ECJA2/a/v/4ENLpYKsDo3kgAAAAASUVORK5CYII=';
img.title='Show calendar';
a.appendChild(img);
insertAfter(a, allElements[i]);
}
}
});