집 >
웹 프론트엔드 >
JS 튜토리얼 >
간단한 DatePicker 달력_시간 및 날짜가 자바스크립트로 구현됨
간단한 DatePicker 달력_시간 및 날짜가 자바스크립트로 구현됨
WBOY
풀어 주다： 2016-05-16 18:10:39
원래의
1126명이 탐색했습니다.
jQ의 UI에도 있고, YUI의 위젯에도 있습니다. 게다가 포장도 탄탄해서 호환성이나 활용도가 아주 좋습니다. 그래서 코드가 개선된다고 해서 코드의 양이 자연스럽게 줄어들지는 않습니다. 기본 라이브러리를 기반으로 구축하더라도 코드는 수백 줄에 이릅니다. 실제로 사용해보면 이렇게 완전한 기능이 필요하지 않을 수도 있습니다. 우리가 사용할 만큼 간단하고 간단한 것을 작성해 봅시다. 게다가 예전에 몇몇 친구들이 제가 올리는 것들이 오락용일 뿐이고 실용성이 거의 없다고 지적한 적이 있는데, 이번에는 시작으로 여기고 앞으로는 뭔가 올려보겠습니다. 때때로 약간의 실용성을 가지고.
var DatePicker = 함수() { var $ = 함수(i) {return document.getElementById(i)}, addEvent = 함수(o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on' e, function(){f.call(o)})}, getPos = function (el) { for (var pos = {x:0, y:0}; el = el.offsetParent) { pos.x = el.offsetLeft; pos.y = el.offsetTop; } 반품 POS; }
var init = function(n, config) { window[n] = this; Date.prototype._fd = function () {var d = new Date(this); d.setDate(1); d.getDay()}를 반환합니다. Date.prototype._fc = 함수() {var d1 = 새 날짜(this), d2 = 새 날짜(this); d1.setDate(1); d2.setDate(1); d2.setMonth(d2.getMonth() 1); 반환(d2-d1)/86400000;}; this.n = n; this.config = 구성; this.D = 새 날짜; this.el = $(config.inputId); this.el.title = this.n '날짜 선택기';
this.update(); this.bind(); } init.prototype = {
update : function (y, m) { var con = [], week = ['Su','Mo','Tu' ,'우리','목','Fr','사'], D = this.D, _this = this; fn = 함수 (a, b) {return '
'}, _html = '
'; y && D.setYear(D.getFullYear() y); m && D.setMonth(D.getMonth() m); var year = D.getFullYear(), 월 = D.getMonth() 1, 날짜 = D.getDate(); for (var i=0; i'); for (var i=0; ifor (var i=0; i' (i 1) ''); var toend = con.length%7; if (toend != 0) for (var i=0; i_html = '
' fn("-1, null", "<<") fn("null, -1", "<") '
' 연도 '/' 월 '/' 날짜 '
' fn("null, 1", ">") fn("1, null", ">>") ''; for (var i=0; i!!this.box ? this.box.innerHTML = _html : this.createBox(_html); }, fillInput : 함수(y, m, d) { var s = this.config.seprator || '/'; this.el.value = ysmsd; this.box.style.display = '없음'; }, show : function () { var s = this.box.style, is = this.mask.style; s['left'] = is['left'] = getPos(this.el).x 'px'; s['top'] = is['top'] = getPos(this.el).y this.el.offsetHeight 'px'; s['display'] = is['display'] = '차단'; is['width'] = this.box.offsetWidth - 2 'px'; is['height'] = this.box.offsetHeight - 2 'px'; }, hide : function () { this.box.style.display = 'none'; this.mask.style.display = '없음'; }, bind : function () { var _this = this; addEvent(document, 'click', function (e) { e = e || window.event; var t = e.target || e.srcElement; if (t. title != _this.n 'DatePicker') {_this.hide()} else {_this.show()} }) }, createBox : function(html) { var box = this.box = document.createElement('div'), 마스크 = this.mask = document.createElement('iframe'); box.className = this.config.className || '날짜 선택기'; mask.src = 'javascript:false'; mask.frameBorder = 0; box.style.cssText = '위치:절대;표시:없음;z-index:9999'; mask.style.cssText = '위치:절대;표시:없음;z-index:9998'; box.title = this.n 'DatePicker'; box.innerHTML = html; document.body.appendChild(상자); document.body.appendChild(마스크);
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
