Explication détaillée de l'utilisation du contrôle du calendrier JS

Auteur：Eve Cole Date de mise à jour：2025-05-26 06:32:01

Je me suis précipité pour des projets ces derniers temps. Le projet est enfin dans un état stable maintenant, juste des révisions. En tant que programmeur d'arrière-plan, je suis vraiment dur. Je dois tout écrire du Web à l'interface mobile, ce qui est beaucoup de choses. . . Je suis finalement devenu inactif ces deux jours. J'ai regardé certaines fonctions sur les dates de JS et j'ai soudainement pensé au contrôle du calendrier. J'ai donc essayé d'en écrire un. En tant que programmeur d'arrière-plan, je suis limité à mon niveau. Prenons une attitude d'apprentissage et regardons l'exemple que j'ai écrit. . .

Tout d'abord, une fonction de date couramment utilisée: date (année, mois, jour)

La copie de code est la suivante:

var date = new Date ();

Obtenir une année

La copie de code est la suivante:

var année = this.date.getlyar ();

Obtenez le mois, voici l'indice mensuel, vous avez donc besoin de +1

La copie de code est la suivante:

var mois = this.date.getmonth () + 1;

Quel jour est la date d'acquisition

La copie de code est la suivante:

var day = this.date.getDate ();

Obtenez le jour de la semaine, retour 0. Dimanche 1. Lundi 2. Mardi 3. Mercredi 4. Jeudi 5. Vendredi 6. Samedi

La copie de code est la suivante:

var semaine = this.date.getDay ();

Obtenez le jour de la semaine ce mois-ci

La copie de code est la suivante:

var getweekday = fonction (année, mois, jour) {

Var Date = nouvelle date (année, mois, jour);

Retour Date.getDay ();

}

var WeekStart = getweekday (this.year, this.month-1, 1)

Obtenez le nombre de jours dans le mois

La copie de code est la suivante:

var Getmonthdays = fonction (année, mois) {

Var Date = Nouvelle date (année, mois, 0);

return date.getDate ();

}

var mois de mois = this.getMonthdays (this.year, this.month);

D'accord, nous n'avons utilisé que tant de paramètres. Ce qui suit est en fait quelques opérations et jugements sur la date correspondant à la semaine, les étiquettes d'épissage dynamiques. Postons directement l'exemple que j'ai écrit:

La copie de code est la suivante:

<html>

<adal>

TD {Text-Align: Centre;}

</ style>

