Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2009, 15:05
s1ntez
 
Сообщений: n/a

js date picker своими руками. Оцените кривизну кода
Для одно проекта делал date-picker, в js новичек. Сие чудо работает кросс-браузерно, но хотелось бы услышать, что можно улучшить, оптимизировать, где явные ошибки. Буду признателен

function calendar(holder,input) {
	this.oDate = new Date();
	this.year = ( this.year == null ) ? this.oDate.getFullYear() : this.year;
	this.month = this.oDate.getMonth();
	this.today = this.oDate.getDay()
	this.daysTotal = new Date(this.year, this.month + 1,0).getDate();
	this.firstDay = new Date(this.year, this.month, 1).getDay();
	
	this.holder = holder;
	this.months = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
	this.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
	
	this.countMonth = countMonth;
	function countMonth() {
		this.daysTotal = new Date(this.year, this.month + 1,0).getDate();
		this.firstDay = new Date(this.year, this.month, 1).getDay();
	}
	this.render = function() {
		function dc(a) {
			return document.createElement(a);
		}
		function ct(a) {
			return document.createTextNode(a);
		}
		var table = dc("table");
		table.className = "js_cal";
		var thead = dc("thead");
		var tr = dc("tr");
		var td = dc("td");
		var th = dc("th");
		//alert(this.year)
		var span = dc("span");
		var span_text = ct("<");
		var cal_obj = this;
		span.onclick = function() { if(cal_obj.month == 0) { cal_obj.year -= 1; cal_obj.month = 11; } else {cal_obj.month -=1;} cal_obj.countMonth(); cal_obj.render(); };
		span.appendChild(span_text)
		var th = dc("th");
		th.appendChild(span);
		tr.appendChild(th);
		
		var month_caption = ct(this.months[this.month] + " " + cal_obj.year);
		var th = dc("th");
		th.setAttribute("colSpan", "5");
		th.appendChild(month_caption);
		tr.appendChild(th);
		
		var span = dc("span");
		var span_text = ct(">");
		span.onclick = function() { if(cal_obj.month == 11) { cal_obj.year += 1; cal_obj.month = 0; } else {cal_obj.month +=1;} cal_obj.countMonth(); cal_obj.render(); }
		span.appendChild(span_text)
		var th = dc("th");
		th.appendChild(span);
		tr.appendChild(th);
		thead.appendChild(tr);
		
		table.appendChild(thead)
		
		var tbody = dc("tbody");
		var tr = dc("tr");
		
		for (i = 0; i < 7; i++){
			var day_caption = document.createTextNode(this.days[i]);
			var td = dc("td");
			td.appendChild(day_caption);
			tr.appendChild(td);
			tbody.appendChild(tr);
		}

		table.appendChild(tbody);

		if (this.firstDay == 0) this.firstDay = 7;
		var v = Math.ceil((this.daysTotal + this.firstDay - 1) / 7)

		//alert("Days Total:" + this.daysTotal + "\n" + "First Day:" + this.firstDay + "\n" + "v:" + v)

		var tbody = dc("tbody");
		
		day = 1;
		for(i = 0; i < v; i++){
			var tr = dc("tr")
			for(j = 0; j < 7; j++){
				if(day <= this.daysTotal && (i > 0 || j >= this.firstDay-1)){
					var day_n = document.createTextNode(day);
					var td = dc("td");
					td.setAttribute("Class","date");
					td.appendChild(day_n);
					td.onclick = selectDate;
					tr.appendChild(td)
					day++;
				}
				else{
					var empty = document.createTextNode(" ");
					var td = dc("td");
					td.appendChild(empty);
					tr.appendChild(td);
				}
			tbody.appendChild(tr)
			}
			table.appendChild(tbody);
		}
		var holder = document.getElementById(this.holder);
		if (holder.lastChild) holder.removeChild(holder.lastChild);
		holder.appendChild(table);
		
		this.cells = document.getElementById(this.holder).getElementsByTagName("tbody")[1].getElementsByTagName('td');
		
		function selectDate() {
			for( i = 0; i < cal_obj.cells.length; i++ ){
				if(cal_obj.cells[i].innerHTML!=" "){
					cal_obj.cells[i].className = "date";
				}
			}
			document.getElementById(input).value = this.innerHTML + "/" + ((cal_obj.month == 0)?1:cal_obj.month + 1) + "/" + cal_obj.year;
			(this.className == "active") ? this.className = "date" : this.className = "active";
		}
		
	}
	
}
cal = new calendar("holder","from_date");
cal2 = new calendar("holder2","to_date");

