Java Kit calendar

Christr Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   -  
Christr Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

j'ai récupéré un kit calendar en java sur http://www.javascriptkit.com

j'ai réussi à le mettre en place dans mon site et il fonctionne parfaitement voici son code :

<script type="text/javascript">
// <!-- <![CDATA[

// Project: Dynamic Date Selector (DtTvB) - 2006-03-16
// Script featured on JavaScript Kit- http://www.javascriptkit.com
// Code begin...
// Set the initial date.
var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();

// Get Element By Id
function ds_getel(id) {
return document.getElementById(id);
}

// Get the left and the top of the element.
function ds_getleft(el) {
var tmp = el.offsetLeft;
el = el.offsetParent
while(el) {
tmp += el.offsetLeft;
el = el.offsetParent;
}
return tmp;
}
function ds_gettop(el) {
var tmp = el.offsetTop;
el = el.offsetParent
while(el) {
tmp += el.offsetTop;
el = el.offsetParent;
}
return tmp;
}

// Output Element
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');

// Output Buffering
var ds_ob = '';
function ds_ob_clean() {
ds_ob = '';
}
function ds_ob_flush() {
ds_oe.innerHTML = ds_ob;
ds_ob_clean();
}
function ds_echo(t) {
ds_ob += t;
}

var ds_element; // Text Element...

var ds_monthnames = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
]; // You can translate it for your language.

var ds_daynames = [
'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
]; // You can translate it for your language.

// Calendar template
function ds_template_main_above(t) {
return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
+ '<tr>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_py();"><<</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();"><</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Fermer]</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">></td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">>></td>'
+ '</tr>'
+ '<tr>'
+ '<td colspan="7" class="ds_head">' + t + '</td>'
+ '</tr>'
+ '<tr>';
}

function ds_template_day_row(t) {
return '<td class="ds_subhead">' + t + '</td>';
// Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
}

function ds_template_new_week() {
return '</tr><tr>';
}

function ds_template_blank_cell(colspan) {
return '<td colspan="' + colspan + '"></td>'
}

function ds_template_day(d, m, y) {
return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
// Define width the day row.
}

function ds_template_main_below() {
return '</tr>'
+ '</table>';
}

// This one draws calendar...
function ds_draw_calendar(m, y) {
// First clean the output buffer.
ds_ob_clean();
// Here we go, do the header
ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
for (i = 0; i < 7; i ++) {
ds_echo (ds_template_day_row(ds_daynames[i]));
}
// Make a date object.
var ds_dc_date = new Date();
ds_dc_date.setMonth(m - 1);
ds_dc_date.setFullYear(y);
ds_dc_date.setDate(1);
if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
days = 31;
} else if (m == 4 || m == 6 || m == 9 || m == 11) {
days = 30;
} else {
days = (y % 4 == 0) ? 29 : 28;
}
var first_day = ds_dc_date.getDay();
var first_loop = 1;
// Start the first week
ds_echo (ds_template_new_week());
// If sunday is not the first day of the month, make a blank cell...
if (first_day != 0) {
ds_echo (ds_template_blank_cell(first_day));
}
var j = first_day;
for (i = 0; i < days; i ++) {
// Today is sunday, make a new week.
// If this sunday is the first day of the month,
// we've made a new row for you already.
if (j == 0 && !first_loop) {
// New week!!
ds_echo (ds_template_new_week());
}
// Make a row of that day!
ds_echo (ds_template_day(i + 1, m, y));
// This is not first loop anymore...
first_loop = 0;
// What is the next day?
j ++;
j %= 7;
}
// Do the footer
ds_echo (ds_template_main_below());
// And let's display..
ds_ob_flush();
// Scroll it into view.
ds_ce.scrollIntoView();
}

// A function to show the calendar.
// When user click on the date, it will set the content of t.
function ds_sh(t) {
// Set the element to set...
ds_element = t;
// Make a new date, and set the current month and year.
var ds_sh_date = new Date();
ds_c_month = ds_sh_date.getMonth() + 1;
ds_c_year = ds_sh_date.getFullYear();
// Draw the calendar
ds_draw_calendar(ds_c_month, ds_c_year);
// To change the position properly, we must show it first.
ds_ce.style.display = '';
// Move the calendar container!
the_left = ds_getleft(t);
the_top = ds_gettop(t) + t.offsetHeight;
ds_ce.style.left = the_left + 'px';
ds_ce.style.top = the_top + 'px';
// Scroll it into view.
ds_ce.scrollIntoView();
}

// Hide the calendar.
function ds_hi() {
ds_ce.style.display = 'none';
}

// Moves to the next month...
function ds_nm() {
// Increase the current month.
ds_c_month ++;
// We have passed December, let's go to the next year.
// Increase the current year, and set the current month to January.
if (ds_c_month > 12) {
ds_c_month = 1;
ds_c_year++;
}
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the previous month...
function ds_pm() {
ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
// We have passed January, let's go back to the previous year.
// Decrease the current year, and set the current month to December.
if (ds_c_month < 1) {
ds_c_month = 12;
ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
}
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the next year...
function ds_ny() {
// Increase the current year.
ds_c_year++;
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the previous year...
function ds_py() {
// Decrease the current year.
ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}

// Format the date to output.
function ds_format_date(d, m, y) {
// 2 digits month.
m2 = '00' + m;
m2 = m2.substr(m2.length - 2);
// 2 digits day.
d2 = '00' + d;
d2 = d2.substr(d2.length - 2);
// YYYY-MM-DD
return y + '-' + m2 + '-' + d2;
}

// When the user clicks the day.
function ds_onclick(d, m, y) {
// Hide the calendar.
ds_hi();
// Set the value of it, if we can.
if (typeof(ds_element.value) != 'undefined') {
ds_element.value = ds_format_date(d, m, y);
// Maybe we want to set the HTML in it.
} else if (typeof(ds_element.innerHTML) != 'undefined') {
ds_element.innerHTML = ds_format_date(d, m, y);
// I don't know how should we display it, just alert it to user.
} else {
alert (ds_format_date(d, m, y));
}
}

// And here is the end.

// ]]> -->

</script>


et je l'appel dans un input

From:
<input class="Idat" onclick="ds_sh(this);" name="ddate" readonly="readonly" style="cursor: text"/>




Mon souci qui est en faite une amélioration que j'espère que vous pourrais m'apporter est de rendre la sélection de date supérieur à aujourd'hui impossible

Vous pouvez m'aider pour ceci

Merci
A voir également:

12 réponses

jeangilles Messages postés 816 Date d'inscription   Statut Membre Dernière intervention   186
 
heu

tu peux peut être modifier ta fonction ds_onclick :


function ds_onclick(d, m, y) {
// Hide the calendar.
	date1=new Date();
	date2 = new Date(y,m,d);
	if(date2>=date1){
		ds_hi();
		// Set the value of it, if we can.
		if (typeof(ds_element.value) != 'undefined') {
		ds_element.value = ds_format_date(d, m, y);
		// Maybe we want to set the HTML in it.
		} else if (typeof(ds_element.innerHTML) != 'undefined') {
		ds_element.innerHTML = ds_format_date(d, m, y);
		// I don't know how should we display it, just alert it to user.
		} else {
		alert (ds_format_date(d, m, y));
		}
	}else{
		alert("la date choisie doit être supérieure à la date actuelle");
	}	
} 



j'ai pas lu tout le code que t'as filé, donc c'est possible que ca marche tout à fait bien XD
0
Christr Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   46
 
Sa ne fonctionne pas

:( Snifffffff


de plus c'est l'inverse je ne veux pas qu'on puisse sélectionné une date supérieur à la date actuel
0
jeangilles Messages postés 816 Date d'inscription   Statut Membre Dernière intervention   186
 
Oui enfin suffit de remplacer le >= par un <= XD

Et pourquoi ca marche pas ?
ca fait quoi ?
0
Christr Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   46
 
justement cela ne change rien la page ne semble pas être impacté par se changement
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
jeangilles Messages postés 816 Date d'inscription   Statut Membre Dernière intervention   186
 
T'as pas d'erreur dans ta console js ?
(enfin que si t'es sous FF ^^)
0
Christr Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   46
 
j'essaye de comprendre plus ou moins le java mais actuellement

le script renverrais une alert si je met en date2 une date supérieur à la date1

hors que pour ma par je souhaite juste que les dates que l'on sélectionne dans le calendrier les dates supèrieur à la date du jour sois impossible comme dans les sites de réservations de vols ou autre ou chez eux ce sont les dates antérieure à la date du jour qui sont impossible
0
jeangilles Messages postés 816 Date d'inscription   Statut Membre Dernière intervention   186
 
Tu peux alors créer une nouvelle fonction qui affichera les jours suivants, mais qui ne les rendra pas "clickables"
function ds_template_day_follow(d, m, y) {
return '<td class="ds_cell"' + d + '</td>';
} 





et tu remplaces ta ligne
ds_echo (ds_template_day(i + 1, m, y)); 
par quelquechose comme :


date1=new Date();
date2 = new Date(y,m,i+1);
	if(date2<=date1){
ds_echo (ds_template_day(i + 1, m, y)); 
}else{
ds_echo (ds_template_day_follow(i + 1, m, y)); 
}
0
Christr Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   46
 
ça marche niquel pour les jours

le problème est sur le mois il me donne un arrêt au mois - 1 et non le mois actuel

car dans le script le mois de janvier est 0 non 1

pourrais tu me dire ou ajouté m + 1 dans le script je cherche actuellement.

Merci
0
Christr Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   46
 
TROUVER tu es génial merci grand merci


voici la modif
// Make a row of that day!
date1=new Date();
date2 = new Date(y,m-1,i+1);
if(date2<=date1){
ds_echo (ds_template_day(i + 1, m, y));
}else{
ds_echo (ds_template_day_follow(i + 1, m, y));
}
0
Christr Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   46
 
Et juste avant de résoudre ce post

sais tu comment faire pour que mon champs date sois présélection à la date du jour à ouverture de la page mais modifiable
0
jeangilles Messages postés 816 Date d'inscription   Statut Membre Dernière intervention   186
 
heu ...
peut être au début de la fonction ds_sh, ajouter


date da = new Date();
if (typeof(ds_element.value) != 'undefined') {
ds_element.value = ds_format_date(da.getDate(), da.getMonth()+1, da.getFullYear());
} else if (typeof(ds_element.innerHTML) != 'undefined') {
ds_element.innerHTML = ds_format_date(da.getDate(), da.getMonth()+1, da.getFullYear());
}
0
Christr Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   46
 
cela ne fonctionne pas dommage


mais merci pour tout
0