window.onload = function () {

var calender = function () {

this.init.apply (ceci, arguments);

}

Calender.prototype = {

Init: fonction (conteneur, options) {

this.date = new Date ();

this.year = this.date.getlyar ();

this.month = this.date.getMonth () + 1;

this.day = this.date.getDate ();

this.week = this.date.getDay ();

this.weekStart = this.getweekday (this.year, this.month-1, 1);

this.monthdays = this.getmonthdays (this.year, this.month);

this.ContainerDiv = document.getElementById (conteneur);

this.options = options! = Null? Options: {

Border: '1px Green solide',

Largeur: «400px»,

Hauteur: «200px»,

BackgroundColor: 'Lightgrey',

Fontcolor: 'bleu'

}

Getmonthdays: fonction (année, mois) {

Var Date = Nouvelle date (année, mois, 0);

return date.getDate ();

Getweekday: fonction (année, mois, jour) {

Var Date = nouvelle date (année, mois, jour);

Retour Date.getDay ();

View: function () {

var tablestr = '<Bile>';

TablestR + = '<Tr> <td ColSpan = "3"> </td> <td> Année:' + this.year + '</td> <td Colspan = "3"> mois:' + this.month + '</td> </tr>';

tablestr + = '<tr> <td> jour </td> <td> un </td> <td> deux </td> <td> trois </ td </td> <td> cinq </w </td> <td> six </td> </tr>';

var index = 1;

// juge où se trouve le premier jour de chaque mois

var style = '';

if (this.weekstart <7)

{

tablestr + = '<tr>';

for (var i = 0; i <this.weekstart; i ++) {

tablestr + = '<td> </td>';

};

for (var i = 0; i <7-this.weekstart; i ++) {

style = this.day == (i + 1)? "Background-Color: Green;": "";

index ++;

tablestr + = '<td style = "' + style + '" val =' + (this.year + '-' + this.month + '-' + (i + 1)) + '>' + (i + 1) + '</td>';

};

tablestr + = '</tr>';

}

/// la position correspondant aux jours restants

// juge les lignes entières et correspond aux positions correspondantes

var reste les jours = this.monthdays- (7-This.weekStart);

var row = math.floor (demeurs de reste% 7 == 0? RESTAGE / 7: ((demeure / 7) +1)));

Var Count = Math.floor (RESTINGS / 7);

pour (var i = 0; i <count; i ++) {

tablestr + = '<tr>';

pour (var k = 0; k <7; k ++) {

style = this.day == (index + k)? "Background-Color: Green;": "";

tablestr + = '<td style = "' + style + '" val =' + (this.year + '-' + this.month + '-' + (index + k)) + '>';

tablestr + = index + k;

tablestr + = '</td>';

};

tablestr + = '</tr>';

index + = 7;

};

// La position correspondante des derniers jours restants (ne peut pas remplir ces jours d'une semaine)

var restecols = this.monthdays- (index-1);

tablestr + = '<tr>';

pour (var i = 0; i <restencols; i ++) {

style = this.day == index? "Background-Color: Green;": "";

tablestr + = '<td style = "' + style + '" val =' + (this.year + '-' + this.month + '-' + (index)) + '>';

tablestr + = index;

tablestr + = '</td>';

index ++;

};

tablestr + = '</tr>';

Tablestr + = '</ Table>';

RETOUR TRABLESTR;

Rendu: fonction () {

var calendardiv = document.CreateElement ('div');

calendardiv.style.border = this.options.border;

calendardiv.style.width = this.options.width;

calendardiv.style.height = this.options.height;

calendardiv.style.cursor = 'pointeur';

calendardiv.style.backgroundcolor = this.options.backgroundcolor;

// calendardiv.style.color = this.options.fontcolor;

calendardiv.style.color = 'red';

calendardiv.onclick = fonction (e) {

var evt = e || window.event;

var Target = evt.srcelement || evt.target;

if (cible && cible.getAttribute ('Val'))

{

alert (cible.getAttribute ('Val'));

}

var tablestr = this.view ();

this.tablestr = tablestr;

calendardiv.innerhtml = tablestr;

var div = document.CreateElement ('div');

div.style.width = 'auto';

div.style.height = 'auto';

Div.ApendChild (CalenderDiv);

/// Page tourne div

var pagerDiv = document.CreateElement ('div');

pagerdiv.style.width = 'auto';

pagerdiv.style.height = 'auto';

var that = this;

/// Réinitialiser les paramètres

var resetpara = fonction (année, mois, jour) {

ce.date = nouvelle date (année, mois, jour);

that.year = that.date.getlyear ();

that.month = that.date.getmonth () + 1;

that.day = that.date.getDate ();

that.week = that.date.getDay ();

that.weekstart = that.getweekday (that.year, that.month-1, 1);

that.monthdays = that.getmonthdays (that.year, that.month);

}

// page précédente

var prebtn = document.CreateElement ('entrée');

prebtn.type = 'bouton';

prebtn.value = '<';

prebtn.onclick = function () {

ce.ContainerDiv.removechild (div);

resetPara (ce.year, that.month-2, that.day);

that.render ();

}

// page suivante

var nextBtn = document.CreateElement ('entrée');

NextBtn.Type = 'Button';

NextBtn.Value = '>';

NextBtn.OnClick = fonction () {

ce.ContainerDiv.removechild (div);

resetPara (ce.year, that.month, that.day);

that.render ();

}

pagerdiv.appendChild (prebtn);

PagerDiv.ApendChild (NextBtn);

Div.ApendChild (PagerDiv);

var dropDiv = document.CreateElement ('div');

var dropdivstr = '';

// Année sélectionnée

dropdivstr + = '<select id = "ddlyear">';

pour (var i = 1900; i <= 2100; i ++) {

dropdivstr + =

i == ça.

? '<Option Value = "' + i + '" Selected = "true">' + i + '</ option>'

: '<option value = "' + i + '">' + i + '</ option>';

};

dropdivstr + = '</lect>';

// Sélectionner le mois

dropdivstr + = '<select id = "ddlmonth">';

pour (var i = 1; i <= 12; i ++) {

dropdivstr + =

i == ce mois

? '<Option Value = "' + i + '" Selected = "true">' + i + '</ option>'

: '<option value = "' + i + '">' + i + '</ option>';

};

dropdivstr + = '</lect>';

dropdiv.innerhtml = dropdivstr;

Div.ApendChild (DropDiv);

that.ContainerDiv.ApendChild (div);

/// lier l'événement qui sélectionne l'année et le mois

var ddlchange = function () {

var ddlyear = document.getElementById ('ddlyear');

var ddlmonth = document.getElementById ('ddlmonth');

var anneIndex = ddlyear.selectedIndex;

var année = ddlyear.options [YearIndex] .Value;

var MonthIndex = ddlmonth.selectedIndex;

var mois = ddlmonth.options [MonthIndex] .Value;

ce.ContainerDiv.removechild (div);

resetpara (année, mois-1, that.day);

that.render ();

}

ddlyear.onchange = function () {

ddlchange ();

}

ddlmonth.onchange = function () {

ddlchange ();

}

var calendar = new Calender ('dvTest', {

Border: '1px Green solide',

Largeur: «400px»,

Hauteur: «200px»,

BackgroundColor: ''

}

));

calendar.render ();

}

</cript>

</ head>

<body>

</docy>

</html>

Le code a été modifié à nouveau et la table de la vue est remplacée par un div, afin de résoudre le problème en lecture seule de TableInnerHTML d'IE. De plus, des options sont ajoutées pour la configurabilité.

Le code ci-dessus a une explication simple, la fonction est la plus basique, et si vous le faites plus en profondeur, vous pouvez l'étendre.