Здравствуйте!
На днях я нашел сайт с хорошим примером создания каледаря
Календарик этот мне подходит на все 100, т.к. выбрал дату - значение занеслось в input. Но есть одна беда - календарь отображает и вставляет дату с 1 в начале. Например 109:11:14. Как видите единица тут лишняя. Так вот как год сделать без единицы в начале? В идеале бы получать дату в формате Y-m-d а не y-m-d. Календарь мне нравится а вот единица не туда и не сюда.Или я не так что-то сделал. Скидываю код:
Как работает:
<LINK href="http://1ya.ru/siteFiles/useful/dateselector.css" type=text/css rel=stylesheet>
<SCRIPT language=JavaScript src="http://1ya.ru/siteFiles/useful/popup_lib.js"></SCRIPT>
<SCRIPT language=JavaScript src="http://1ya.ru/siteFiles/useful/dateselector.js"></SCRIPT>
<FORM name=calendar><INPUT name=date><IMG onclick="popUpCalendar(this, calendar.date, 'dd:mm:yyyy');" height=18 hspace=3 src="http://1ya.ru/siteIMG/useful_pic/date_selector.gif" width=16 border=0></FORM>
Описание:
Подключаем стили, библиотеку popup_lib.js, скрипт dateselector, создаем форму для которой необходимо задать имя (к примеру test), текстовое поле (тоже с произвольным именем), объект при нажатии на который будет выпадать окошко с календарем. ставим на какое-либо событие (onclick, onmouseover и т.д.) этому объекту вызов фунции popUpCalendar(this, form_path, 'date_format');
form_path - путь к объекту, в который мы хотим запоминать выбранную дату.
date_format - формат, в котором нужно сохранять выбранную дату
Код файла popup_lib.js
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
var ie = document.all
var dom = document.getElementById
var ns4 = document.layers
/* hides <select> and <applet> objects (for IE only) */
function hideElement( elmID, overDiv )
{
if (ie)
{
for( i = 0 ; i < document.all.tags( elmID ).length; i++ )
{
obj = document.all.tags( elmID )[i];
if( !obj || !obj.offsetParent )
{
continue;
}
// Find the element's offsetTop and offsetLeft relative to the BODY tag.
objLeft = obj.offsetLeft;
objTop = obj.offsetTop;
objParent = obj.offsetParent;
while( objParent.tagName.toUpperCase() != "BODY" )
{
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
objHeight = obj.offsetHeight;
objWidth = obj.offsetWidth;
if(( overDiv.offsetLeft + overDiv.offsetWidth ) <= objLeft );
else if(( overDiv.offsetTop + overDiv.offsetHeight ) <= objTop );
else if( overDiv.offsetTop >= ( objTop + objHeight ));
else if( overDiv.offsetLeft >= ( objLeft + objWidth ));
else
{
obj.style.visibility = "hidden";
}
}
}
}
/*
* unhides <select> and <applet> objects (for IE only)
*/
function showElement( elmID )
{
if (ie)
{
for( i = 0 ; i < document.all.tags( elmID ).length; i++ )
{
obj = document.all.tags( elmID )[i];
if( !obj || !obj.offsetParent )
{
continue;
}
obj.style.visibility = "";
}
}
}
Код файла dateselector
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
var fixedX = - 1 ;
var fixedY = - 1 ;
var startAt = 1 ;
var crossobj, monthSelected, yearSelected, dateSelected, omonthSelected, oyearSelected, odateSelected, monthConstructed, yearConstructed, ctlToPlaceValue, ctlNow, dateFormat, nStartingYear
var bPageLoaded=false
var today = new Date()
var dateNow = today.getDate()
var monthNow = today.getMonth()
var yearNow = today.getYear()
var bShow = false;
/*** For language packs, month/day names should be changed here ***/
var monthName = new Array("Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь","Ноябрь", "Декабрь")
var dayName = new Array("П","Вт","Ср","Ч","Пт","Сб","Вс")
if (dom)
{
document.write ("<div onclick='bShow=true' id='calendar' class='div-style'>\n");
document.write ("<table width='140' class='table-style'>\n");
document.write ("<tr class='title-background-style' >\n");
document.write (" <td width='100%'>\n");
document.write (" <table width='100%'>\n");
document.write (" <tr>\n");
document.write (" <td class='title-style'>\n");
document.write (" <span id='caption'></span>\n");
document.write (" </td>\n");
document.write (" </tr>\n");
document.write (" </table>\n");
document.write (" </td>\n");
document.write ("</tr>\n");
document.write ("<tr>\n");
document.write (" <td width='100%' class='body-style'>\n");
document.write (" <span id='content'></span>\n");
document.write (" </td>\n");
document.write ("</tr>");
document.write ("</table>")
document.write ("</div>");
}
function hideCalendar() {
crossobj.visibility="hidden"
showElement( 'SELECT' );
showElement( 'APPLET' );
}
function padZero(num) {
return (num < 10 )? '0' + num : num ;
}
function constructDate(d,m,y)
{
sTmp = dateFormat
sTmp = sTmp.replace ("dd","<e>")
sTmp = sTmp.replace ("d","<d>")
sTmp = sTmp.replace ("<e>",padZero(d))
sTmp = sTmp.replace ("<d>",d)
sTmp = sTmp.replace ("mmm","<o>")
sTmp = sTmp.replace ("mm","<n>")
sTmp = sTmp.replace ("m","<m>")
sTmp = sTmp.replace ("<m>",m+ 1 )
sTmp = sTmp.replace ("<n>",padZero(m+ 1 ))
sTmp = sTmp.replace ("<o>",monthName[m])
return sTmp.replace ("yyyy",y)
}
function closeCalendar() {
var sTmp
hideCalendar();
ctlToPlaceValue.value = constructDate(dateSelected,monthSelected,yearSelected)
}
function incMonth () {
monthSelected++
if (monthSelected> 11 ) {
monthSelected= 0
yearSelected++
}
constructCalendar()
}
function decMonth () {
monthSelected--
if (monthSelected< 0 ) {
monthSelected= 11
yearSelected--
}
constructCalendar()
}
/*** calendar ***/
function constructCalendar () {
var dateMessage
var startDate = new Date (yearSelected,monthSelected, 1 )
var endDate = new Date (yearSelected,monthSelected+ 1 , 1 );
endDate = new Date (endDate - ( 24 * 60 * 60 * 1000 ));
numDaysInMonth = endDate.getDate()
datePointer = 0
dayPointer = startDate.getDay() - startAt
if (dayPointer < 0 )
{
dayPointer = 6
}
sHTML = "<table width='100%' border='0' cellpadding='1' cellspacing='1' class='body-style'><tr>"
for (i= 0 ; i< 7 ; i++) {
sHTML += "<td width='15' align='center'><B>"+ dayName[i]+"</B></td>"
}
sHTML +="</tr><tr>"
for ( var i= 1 ; i<=dayPointer;i++ )
{
sHTML += "<td> </td>"
}
for ( datePointer= 1 ; datePointer<=numDaysInMonth; datePointer++ )
{
dayPointer++;
sHTML += "<td width='15' align='center'>"
var sStyle="normal-day-style"; //regular day
if ((datePointer==dateNow)&&(monthSelected==monthNow)&&(yearSelected==yearNow)) //today
{ sStyle = "current-day-style"; }
//selected day
if ((datePointer==odateSelected) && (monthSelected==omonthSelected) && (yearSelected==oyearSelected))
{ sStyle += " selected-day-style"; }
sHint = ""
var regexp= /\"/g
sHint=sHint.replace(regexp,""")
sHTML += "<a class='"+sStyle+"' title=\"" + sHint + "\" href='javascript:dateSelected="+datePointer+";closeCalendar();'>" + datePointer + "</a>"
if ((dayPointer+startAt) % 7 == startAt) {
sHTML += "</tr><tr>"
}
}
document.getElementById("content").innerHTML = sHTML
document.getElementById("spanMonth").innerHTML = monthName[monthSelected]
document.getElementById("spanYear").innerHTML = yearSelected
}
function popUpCalendar(ctl, ctl2, format) {
var leftpos= 0
var toppos= 0
DocumentRegisterEvents();
if (bPageLoaded)
{
if ( crossobj.visibility == "hidden" ) {
ctlToPlaceValue = ctl2
dateFormat=format;
formatChar = " "
aFormat = dateFormat.split(formatChar)
if (aFormat.length< 3 )
{
formatChar = "/"
aFormat = dateFormat.split(formatChar)
if (aFormat.length< 3 )
{
formatChar = "."
aFormat = dateFormat.split(formatChar)
if (aFormat.length< 3 )
{
formatChar = "-"
aFormat = dateFormat.split(formatChar)
if (aFormat.length< 3 )
{
// invalid date format
formatChar=""
}
}
}
}
tokensChanged = 0
if ( formatChar != "" )
{
// use user's date
aData = ctl2.value.split(formatChar)
for (i=0;i<3;i++)
{
if ((aFormat[i]=="d") || (aFormat[i]=="dd"))
{
dateSelected = parseInt(aData[i], 10)
tokensChanged ++
}
else if ((aFormat[i]=="m") || (aFormat[i]=="mm"))
{
monthSelected = parseInt(aData[i], 10) - 1
tokensChanged ++
}
else if (aFormat[i]=="yyyy")
{
yearSelected = parseInt(aData[i], 10)
tokensChanged ++
}
else if (aFormat[i]=="mmm")
{
for (j=0; j<12; j++)
{
if (aData[i]==monthName[j])
{
monthSelected=j
tokensChanged ++
}
}
}
}
}
if ((tokensChanged!=3)||isNaN(dateSelected)||isNaN(monthSelected)||isNaN(yearSelected))
{
dateSelected = dateNow
monthSelected = monthNow
yearSelected = yearNow
}
odateSelected=dateSelected
omonthSelected=monthSelected
oyearSelected=yearSelected
aTag = ctl
do {
aTag = aTag.offsetParent;
leftpos += aTag.offsetLeft;
toppos += aTag.offsetTop;
} while(aTag.tagName!="BODY");
crossobj.left = fixedX==-1 ? ctl.offsetLeft + leftpos : fixedX
crossobj.top = fixedY==-1 ? ctl.offsetTop + toppos + ctl.offsetHeight + 2 : fixedY
constructCalendar (1, monthSelected, yearSelected);
crossobj.visibility=(dom||ie)? "visible" : "show"
hideElement( 'SELECT', document.getElementById("calendar") );
hideElement( 'APPLET', document.getElementById("calendar") );
bShow = true;
}
}
else
{
DateSelectorInit()
popUpCalendar(ctl, ctl2, format)
}
}
function DateSelectorInit() {
if (!ns4)
{
if (!ie) { yearNow += 1900 }
crossobj=(dom)?document.getElementById("calendar").style : ie? document.all.calendar : document.calendar
hideCalendar()
monthConstructed=false;
yearConstructed=false;
sHTML1 = "<table width=' 100 %' border=' 0 ' cellpadding=' 0 ' cellspacing=' 0 '>\n";
sHTML1 += "<tr>\n";
sHTML1 += " <td width=' 5 '><span id='spanLeft' class='title-control-normal-style' onclick='javascript:decMonth()'><</span></td>\n";
sHTML1 += " <td width=' 100 %' align='center'><span id='spanMonth' class='title-control-normal-style'></span> <span id='spanYear' class='title-control-normal-style'></span></td>\n";
sHTML1 += " <td width=' 5 '><span id='spanRight' class='title-control-normal-style' onclick='incMonth()'>></span></td>\n";
sHTML1 += "</tr>\n";
sHTML1 += "</table>\n";
document.getElementById("caption").innerHTML = sHTML1
bPageLoaded=true
}
}
function DocumentRegisterEvents()
{
document.onkeypress = function hideCalender_Trap1 ()
{
if (event.keyCode == 27 )
{
hideCalendar();
}
}
document.onclick = function hideCalender_Trap2()
{
if (!bShow)
{
hideCalendar();
}
bShow = false
}
}
Файл стилей скидывать нет необходимости. Помогите убрать 1 и поставить дату в формате Y-m-d