Последний раз редактировалось Андрей Параничев, 16.01.2009 в 15:19. Причина: Пользуйтесь bb-тегами [js] и [html] для оформления листингов кода в теле сообщения
Ответить с цитированием
  #2 (permalink)  
Старый 16.01.2009, 15:39
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Нормально для первого раза. Я бы даже сказал отлично. Большинство на jQuery такое пишут, что плакать хочется
Ответить с цитированием
  #3 (permalink)  
Старый 16.01.2009, 16:48
Новичок на форуме
Отправить личное сообщение для s1ntez Посмотреть профиль Найти все сообщения от s1ntez
 
Регистрация: 16.01.2009
Сообщений: 6

спасибо за редактирование, создавал под гостем, потом уже не мог исправить.
Задача стояла перед самим собой, без использования фреймворков) Интересует в первую очередь улучшение кода и большое желание сделать нормальный конструктор.
Ответить с цитированием
  #4 (permalink)  
Старый 16.01.2009, 17:04
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

this.year = ( this.year == null ) ? this.oDate.getFullYear() : this.year;
this.year = this.year || this.oDate.getFullYear();


this.countMonth = countMonth;
function countMonth() {
    this.daysTotal = new Date(this.year, this.month + 1,0).getDate();
    this.firstDay = new Date(this.year, this.month, 1).getDay();
}
// Что это?


У таблиц есть методы insertRow, incertCell, ...

var cal_obj = this;
// Так понятней
var self = this;


th.setAttribute("colSpan", "5");
th.colSpan = 5;


Дальше лень
Ответить с цитированием
  #5 (permalink)  
Старый 16.01.2009, 17:11
Новичок на форуме
Отправить личное сообщение для s1ntez Посмотреть профиль Найти все сообщения от s1ntez
 
Регистрация: 16.01.2009
Сообщений: 6

this.countMonth = countMonth;
function countMonth() {
    this.daysTotal = new Date(this.year, this.month + 1,0).getDate();
    this.firstDay = new Date(this.year, this.month, 1).getDay();
}
// Что это?


Метод обьекта, чтобы определить текущий месяц, кол-во дней и первый день месяца по клику на кнопку "след. месяц")
Ответить с цитированием
  #6 (permalink)  
Старый 16.01.2009, 17:25
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от s1ntez
this.countMonth = countMonth; 
function countMonth() {
Такое вот зачем?
Ответить с цитированием
  #7 (permalink)  
Старый 16.01.2009, 17:52
Новичок на форуме
Отправить личное сообщение для s1ntez Посмотреть профиль Найти все сообщения от s1ntez
 
Регистрация: 16.01.2009
Сообщений: 6

Обьявление метода класса, для последующего доступа к нему через "."
Ответить с цитированием
  #8 (permalink)  
Старый 16.01.2009, 18:05
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Почему не сразу
this.countMonth = function() {
}
Ответить с цитированием
  #9 (permalink)  
Старый 16.01.2009, 18:24
Новичок на форуме
Отправить личное сообщение для s1ntez Посмотреть профиль Найти все сообщения от s1ntez
 
Регистрация: 16.01.2009
Сообщений: 6

потому что зеленый еще, не додумался) Спасибо, буду знать.
Ответить с цитированием
  #10 (permalink)  
Старый 16.01.2009, 18:26
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

this.render = function() {
А это тогда кто додумался?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск