|
|
how i can user the following date picker control
that is available on
www.codeproject.com/jscript/datepicker.asp
|
|
|
|
|
I don't know if you are aware of this, but somebody is claiming your code as their own without acknowledgement:
http://www.webreference.com/programming/javascript/gr/
Just thought you might like to know.
|
|
|
|
|
Hm. If you look at the bottom of the page you linked, you will see:
Created: June 2, 2003
Revised: December 26, 2003
Maybe our Nikita have ripped the code and not the other guy. This thesis substantiated, if you read Nikita's comments (or not existing comments) from all posts in this article. I think he does not understand the code he have posted. For example, I post some bugfixes many time ago, and there was no comment or new version from Nikita, but many other peoples ask me for my bugfix and extented version.
What do you think about that?
Best regards
Stephan
\\\| \\ - -
( @ @ )
+---------------oOOo-(_)-oOOo-----------------+
| Stephan Pilz stephan.pilz@stephan-pilz.de |
| <a href=www.stephan-pilz.de>www.stephan-pilz.de</a> |
| ICQ#: 127823481 |
+-----------------------Oooo------------------+
oooO ( )
( ) ) /
\ ( (_/
\_)
|
|
|
|
|
Hello Nikita,
I'm glad you liked my article. I see you have made a few minor changes but I think it would have been proper to give credit where it is due.
Kindest regards
Guyon Roche.
|
|
|
|
|
I apologise for suggesting that you were a plagiarist, Mr Roche. It appears that Stephan is correct and that you are the author of this code, not Nikita. It has proved very useful, so thank you.
Regards
Paul
|
|
|
|
|
Cheers Paul,
No probs. There's so much plagiarism going on on the internet it's easy to make a mistake.
In fact, in a way I feel honoured to have been plagiarised - it's almost a status symbol
Guyon.
|
|
|
|
|
Hello Guyon Roche,
welcome on the CodeProject-Board. I hope, you will post many good articles here.
Maybe you are interested on my bugfixes and changes of the DatePicker
Here you can find a short description.
BR
Stephan
\\\| \\ - -
( @ @ )
+---------------oOOo-(_)-oOOo-----------------+
| Stephan Pilz stephan.pilz@stephan-pilz.de |
| <a href=www.stephan-pilz.de>www.stephan-pilz.de</a> |
| ICQ#: 127823481 |
+-----------------------Oooo------------------+
oooO ( )
( ) ) /
\ ( (_/
\_)
|
|
|
|
|
|
Hi,
Thanks, i used also your calendar.......its really fantastic......nice
regards,
-Disa
|
|
|
|
|
Can't see the proper Symbols in Cyr in datepicker.
Whats the problem?... How to modify Render method to supply the proper win-1251 encoding?
And could you please deploy your css styles?
DCH
|
|
|
|
|
I suppose the problem is the incorrect encoding the script or the page was saved with. Set the encoding of the page to the proper one (cp1251 or UTF8) - use "Save As" and "Save With Encoding" from Visual Studio, or use another text editor.
|
|
|
|
|
Good morning Nikita,
Nice article and code. Exactly, what I looking for. I give you 4, because there was some bugs
If I click on "Next Week"-Button, there is a missing object in JavaScript. I determine, that the function getDaysInMonth does'nt exist. Here comes the bugfix:
DatePicker.prototype.getDaysInMonth = function (calDate) {
var days;
var month = calDate.getMonth () + 1;
var year = calDate.getFullYear ();
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
days = 31;
} else if (month == 4 || month == 6 || month == 9 || month == 11) {
days = 30;
} else if (month == 2) {
if (isLeapYear (year)) {
days = 29;
} else {
days = 28;
}
}
return (days);
}
Replace all getDaysInMonth calls in code through this.getDaysInMonth
Next problem was the dynamic positioning of the span-Tag. You must add the line
this.oSpan.style.position = "absolute";
in DatePicker.prototype.show-Method.
I have extend the code with some nice colors. In this connection I think it's a good idea to highlight the actual date. For this you should do:
in DatePicker.prototype.fill-Method:
...
if (d.getDate () == this.dt.getDate ()) {
this.aCells[nRow][nCol].className = 'DatePickerBtnSelect';
this.aCells[nRow][nCol].bgColor = "orange";
}
...
in DatePicker.prototype.clear set color back (i.a. yellow):
DatePicker.prototype.clear = function () {
for (var j = 0; j < 6; j++) {
for (var i = 0; i < 7; i++) {
this.aCells[j][i].innerHTML = " "
this.aCells[j][i].className = 'DatePickerBtn';
this.aCells[j][i].bgColor = "yellow";
}
}
}
For the next and last 3 extension is not enought place here. If you want it, send me an email.
- I add a check function on the input-field, that checks the date for correct input, if the user enter a date manually
- I extend your class for multilanguage support
- I encapsulate all the function in a custom control written in VB.NET
Best regards
Stephan Pilz
-- modified at 2:34 Wednesday 21st December, 2005
|
|
|
|
|
Great code Stephen.
The getDaysInMonth() function could be condensed a bit...
<br />
DatePicker.prototype.daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];<br />
DatePicker.prototype.getDaysInMonth = function (calDate) {<br />
var month = calDate.getMonth();<br />
if ( (month == 2) && isLeapYear(calDate.getFullYear()) ) {<br />
return 29;<br />
} else {<br />
return this.daysInMonth[month];<br />
}<br />
}<br />
Guyon
|
|
|
|
|
Hello Guyon,
thanks for the "Great code"-Statement.
Now I have my threat was done and publish an own article with my DatePickerCustomControl. Naturally with Credits to you and Nikita. If you are interested look here.
Bye
Stephan
\\\| \\ - -
( @ @ )
+---------------oOOo-(_)-oOOo-----------------+
| Stephan Pilz stephan.pilz@stephan-pilz.de |
| <a href=www.stephan-pilz.de>www.stephan-pilz.de</a> |
| ICQ#: 127823481 |
+-----------------------Oooo------------------+
oooO ( )
( ) ) /
\ ( (_/
\_)
|
|
|
|
|
The calendar derives from a base class that doesn't appear to be included.
|
|
|
|
|
Did you find or was the base class provided? I also can not find it
|
|
|
|
|
Good!
However, I have some questions to ask:
1. I can't fill any color to the calendar
2. When I click on the any items at the bottom of calendar, it doesnt work or wrong???
Here is the source-code:
<head>
<script language="javascript" src="DatePicker.js"></script>
</head>
<body>
<input type="text" class="DatePickerValue"
name="xvb" id="xvb" style="width: 64px;"
value="1.1.2005" title="title">
<img src="images/buttons/dp.gif" class="LinkedElement"
onclick="DatePickerShow(xvb, xvbCh);"
title="Âûáðàòü" name="xvbCh" id="xvbCh"
title="âûáðàòü">
< span id="theDatePicker" name="theDatePicker"
style="z-index: 1; position: absolute;" >< /span >
</body>
(sorry! I cant post the SPAN tag)
any wrong?
|
|
|
|
|
Any color is the color you define in stylesheet - datepicker uses some styles defined. Editing style will change the color of the part that uses the style.
Items at the bootom of the picker works like movement from today - back (yesterday, week ago, month) and forward. One my friend said to add them - because the control initializes from the value from text input, it is likely to know that a day is today. They should work.
|
|
|
|
|
Thanks for replying me!
I found the answer!
In render method, just set the bgColor attribute to cells or table which you want is OK.
ex:
oTD1.bgColor = "Ivory";
oT1.bgColor = "white";
...
However, can you change the mouse pointer's image when it point to the calendar into the "hand"?
I tried to add "a" tag in to the cell but its doesnt work
ex: in fill method,
this.aCells[nRow][nCol].innerHTML = "<a href=#>"+d.getDate()+"</a>";
the mouse pointer's image change to the "hand" but when I clicked on it, it do nothing.
More over, If u can apply any filters to the calender when It appears, it will be great!
(such as: Fade, Gradient, Iris,...)
|
|
|
|
|
i have same problem for above code.if u get then please reply me
|
|
|
|
|
For those of you who do not want to have to compile this to check it out, here is the html:
<br />
<script language="javascript" src="DatePicker.js"></script><br />
<br />
<span id="theDatePicker" name="theDatePicker" class="DatePicker"></span><br />
<!-- x:DatePicker --><br />
<input type="text" class="DatePickerValue" name="xvb" id="xvb" style="width: 64px;" value="1/1/2005" title="title"> <br />
<img src="images/buttons/dp.gif" class="LinkedElement" onclick="DatePickerShow(xvb, xvbCh);" title="Âûáðàòü" name="xvbCh" id="xvbCh" title="âûáðàòü"><br />
<!-- /x:DatePicker -->
Over all it is kinda cool. Could hide and show the calendar a little better, and an english version would be great (and easy to do (line 427)).
Nice work.
Steven A Bristol
-- modified at 8:50 Tuesday 18th October, 2005
|
|
|
|
|
Two questions.
I am trying to use the client code you supplied. I get a javascript error: 'this.oSpan is null or not an object'. The error comes from line 32 of Datepicker.js. This is the html:
<html>
<head>
<script language="javascript" src="DatePicker.js"></script>
</head>
<body>
<form taget="xxxxxxxxxxxxxxxxx">
<!-- x:DatePicker -->
<input type="text" class="DatePickerValue" name="xvb" id="xvb" style="width: 64px;" value="1/1/2005" title="title">
<img src="images/buttons/dp.gif" class="LinkedElement" onclick="DatePickerShow(xvb, xvbCh);" title="Selecionar una fecha" name="xvbCh" id="xvbCh" title="âûáðàòü">
<!-- /x:DatePicker -->
</form>
</body>
</html>
Another thing: anyone has any translation of DatePicker.prototype.texts?, what I get is rubbish.
-- modified at 2:45 Tuesday 18th October, 2005
|
|
|
|
|
You are missing the span tag (which was not displayed in my prev post):
<br />
<br />
<form taget="xxxxxxxxxxxxxxxxx"><br />
<span id="theDatePicker" name="theDatePicker" class="DatePicker"></span><br />
<!-- x:DatePicker -->
Here is the translation:
change line 90:
<br />
oTD2.title = this.texts.close;
line 427:
<br />
DatePicker.prototype.texts = {<br />
months: [ "jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec" ],<br />
close: "close",<br />
days: ["su", "m", "tu", "w", "th", "f", "sa"],<br />
monthTitle: "Month",<br />
prevMonth: "prev month",<br />
nextMonth: "next month",<br />
yearTitle: "year",<br />
today: "today",<br />
yesterday: "yesterday",<br />
tomorrow: "tomorrow",<br />
weekAgo: "last week",<br />
weekAfter: "next week",<br />
monthAgo: "nextmonth",<br />
monthAfter: "prev month"<br />
}
|
|
|
|
|