Penjelasan terperinci tentang penggunaan Kontrol Kalender JS

Penulis：Eve Cole Waktu Pembaruan：2025-05-26 06:32:01

Saya telah terburu -buru untuk proyek akhir -akhir ini. Proyek ini akhirnya dalam keadaan yang stabil sekarang, hanya revisi. Sebagai programmer latar belakang, saya sangat keras. Saya harus menulis semuanya dari web ke antarmuka seluler, yang banyak hal. . . Saya akhirnya menganggur dua hari ini. Saya melihat beberapa fungsi tentang tanggal JS dan tiba -tiba memikirkan kontrol kalender. Jadi saya mencoba menulis satu. Sebagai programmer latar belakang, saya terbatas di level saya. Mari kita ambil sikap belajar dan lihat contoh yang saya tulis. . .

Pertama, fungsi tanggal yang umum digunakan: tanggal (tahun, bulan, hari)

Salinan kode adalah sebagai berikut:

var date = new date ();

Dapatkan tahun

Salinan kode adalah sebagai berikut:

var tahun = this.date.getlyear ();

Dapatkan bulan, inilah indeks bulanan sehingga Anda membutuhkan +1

Salinan kode adalah sebagai berikut:

var bulan = this.date.getMonth ()+1;

Hari apa tanggal akuisisi

Salinan kode adalah sebagai berikut:

var day = this.date.getDate ();

Dapatkan hari dalam seminggu, kembali 0. Minggu 1. Senin 2. Selasa 3. Rabu 4. Kamis 5. Jumat 6. Sabtu

Salinan kode adalah sebagai berikut:

var minggu = this.date.getday ();

Dapatkan hari apa dalam seminggu di bulan itu

Salinan kode adalah sebagai berikut:

var getWeekday = fungsi (tahun, bulan, hari) {

var tanggal = tanggal baru (tahun, bulan, hari);

return date.getday ();

}

var Weekstart = getWeekday (this.year, this.month-1, 1)

Dapatkan jumlah hari dalam sebulan

Salinan kode adalah sebagai berikut:

var getMonthdays = fungsi (tahun, bulan) {

var tanggal = tanggal baru (tahun, bulan, 0);

return date.getDate ();

}

var bulan hari = this.getMonthdays (this.year, this.month);

Oke, kami hanya menggunakan begitu banyak parameter. Berikut ini sebenarnya adalah beberapa operasi dan penilaian tentang tanggal yang sesuai dengan minggu ini, label splicing dinamis. Mari langsung memposting contoh yang saya tulis:

Salinan kode adalah sebagai berikut:

<Html>

<head>

td {text-align: center;}

</tyle>

window.onload = function () {

var calender = function () {

this.init.apply (ini, argumen);

}

Calender.prototype = {

Init: function (wadah, opsi) {

this.date = new date ();

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

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 (container);

this.options = options! = null? opsi: {

Perbatasan: '1px Solid Green',

Lebar: '400px',

Tinggi: '200px',

BackgroundColor: 'Lightgrey',

FontColor: 'Biru'

}

getMonthdays: function (tahun, bulan) {

var tanggal = tanggal baru (tahun, bulan, 0);

return date.getDate ();

getWeekday: function (tahun, bulan, hari) {

var tanggal = tanggal baru (tahun, bulan, hari);

return date.getday ();

Lihat: function () {

var tableStr = '<able>';

tableStr+= '<tr> <td colspan = "3"> </td> <td> tahun:'+this.year+'</td> <td colspan = "3"> bulan:'+this.month+'</td> </tr>';

TableStr+= '<tr> <td> hari </td> <td> satu </td> <td> dua </td> <td> tiga </dw </td> <td> lima </dw </td> <td> enam </td> </tr>';

indeks var = 1;

// menilai di mana hari pertama setiap bulan

var style = '';

if (this.weekstart <7)

{

tableStr+= '<tr>';

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

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

};

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

style = this.day == (i+1)? "latar belakang-warna: hijau;": "";

indeks ++;

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

};

tableStr+= '</tr>';

}

/// Posisi yang sesuai dengan hari yang tersisa

// menilai baris integer dan sesuai dengan posisi yang sesuai

var sisa hari = this.monthdays- (7-this.weekstart);

var row = math.floor (sisa hari%7 == 0? sisa hari/7: ((sisa hari/7) +1))));

var count = math.floor (sisa hari/7);

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

tableStr+= '<tr>';

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

style = this.day == (index+k)? "latar belakang-color: green;": "";

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

TableStr+= indeks+k;

tableStr+= '</td>';

};

tableStr+= '</tr>';

indeks+= 7;

};

