ホームページ > 記事 > ウェブフロントエンド > jQuery_jquery に基づく日付選択コントロール
jQuery_jquery に基づく日付選択コントロール
- WBOYオリジナル
- 2016-05-16 18:43:141431ブラウズ
しかし、いくつかの問題もあります。第一に、カレンダーの描画が少し遅いこと、第二に、IE との互換性があまり良くないこと、第三に、jQuery ベースではないことです。
これはまだ古いルールです。実行する前に効果を確認してください
これは、よりクールな Ext スタイルです。
上の図から、このコントロールには実際には 2 つのビュー (日付と月のビュー、および年と月の選択ビュー) があることがわかります。
1: HTML から始めましょう
日付コントロールの HTML を決定することは、実際には比較的簡単です。これは明らかにリスト データ形式であり、もちろん主にテーブルを使用するためです。
2 つのビューはそれぞれ 2 つの Div でラップされており、Div の表示と非表示を制御することでビューを切り替えることができます。完全な HTMl 構造については、IEDeveloper を使用してデモ構造を確認してください。私は自分でスクリーンショットを撮りました。
2: CSS ベースの記述。 HTML とレンダリングについて
実際には Ext スタイルなので、ext の CSS と画像を直接コピーしています。 。
CSS は分析されず、コードが直接アップロードされます。
ブログパークの構文ハイライトは CSS をサポートしていないため、ここには投稿しません。ダウンロード アドレスを教えてください:
使用されているすべての画像:
3: CSS が完了したら、JavaScript を書き始めます。
上に完全なコードがあります
コードをコピーします コードは次のとおりです:
;(function($) {
var userAgent = window.navigator.userAgent.toLowerCase();
$.browser.msie8 = $.browser.msie && /msie 8.0/i. test(userAgent);
$.browser.msie7 = $.browser.msie && /msie 7.0/i.test(userAgent);
$.browser.msie6 = !$.browser.msie8 && !$。 browser.msie7 && $.browser.msie && /msie 6.0/i.test(userAgent);
Date.prototype.Format = function(format) {
var o = {
"M ": this .getMonth() 1、
"d ": this.getDate()、
"h ": this.getHours()、
"H ": this.getHours()、
"m ": this.getMinutes(),
"s ": this.getSeconds(),
"q ": Math.floor((this.getMonth() 3) / 3),
"w" : "0123456".indexOf(this.getDay()),
"S": this.getMilliseconds()
};
if (/(y )/.test(format)) {
format = format.replace(RegExp.$1, (this.getFull Year() "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" k ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" o[k]).substr(("" o[k]).length));
}
形式を返します。
};
関数 DateAdd(間隔, 数値, idate) {
数値 = parseInt(数値);
変数日付;
if (typeof (idate) == "string") {
date = idate.split(/D/);
eval("var date = new Date(" date.join(",") ")");
}
if (typeof (idate) == "オブジェクト") {
date = new Date(idate.toString());
}
switch (interval) {
case "y": date.setFullyear(date.getFull Year() 数値);壊す;
case "m": date.setMonth(date.getMonth() 数値);壊す;
ケース "d": date.setDate(date.getDate() 数値);壊す;
case "w": date.setDate(date.getDate() 7 * number);壊す;
ケース "h": date.setHours(date.getHours() 数値);壊す;
ケース "n": date.setMinutes(date.getMinutes() 数値);壊す;
case "s": date.setSeconds(date.getSeconds()number);壊す;
case "l": date.setMilliseconds(date.getMilli秒() 数値);壊す;
}
返却日;
};
$.fn.datepicker = function(o) {
var def = {
weekStart: 0,
weekName: ["日", "一", "二", "三", "四", "五", "六"], //星期的格式
monthName: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"], //月份的格式
monthp: "月",
年: new Date().getFull Year (), //定义年の变量の初期値
月: new Date().getMonth() 1, //所定义月の变量の初期値
日: new Date().getDate(), //定日の变量的初期值
today: new Date(),
btnOk: " 确定 ",
btnCancel: " 取消 ",
btnToday: "今天",
inputDate : null、
onReturn: false、
バージョン: "1.1"、
applyrule: false、//function(){};return rules={startdate,endate};
showtarget: null、
ピッカー: ""
};
$.extend(def, o);
var cp = $("#BBIT_DP_CONTAINER");
if (cp.length == 0) {
var cpHA = [];
cpHA.push("
");
if ($.browser.msie6) {
cpHA.push('');
}
cpHA.push("
");
//输出下来框
cpHA.push("");
");
cpHA.push("");
cpHA.push("
"); if ($.browser.msie6) {
cpHA.push('');
}
cpHA.push("
| "); //头哟 cpHA.push(" cpHA.push(""); cpHA.push(" | ||
| "); //周 cpHA.push("
//生成tBody结束 cpHA.push(" | ||
//输出下来框
cpHA.push("
| ", def.monthName[0], " | ", def.monthName[6], " | "); | |
| ", def.monthName[1], " | ", def.monthName[7], " | "); | |
| ", def.monthName[2], " | ", def.monthName[8], " | "); | |
| ", def.monthName[3], " | ", def.monthName[9], " | "); | |
| ", def.monthName[4], " | ", def.monthName[10], " | "); | |
| ", def.monthName[5], " | ", def.monthName[11], " | "); | |
| "); | |||
cpHA.push("
cpHA.push("
var s = cpHA.join("");
$(document.body).append(s);
var cp = $("#BBIT_DP_CONTAINER");
initevents();
}
function initevents() {
//1 今日 btn;
$("#BBIT-DP-TODAY").click(returntoday); click(returnfalse);
$("#BBIT_DP_INNER tbody").click(tbhandler);
$("#BBIT_DP_RIGHTBTN").click (nextm);
$("#BBIT_DP_YMBTN").click(showym);
$("#BBIT-DP-MP"); -MP-PREV").click(mpprevy);
$("#BBIT-DP-MP-NEXT").click(mpnexty);
$("#BBIT-DP-MP-OKBTN") .click(mpok);
$("#BBIT-DP-MP-CANCELBTN").click(mpcancel);
}
関数 mpcancel() {
$("#BBIT-DP -MP").animate({ トップ: -193 }, { 継続時間: 200, complete: function() { $("#BBIT-DP-MP").hide(); } });
return false ;
}
関数 mpok() {
def.年 = def.cy;
def.日 = 1; "#BBIT-DP-MP").animate({ トップ: -193 }, { 継続時間: 200, complete: function() { $("#BBIT-DP-MP").hide(); } });
writecb();
return false;
}
関数 mpprevy() {
var y = def.ty - 10
def.ty = y;
rr年(y);
false を返します。
}
function mpnexty() {
var y = def.ty 10
def.ty = y;
rr年(y);
false を返します。
}
関数 rryear(y) {
var s = y - 4;
var ar = [];
for (var i = 0; i ar.push(s i);
ar.push(s i 5);
}
$("#BBIT-DP-MP td.bbit-dp-mp-year").each(function(i) {
if (def. Year == ar[i]) {
$(this).addClass("bbit-dp-mp-sel");
}
else {
$(this).removeClass("bbit-dp-mp-sel") );
}
$(this).html("" ar[i] "").attr(" xyear", ar[i]);
});
}
関数 mpclick(e) {
var パネル = $(this);
var et = e.target || e.src要素;
var td = getTd(et);
if (td == null) {
return false;
}
if ($(td).hasClass("bbit-dp-mp-month")) {
if (!$(td).hasClass("bbit-dp-mp-sel" )) {
var ctd =panel.find("td.bbit-dp-mp-month.bbit-dp-mp-sel");
if (ctd.length > 0) {
ctd.removeClass("bbit-dp-mp-sel");
}
$(td).addClass("bbit-dp-mp-sel")
def.cm = parseInt($(td).attr("xmonth"));
}
}
if ($(td).hasClass("bbit-dp-mp-year")) {
if (!$(td).hasClass("bbit-dp- mp-sel")) {
var ctd =panel.find("td.bbit-dp-mp-year.bbit-dp-mp-sel");
if (ctd.length > 0) {
ctd.removeClass("bbit-dp-mp-sel");
}
$(td).addClass("bbit-dp-mp-sel")
def.cy = parseInt($(td).attr("xyear"));
}
}
false を返します。
}
function showym() {
var mp = $("#BBIT-DP-MP");
var y = def.年;
def.cy = def.ty = y;
var m = def.Month - 1;
def.cm = m;
var ms = $("#BBIT-DP-MP td.bbit-dp-mp-month");
for (var i = ms.length - 1; i >= 0; i--) {
var ch = $(ms[i]).attr("xmonth");
if (ch == m) {
$(ms[i]).addClass("bbit-dp-mp-sel");
}
else {
$(ms[i]).removeClass("bbit-dp-mp-sel");
}
}
rryear(y);
mp.css("トップ", -193).show().animate({ トップ: 0 }, { 継続時間: 200 });
}
function getTd(elm) {
if (elm.tagName.toUpperCase() == "TD") {
return elm;
}
else if (elm.tagName.toUpperCase() == "BODY") {
return null;
}
else {
var p = $(elm).parent();
if (p.length > 0) {
if (p[0].tagName.toUpperCase() != "TD") {
return getTd(p[0]);
}
else {
return p[0];
}
}
}
null を返します。
}
function tbhandler(e) {
var et = e.target || e.src要素;
var td = getTd(et);
if (td == null) {
return false;
}
var $td = $(td);
if (!$(td).hasClass("bbit-dp-disabled")) {
var s = $td.attr("xdate");
var arrs = s.split("-");
cp.data("indata", new Date(arrs[0], parseInt(arrs[1], 10) - 1, arrs[2]));
returndate();
}
false を返します。
}
関数 returnfalse() {
return false;
}
function prevm() {
if (def.Month == 1) {
def. Year--;
def.Month = 12;
}
else {
def.Month--
}
writecb();
false を返します。
}
関数 nextm() {
if (def.Month == 12) {
def. Year ;
def.Month = 1;
}
else {
def.Month
}
writecb();
false を返します。
}
function returntoday() {
cp.data("indata", new Date());
returndate();
}
関数 returndate() {
var ct = cp.data("ctarget");
var ck = cp.data("cpk");
var re = cp.data("onReturn");
var ndate = cp.data("indata")
var ads = cp.data("ads");
var ade = cp.data("ade");
var dis = false;
if (広告 && ndate < 広告) {
dis = true;
}
if (ade && ndate > ade) {
dis = true;
}
if (dis) {
return;
}
if (re && jQuery.isFunction(re)) {
re.call(ct[0], cp.data("indata"));
}
else {
ct.val(cp.data("indata").Format("yyyy-MM-dd"));
}
ck.attr("isshow", "0");
cp.removeData("ctarget").removeData("cpk").removeData("indata").removeData("onReturn")
.removeData("ads").removeData("ade");
cp.css("可視性", "非表示");
ct = ck = null;
}
function writecb() {
var tb = $("#BBIT_DP_INNER tbody");
$("#BBIT_DP_YMBTN").html(def.monthName[def.Month - 1] def.monthp " " def. Year);
var firstdate = new Date(def. Year, def.Month - 1, 1);
var diffday = def.weekStart - firstdate.getDay();
var showmonth = def.Month - 1;
if (diffday > 0) {
diffday -= 7;
}
var startdate = DateAdd("d", diffday, firstdate);
var enddate = DateAdd("d", 42, startdate);
var ads = cp.data("ads");
var ade = cp.data("ade");
var bhm = [];
var tds = def.today.Format("yyyy-MM-dd");
var indata = cp.data("indata");
var ins = indata != null ? indata.Format("yyyy-MM-dd") : "";
for (var i = 1; i if (i % 7 == 1) {
bhm.push("
}
var ndate = DateAdd("d", i - 1, startdate);
var tdc = [];
var dis = false;
if (広告 && ndate < 広告) {
dis = true;
}
if (ade && ndate > ade) {
dis = true;
}
if (ndate.getMonth() < showmonth) {
tdc.push("bbit-dp-prevday");
}
else if (ndate.getMonth() > showmonth) {
tdc.push("bbit-dp-nextday");
}
if (dis) {
tdc.push("bbit-dp-disabled");
}
else {
tdc.push("bbit-dp-active");
}
var s = ndate.Format("yyyy-MM-dd");
if (s == tds) {
tdc.push("bbit-dp-today");
}
if (s == ins) {
tdc.push("bbit-dp-selected");
}
bhm.push("
if (i % 7 == 0) {
bhm.push("
}
}
tb.html(bhm.join(""));
}
var dateReg = /^(d{1,4})(-|/|.)(d{1,2})2(d{1,2})$/;
return $(this).each(function() {
var obj = $(this).addClass("bbit-dp-input");
var picker = $(def.picker);
def.showtarget == null && obj.after(picker);
picker.click(function(e) {
var isshow = $(this).attr("isshow");
//先隐藏
var me = $(this);
if (cp.css("visibility") == "visible") {
cp.css("avisibility", "hidden") ;
}
if (isshow == "1") {
me.attr("isshow", "0");
cp.removeData("ctarget").removeData("cpk") ").removeData("indata").removeData("onReturn");
return false;
}
var v = obj.val();
if (v != "") {
v = v.match(dateReg);
}
if (v == null || v == "") {
def. Year = new Date().getFull Year() ;
def.Month = new Date().getMonth() 1;
def.Day = new Date().getDate();
def.inputDate = null
}
else {
def. Year = parseInt(v[1], 10);
def.Month = parseInt(v[3], 10);
def.Day = parseInt(v[4], 10); );
def.inputDate = new Date(def.年, def.月 - 1, def.日);
cp.data("ctarget", obj).data("cpk" 、me).data("indata", def.inputDate).data("onReturn", def.onReturn);
if (def.applyrule && $.isFunction(def.applyrule)) {
var rules = def.applyrule.call(obj, obj[0].id);
if (rule) {
if (rule.startdate) {
cp.data("ads", rules.startdate);
}
else {
cp.removeData("ads");
}
if (rule.enddate) {
cp.data("ade", rules.enddate);
}
else {
cp.removeData("ade");
}
}
}
else {
cp.removeData("ads").removeData("ade")
}
writecb();
$("#BBIT-DP-T").height(cp.height());
var t = def.showtarget ||オブジェクト;
var pos = t.offset();
var height = t.outerHeight();
var newpos = { left: pos.left、top: pos.top height };
var w = cp.width();
var h = cp.height();
var bw = document.documentElement.clientWidth;
var bh = document.documentElement.clientHeight;
if ((newpos.left w) >= bw) {
newpos.left = bw - w - 2;
}
if ((newpos.top h) >= bh) {
newpos.top = pos.top - h - 2;
}
if (newpos.left newpos.left = 10;
}
if (newpos.top newpos.top = 10;
}
$("#BBIT-DP-MP").hide();
newpos.visibility = "可視";
cp.css(newpos);
//cp.show();
$(this).attr("isshow", "1");
$(document).one("click", function(e) {
me.attr("isshow", "0");
cp.removeData("ctarget").removeData(" cpk").removeData("indata");
cp.css("visibility", "hidden");
});
false を返します。
});
});
};
})(jQuery);
那は次に分析の主要な手順といくつかの注意事項:
首先も套版化编写jQuery控訴の子:
复制代码代码如下:
;(function($) {
//$.fn.extend(datepicker:function(o){})
$.fn.datepicker= function(o) も使用できます{
} ( これらのパラメーターの意味を説明するコメントがコードに追加されました。weekName、monthName など、複数のパラメーターが多言語用に設定されています
コードをコピーします
コードは次のとおりです:
;(function($) {
//$.fn.extend(datepicker:function(o){})
$.fn.datepicker= function(o) も使用できます{
} ( これらのパラメーターの意味を説明するコメントがコードに追加されました。weekName、monthName など、複数のパラメーターが多言語用に設定されています
コードをコピーします
コードは次のとおりです: var def = { weekStart: 0,//週が始まる曜日、0日曜日を表します weekName: ["Day", "Monday" , "two", "three", "four", "five", "six"], //週形式
monthName: ["one" , "two", "three", "four", " Five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"], //形式月のmonthp: "month",// 月のサフィックス
年: new Date().getFull Year(), // 年
月を定義する変数の初期値: new Date().getMonth() 1, //月を定義する変数の初期値
Day: new Date().getDate(), //日を定義する変数の初期値
today: new Date(),//today
btnOk: "OK",//OK ボタンのテキスト
btnCancel: "Cancel", //キャンセル ボタンのテキスト
btnToday: "Today" , //今日のボタンのテキスト
inputDate: null, //役に立たない、コード内のストレージにのみ使用されます Data
onReturn: false, //日付が選択されたときに呼び出される関数
version: "1.0", //Version
applyrule: false, //日付選択ルール、選択可能な日付範囲を設定できます function (){};return rules={startdate,endate};
showtarget: null , // 表示キャリア、カレンダー展開が依存するオブジェクト、デフォルトはオブジェクト自体です
picker: "" // 追加のクリックイベント Object
$.extend(def, o); ;//渡されたパラメータを使用してデフォルトの値を入力します
2 番目の部分は、月ビューと年と月の選択を初期化することです。ビューの HTML は
コードをコピーします
年: new Date().getFull Year(), // 年
月を定義する変数の初期値: new Date().getMonth() 1, //月を定義する変数の初期値
Day: new Date().getDate(), //日を定義する変数の初期値
today: new Date(),//today
btnOk: "OK",//OK ボタンのテキスト
btnCancel: "Cancel", //キャンセル ボタンのテキスト
btnToday: "Today" , //今日のボタンのテキスト
inputDate: null, //役に立たない、コード内のストレージにのみ使用されます Data
onReturn: false, //日付が選択されたときに呼び出される関数
version: "1.0", //Version
applyrule: false, //日付選択ルール、選択可能な日付範囲を設定できます function (){};return rules={startdate,endate};
showtarget: null , // 表示キャリア、カレンダー展開が依存するオブジェクト、デフォルトはオブジェクト自体です
picker: "" // 追加のクリックイベント Object
$.extend(def, o); ;//渡されたパラメータを使用してデフォルトの値を入力します
2 番目の部分は、月ビューと年と月の選択を初期化することです。ビューの HTML は
コードをコピーします
コードは次のとおりです:
//日付選択コントロールに特別な ID を与え、これでオブジェクトを取得しますID を取得し、オブジェクトが存在するかどうかを判断し、それを直接使用します // 日付の HTML はシングルトンを使用します。つまり、HTML のコピーが 1 つのページに 1 つだけ生成されます。 var cp = $("#BBIT_DP_CONTAINER " ); if (cp.length == 0) { var cpHA = []; //古いルールでは、配列を使用して HTML を結合し、最後に innerHTML を使用してコンテナにアタッチしてパフォーマンスを向上させます
cpHA.push(""); .msie6) { / /IE6 ポップアップ レイヤー カバーの場合は、
cpHA.push('');
}
cpHA.push("< table class='dp-maintable' cellpacing='0' cellpadding='0' style='width:175px;'>");
//头よ
cpHA.push("
");
cpHA.push("");
cpHA.push("
");
//week
cpHA.push ("
}
cpHA.push("< table class='dp-maintable' cellpacing='0' cellpadding='0' style='width:175px;'>
//头よ
cpHA.push("
| < ;em> | /a> |
cpHA.push("");
cpHA.push("
//week
cpHA.push ("
