コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

シンプルな DatePicker のカレンダー時刻と日付を JavaScript で実装

WBOY
リリース： 2016-05-16 18:10:39
オリジナル
1074 人が閲覧しました

jQ の ui にはそれがあり、YUI のウィジェットにもそれがあります。また、梱包もしっかりしており、互換性や汎用性も非常に優れています。そのため、コードを改善しても、当然コード量は減りません。基本的なライブラリをベースに構築したとしても、コードは数百行になります。
実際に使う場合は、そこまで充実した機能は必要ないかもしれません。自分自身で使用するのに十分な、単純なものを書いてみましょう。
さらに、私が投稿する内容は単なる娯楽であり、実用性が低いと過去に何人かの友人に指摘されましたので、今回はそれを端緒として、将来的には何かを投稿するつもりです。時には実用性も伴います。


[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

以下はソース コードです:
コードをコピー
コードは次のとおりです:

var DatePicker = function () {
var $ = function (i) {return document.getElementById(i)},
addEvent = function (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 = function () {var d1 = 新しい日付 (この), d2 = 新しい日付 (この); 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 'DatePicker';

this.update();
this.bind();
}
init.prototype = {

update : function (y, m) {
var con = [], week = ['Su','Mo','Tu' ,'We','Th','Fr','Sa'], D = this.D, _this = this;
fn = function (a, b) {return ''},
_html = '';
y && D.setyear(D.getFull Year() y);
m && D.setMonth(D.getMonth() m);
var 年 = D.getFull Year()、月 = D.getMonth() 1、日付 = D.getDate();
for (var i=0; i');
for (var i=0; i>for (var i=0; i' (i 1) '');
var toend = con.length%7;
if (toend != 0) for (var i=0; i<7-toend; i ) con.push('');
_html = '' fn("-1, null", "<<") fn("null, -1", "<") '' fn("null, 1", ">") fn("1, null", ">>") '';
for (var i=0; i' : i%7==0 ? ' ' : '') con[i] (i == con.length-1 ? '' : '');
!!このボックス ? this.box.innerHTML = _html : this.createBox(_html);
},
fillInput : function (y, m, d) {
var s = this.config.seprator || '/';
this.el.value = y s m s d;
this.box.style.display = 'none';
},
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['表示'] = is['表示'] = 'ブロック';
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 = 'none';
},
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';
マスク.フレームボーダー = 0;
box.style.cssText = '位置:絶対;表示:なし;z-index:9999';
mask.style.cssText = '位置:絶対;表示:なし;z-index:9998';
box.title = this.n 'DatePicker';
box.innerHTML = html;
document.body.appendChild(box);
document.body.appendChild(マスク);

返却ボックス;
}
}

初期化を返します。
}();

调用方式：
复制代代码如下:

new DatePicker('_DatePicker_demo', {
inputId: 'date-input',
className: 'date-picker-wp',
区切り文字: '-'
});

第一のパラメータ: 例名、
第二のパラメータ一個のオブジェクト文字面量、入框の id (必須)、弹出日ボックスのクラス名、日期样式の分間隔を含む'-'、'/'、等。後の 2 つは省略可能で、値 'datepicker'、'/'。
関連ラベル：
カレンダー
ソース：php.cn
前の記事：jQuery_jquery をベースにした自作のスマート プロンプト プラグイン 次の記事：JQuery セレクターと filters_jquery の概要
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1913
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2083
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1756
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1655
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1665
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
年 '/' 月 '/' 日付 '