// Posisi yang sesuai dari hari -hari terakhir yang tersisa (tidak dapat mengisi hari -hari seminggu)

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

tableStr+= '<tr>';

for (var i = 0; i <stillcols; i ++) {

style = this.day == index? "latar belakang-warna: hijau;": "";

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

tableStr+= indeks;

tableStr+= '</td>';

indeks ++;

};

tableStr+= '</tr>';

TableStr+= '</able>';

mengembalikan TableStr;

Render: function () {

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 = 'pointer';

calendardiv.style.backgroundColor = this.options.backgroundColor;

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

calendardiv.style.color = 'merah';

calendardiv.onClick = function (e) {

var evt = e || window.event;

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

if (target && target.getAttribute ('val'))

{

alert (target.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.AppendChild (CalenderDiv);

/// Page Turn Div

var pagerdiv = document.createElement ('div');

pagerdiv.style.width = 'auto';

pagerdiv.style.height = 'auto';

var itu = ini;

/// Reset parameter

var resetpara = fungsi (tahun, bulan, hari) {

that.date = tanggal baru (tahun, bulan, hari);

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);

itu.Monthdays = that.getMonthdays (that.year, that.month);

}

// halaman sebelumnya

var prebtn = document.createElement ('input');

prebtn.type = 'tombol';

prebtn.value = '<';

prebtn.onClick = function () {

that.containerDiv.removechild (div);

resetpara (that.year, that.month-2, that.day);

itu.render ();

}

// halaman berikutnya

var nextBtn = document.createElement ('input');

nextbtn.type = 'tombol';

nextbtn.value = '>';

nextbtn.onClick = function () {

that.containerDiv.removechild (div);

resetpara (that.year, that.month, that.day);

itu.render ();

}

Pagerdiv.AppendChild (prebtn);

Pagerdiv.AppendChild (NextBtn);

Div.AppendChild (PagerDiv);

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

var dropDivstr = '';

// Pilih tahun

dropDivST+= '<SELECT ID = "DDLYEAR">';

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

dropDivstr+=

i == that.ear

? '<Option value = "'+i+'" dipilih = "true">'+i+'</tiption>'

: '<Option value = "'+i+'">'+i+'</pection>';

};

dropDivST+= '</pilih>';

// Pilih Bulan

dropDivST+= '<pilih id = "ddlmonth">';

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

dropDivstr+=

i == That.month

? '<Option value = "'+i+'" dipilih = "true">'+i+'</tiption>'

: '<Option value = "'+i+'">'+i+'</pection>';

};

dropDivST+= '</pilih>';

dropDiv.innerHtml = dropDivSTR;

Div.AppendChild (DropDiv);

that.containerDiv.AppendChild (Div);

/// Bind acara yang memilih tahun dan bulan

var ddlchange = function () {

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

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

var yearindex = ddlyear.selectedIndex;

var tahun = ddlyear.Options [yearindex] .value;

var monthIndex = ddlmonth.selectectedIndex;

var bulan = ddlmonth.Options [monthIndex] .value;

that.containerDiv.removechild (div);

resetpara (tahun, bulan-1, itu.day);

itu.render ();

}

ddlyear.onchange = function () {

ddlchange ();

}

ddlmonth.onchange = function () {

ddlchange ();

}

var calendar = calender baru ('dvtest', {

Perbatasan: '1px Solid Green',

Lebar: '400px',

Tinggi: '200px',

BackgroundColor: ''

}

);

calendar.render ();

}

</script>

</head>

<body>

</body>

</html>

Kode telah diubah lagi dan tabel tampilan diganti dengan Div, untuk menyelesaikan masalah baca-saja dari TableInnerHtml IE. Selain itu, opsi ditambahkan untuk konfigurasi.

Kode di atas memiliki penjelasan sederhana, fungsinya adalah yang paling mendasar, dan jika Anda melakukannya lebih mendalam, Anda dapat memperluasnya.