>

Firefox的日历控件,手把手教你打造一款别致的时

- 编辑:至尊游戏网站 -

Firefox的日历控件,手把手教你打造一款别致的时

手把手教您营造大器晚成款卓越的小时线插件

2016/06/17 · JavaScript · 1 评论 · 插件

原来的作品出处: 郑武江(@OAuth_v2)   

图片 1

率先呢,作者要多谢一下和本人协作的设计员同学,给了自家生龙活虎份如此完美的大运线设计稿。获得设计稿后,大家率先要做的是去分析漫天小说的协会,及设计意图。当然这一个干活儿大家得以提前完结,在设计师设计的时候实行充足交流,而当大家起始去完结的时候就越发弹无虚发了。最先早先,大家依然先看看最终的人机联作功效:

图片 2

先是步,深入分析控件架构,说多了反而轻易招惹误导,直接看图吧,直观明了:

图片 3

接下去,作者来讲说我为啥要如此去划分。由此可知,在笔者眼里剖判一个控件的布局,其实就是尝试去开掘成的规律性的事物。如上海体育地方,在月份栏很醒目是在每月第二十七日的职务上方展现过一阵子标签,因此首先行自然能够单独成二个在一定岗位突显月份音讯的单独区域。而第二行更醒目,将时刻线上的天天从左往右挨个儿展现就能够了,很赫赫有名那风流浪漫行上只会现身具体天的数量,所以本人也将它独自成多个区域。再往下,大家先看最上边包车型地铁刻度区域,这里存在必然的吸引性,由于每月第一天的那条线中度正巧填充满,而多个月的率后天恰好将整条刻度划分成一个二个的小区间,但其实,小编认为它们其实正是一条横向联网的刻度线,所以应当全套黄金时代行是三个完完全全。最终再来讲说梅红、青黑重叠的那条区域,我们能够把杏黄区域富含在青黛色区域之中,也足以分为多个同级的区域重叠在风姿洒脱道。但此处必要专注一点:花青区域标识的是叁个时光间隔,它的水平地点和宽窄是时刻可变的,所以,考虑到背后定位的实惠,未知的急需变动,小编更赞成分成五个独立区域重叠起来。

其次步,细化每个区域中的协同点,差别点。月份栏,没反常,便是在每月第一天的职位呈现月份标签,独一不一样的是每月第一天的横坐标(left)。日期栏基本与月份栏景况相近,多或多或少不风姿浪漫在于得以达成进度初级中学结束学业生升学考试虑优越呈现【前几日】。雾灰线非常粗略,从左到右生龙活虎拉到底,铁蓝线很显明是在当选有个别事件标签的时候才会身不由己,所以期初也毫无思虑。最终仍然刻度栏相对复杂一点,水平地点上的差异不再多说,每月第一天内需充实高刻度样式,何况为了便于前边与事件标签关联,大家必要在扭转刻度的时候,在各样刻度上存上对应的日子。大约正是这么,上边就足以出手工编织码了。

其三步,搭框架。就就如画版画相像,先勾勒出全数作品的龙骨,再稳步细化。

图片 4

代码很简短,先创设一个岁月线全局容器,再往里面写入第一步和第二步中我们解析出来的多少个独立区块,最终想整个时间线放入页面中准备好的节点(wrap)中。

第四步,写静态数据,细节优化。根据后面的解析,种种部分的器皿都早就筹划伏贴,接着就该将各部分应该展现的开始和结果写入到对应之处中去了,这一步代码会微微多些。何况依据自个儿的急需,或者在有些判定逻辑上会略显差异,先看看本人的亲自过问代码吧:

JavaScript

var Utils = { // 格式化数字,小于10补前置0 prefixZero: function(num卡塔尔(英语:State of Qatar) { return num < 10 ? '0' + num : num; } }; function create提姆eline(from, to卡塔尔(英语:State of Qatar) { var Timeline, f = typeof from === 'string' ? new Date(from.replace(/-/g, '/'卡塔尔国卡塔尔国 : from, t = typeof to === 'string' ? new Date(to.replace(/-/g, '/'卡塔尔国卡塔尔(英语:State of Qatar) : to, timestamp = t - f, day = 24 * 60 * 60 * 1000, today = new Date(卡塔尔国, miliStart = f.getTime(卡塔尔, dayCount = Math.floor(timestamp / day卡塔尔国 + 1, // 总括时间轴上呈现的总天数 offLeft = 12, // 早先日期右侧距 offRight = 12, // 结束日期侧面距 offDay = 20, // 日与日之间的间隔 lineLength = dayCount * offDay + offLeft + offRight; // 总计时间轴的尺寸 var line = $('<div class="J_TimeLine timeline-slider"></div>'), monthLabel, dayLabel, dayDiff, scaleLabel; line.css({width: lineLength, height: 134}); line.html('<div class="J_MonthLabel month-label"></div>' + '<div class="J_DayLabel day-label"></div>' + '<div class="J_ScaleLine scale-line"></div>' + '<div class="J_DayDiff day-diff"></div>' + '<div class="J_ScaleLabel scale-label"></div>'); monthLabel = line.find('.J_MonthLabel'); dayLabel = line.find('.J_DayLabel'); dayDiff = line.find('.J_DayDiff'); scaleLabel = line.find('.J_ScaleLabel'); for (var i = 0; i < dayCount; i++) { var d = new Date(miliStart + i * day), left = i * offDay + offLeft, monthObj, dayObj, scaleObj; dayObj = $('<span class="J_Day day"></span>'卡塔尔(英语:State of Qatar); dayObj.css('left', left - 9卡塔尔(قطر‎; dayObj.html(d.getDate(卡塔尔(قطر‎卡塔尔国; // 要是【明日】在岁月轴范围内,则重申展现 if (d.getFullYear(卡塔尔(英语:State of Qatar) === today.getFullYear(卡塔尔国 && d.getMonth(卡塔尔(قطر‎ === today.getMonth(卡塔尔(قطر‎ && d.getDate(卡塔尔国 === today.getDate(卡塔尔(英语:State of Qatar)卡塔尔国 { dayObj.addClass('today'卡塔尔国; } scaleObj = $('<span class="J_Scale scale"></span>'卡塔尔(قطر‎; scaleObj.css('left', left卡塔尔国; scaleObj.attr('data-date', d.getFullYear(卡塔尔(英语:State of Qatar) + '/' + Utils.prefixZero(d.getMonth(卡塔尔(قطر‎ + 1卡塔尔国 + '/' + Utils.prefixZero(d.getDate(卡塔尔国卡塔尔(قطر‎卡塔尔(英语:State of Qatar); // 在每月第一天的上面展现月份音信 if (d.getDate(卡塔尔(قطر‎ === 1卡塔尔国 { scaleObj.addClass('first-day'卡塔尔国; monthObj = $('<span class="J_Month month"></span>'); monthObj.css('left', left); monthObj.html(d.getFullYear() + '/' + Utils.prefixZero(d.getMonth() + 1)); monthLabel.append(monthObj); } dayLabel.append(dayObj); scaleLabel.append(scaleObj); } tw.html('').append(line); Timeline = { slider: line, monthLabel: monthLabel, dayLabel: dayLabel, dayDiff: dayDiff, scaleLabel: scaleLabel }; return Timeline; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
var Utils = {
    // 格式化数字,小于10补前置0
    prefixZero: function(num) {
        return num < 10 ? '0' + num : num;
    }
};
 
function createTimeline(from, to) {
    var Timeline,
        f = typeof from === 'string' ? new Date(from.replace(/-/g, '/')) : from,
        t = typeof to === 'string' ? new Date(to.replace(/-/g, '/')) : to,
        timestamp = t - f,
        day = 24 * 60 * 60 * 1000,
        today = new Date(),
        miliStart = f.getTime(),
        dayCount = Math.floor(timestamp / day) + 1, // 计算时间轴上显示的总天数
        offLeft = 12, // 初始日期左边距
        offRight = 12, // 结束日期右边距
        offDay = 20, // 日与日之间的间距
        lineLength = dayCount * offDay + offLeft + offRight; // 计算时间轴的长度
 
    var line = $('<div class="J_TimeLine timeline-slider"></div>'),
        monthLabel, dayLabel, dayDiff, scaleLabel;
 
    line.css({width: lineLength, height: 134});
    line.html('<div class="J_MonthLabel month-label"></div>'
        + '<div class="J_DayLabel day-label"></div>'
        + '<div class="J_ScaleLine scale-line"></div>'
        + '<div class="J_DayDiff day-diff"></div>'
        + '<div class="J_ScaleLabel scale-label"></div>');
    monthLabel = line.find('.J_MonthLabel');
    dayLabel = line.find('.J_DayLabel');
    dayDiff = line.find('.J_DayDiff');
    scaleLabel = line.find('.J_ScaleLabel');
 
    for (var i = 0; i < dayCount; i++) {
        var d = new Date(miliStart + i * day),
            left = i * offDay + offLeft,
            monthObj, dayObj, scaleObj;
 
        dayObj = $('<span class="J_Day day"></span>');
        dayObj.css('left', left - 9);
        dayObj.html(d.getDate());
        // 如果【今天】在时间轴范围内,则强调显示
        if (d.getFullYear() === today.getFullYear() && d.getMonth() === today.getMonth() && d.getDate() === today.getDate()) {
            dayObj.addClass('today');
        }
 
        scaleObj = $('<span class="J_Scale scale"></span>');
        scaleObj.css('left', left);
        scaleObj.attr('data-date', d.getFullYear() + '/' + Utils.prefixZero(d.getMonth() + 1) + '/' + Utils.prefixZero(d.getDate()));
        // 在每月第一天的上方显示月份信息
        if (d.getDate() === 1) {
            scaleObj.addClass('first-day');
            monthObj = $('<span class="J_Month month"></span>');
            monthObj.css('left', left);
            monthObj.html(d.getFullYear() + '/' + Utils.prefixZero(d.getMonth() + 1));
            monthLabel.append(monthObj);
        }
 
        dayLabel.append(dayObj);
        scaleLabel.append(scaleObj);
    }
 
    tw.html('').append(line);
    Timeline = {
        slider: line,
        monthLabel: monthLabel,
        dayLabel: dayLabel,
        dayDiff: dayDiff,
        scaleLabel: scaleLabel
    };
    return Timeline;
}

第五步,整合服务端数据。经过以上代码的管理,我们只需轻巧调用createTimeline(fromDate, toDate)就可以在页面上获取一条静态的时间轴,看起来像:

图片 5

而我们在前方的劳作中早已对每一个刻度标志了对应日期,今后只需从服务端将如何日期对于有照顾的出格事件获得回来并和时间轴上的刻度进行关联,大家的办事就许多了。这里大家就不去模拟服务端的呼吁了,大家一直协会后生可畏份静态数据来营造演示效果。大家假若服务端再次来到的数据构造如下:

JavaScript

var serverData = { snapshotTimes: [{ date: '2016/06/01', content: 'JD618大促运维' }, { date: '2014/06/18', content: '京东618大促进行时' }, { date: '二零一六/09/15', content: '贰零壹陆年月夕放假' }] };

1
2
3
4
5
6
7
8
9
10
11
12
var serverData = {
    snapshotTimes: [{
        date: '2016/06/01',
        content: 'JD618大促启动'
    }, {
        date: '2016/06/18',
        content: '京东618大促进行时'
    }, {
        date: '2016/09/15',
        content: '2016年中秋节放假'
    }]
};

大家得以行使上边包车型客车代码,将数据绑定届时间轴刻度上:

JavaScript

var data = serverData.snapshotTimes, tLen = data.length, tempDate, tlBegin, tlEnd; tlBegin = data[0].date; tempDate = new Date(data[tLen

  • 1].date卡塔尔(英语:State of Qatar); // 时间轴最终留给四个月空时段,保障时间轴的视觉效果雅观 if (tempDate.getMonth(卡塔尔国 > 8卡塔尔 { tlEnd = (tempDate.getFullYear(卡塔尔 + 1卡塔尔(英语:State of Qatar) + '/0' + ((tempDate.getMonth(卡塔尔国 + 3卡塔尔(英语:State of Qatar) % 11) + '/' + Utils.prefixZero(tempDate.getDate(卡塔尔(قطر‎卡塔尔(قطر‎; } else { tlEnd = tempDate.getFullYear(卡塔尔 + '/' + Utils.prefixZero(tempDate.getMonth(卡塔尔 + 4卡塔尔(英语:State of Qatar)
  • '/' + Utils.prefixZero(tempDate.getDate(卡塔尔(英语:State of Qatar)卡塔尔(قطر‎; } // 依照服务端数据的发端日期,开端化时间轴 TL = createTimeline(tlBegin, tlEnd卡塔尔(英语:State of Qatar); // 依据日期,将事件触发器绑到对应刻度上 $.each(data, function(idx, d卡塔尔国{ var sc = TL.scaleLabel.find('.J_Scale[data-date="' + d.date + '"]'), sct = sc.attr('data-date'), scArr = sct.split('/'); sc.addClass('has-snap').html('<a href="#' + sct + '" class="J_SnapshotLink snapshot-link">' + scArr[1] + '月' + scArr[2] + '</a>'); });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var data = serverData.snapshotTimes,
    tLen = data.length, tempDate,
    tlBegin, tlEnd;
tlBegin = data[0].date;
tempDate = new Date(data[tLen - 1].date);
// 时间轴最后预留三个月空时段,保证时间轴的视觉效果美观
if (tempDate.getMonth() > 8) {
    tlEnd = (tempDate.getFullYear() + 1) + '/0' + ((tempDate.getMonth() + 3) % 11) + '/' + Utils.prefixZero(tempDate.getDate());
} else {
    tlEnd = tempDate.getFullYear() + '/' + Utils.prefixZero(tempDate.getMonth() + 4) + '/' + Utils.prefixZero(tempDate.getDate());
}
// 根据服务端数据的起始日期,初始化时间轴
TL = createTimeline(tlBegin, tlEnd);
// 根据日期,将事件触发器绑到对应刻度上
$.each(data, function(idx, d){
    var sc = TL.scaleLabel.find('.J_Scale[data-date="' + d.date + '"]'),
        sct = sc.attr('data-date'),
        scArr = sct.split('/');
    sc.addClass('has-snap').html('<a href="#' + sct + '" class="J_SnapshotLink snapshot-link">' + scArr[1] + '月' + scArr[2] + '</a>');
});

现行反革命,大家的小时轴看起来更丰硕了:

图片 6

第六步,绑定事件,落成点击对应标签选中对应区间段及其余操作。同样,有了今后的分界面及要素,大家就该思忖什么得以完毕点击有个别标签选中该标签到下贰个标签这一个间距了。其实,在大家绑定服务端数据的时候,我们曾经做了部分备选,在第五步的代码中大家简单察觉,我给每二个标签对应的刻度成分增多了叁个has-snap的标识class。那么,接下去就简单多了,选中区间无非就是现阶段被点击标签对应的刻度到下三个含有has-snap标记的刻度之间的偏离了。由此,笔者又安插了二个依据日期字符串对象完毕选中区间的主意,如下:

JavaScript

function selectByDate(dateStr) { var ele = TL.scaleLabel.find('.J_Scale[data-date="' + dateStr.replace(/-/g, '/')

  • '"]'), nextEle = ele.nextAll('.has-snap').eq(0), nLast, nl, nw, today = new Date(), lastDate; if (!ele.length卡塔尔(英语:State of Qatar) { return; } nl = parseFloat(ele.css('left'卡塔尔卡塔尔国; if (nextEle.length卡塔尔(قطر‎ { // 若是存在下三个有has-snap标识的因素 nLast = nextEle; lastDate = new Date(nLast.attr('data-date'卡塔尔国卡塔尔; } else { // 假设已然是最后三个有has-snap标识的因素 nLast = TL.scaleLabel.find('.J_Scale'卡塔尔国.last(卡塔尔国; lastDate = new Date(nLast.attr('data-date'卡塔尔(英语:State of Qatar)卡塔尔国; // 就算最后八个刻度日期大于后天,则截止刻度设为前不久,不然使用最终刻度 if (lastDate > today卡塔尔(قطر‎ { lastDate = today; nLast = TL.scaleLabel.find('.J_Scale[data-date="' + (today.getFullYear() + '/'
  • Utils.prefixZero(today.getMonth() + 1) + '/' + Utils.prefixZero(today.getDate())) + '"]'卡塔尔(英语:State of Qatar); } } // 这里是对中选某项后做一些其它作业,与本文关系不太大 if (!nextEle.length && lastDate !== today) { selDays.html(Math.floor((today - new Date(ele.attr('data-date'))) / (24 * 60 * 60 * 1000))); selRange.html(ele.attr('data-date').replace(///g, '-') + ' ~ ' + '今天'); nw = parseFloat(nLast.css('left')) - parseFloat(ele.css('left')) + 32; } else { selDays.html(Math.floor((new Date(nLast.attr('data-date')) - new Date(ele.attr('data-date'))) / (24 * 60 * 60 * 1000))); selRange.html(ele.attr('data-date').replace(///g, '-') + ' ~ ' + nLast.attr('data-date').replace(///g, '-')); nw = parseFloat(nLast.css('left')) - parseFloat(ele.css('left')); } viewFrame.attr('src', '/decorate/getSnapshotInfoByAppAndTime.html?appId=' + appId + '&snapshotTime=' + ele.attr('data-date').replace(///g, '-')); TL.scaleLabel.find('.active').removeClass('active'); ele.find('.J_SnapshotLink').addClass('active'); TL.dayDiff.css({left: nl, width: 0}); TL.dayDiff.animate({width: nw}, 300); }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function selectByDate(dateStr) {
    var ele = TL.scaleLabel.find('.J_Scale[data-date="' + dateStr.replace(/-/g, '/') + '"]'),
        nextEle = ele.nextAll('.has-snap').eq(0),
        nLast, nl, nw,
        today = new Date(),
        lastDate;
    if (!ele.length) {
        return;
    }
    nl = parseFloat(ele.css('left'));
    if (nextEle.length) { // 如果存在下一个有has-snap标记的元素
        nLast = nextEle;
        lastDate = new Date(nLast.attr('data-date'));
    } else { // 如果已是最后一个有has-snap标记的元素
        nLast = TL.scaleLabel.find('.J_Scale').last();
        lastDate = new Date(nLast.attr('data-date'));
        // 如果最后一个刻度日期大于今天,则结束刻度设为今天,否则使用最后刻度
        if (lastDate > today) {
            lastDate = today;
            nLast = TL.scaleLabel.find('.J_Scale[data-date="' + (today.getFullYear() + '/' + Utils.prefixZero(today.getMonth() + 1) + '/' + Utils.prefixZero(today.getDate())) + '"]');
        }
    }
    // 这里是对选中某项后做一些其他业务,与本文关系不太大
    if (!nextEle.length && lastDate !== today) {
        selDays.html(Math.floor((today - new Date(ele.attr('data-date'))) / (24 * 60 * 60 * 1000)));
        selRange.html(ele.attr('data-date').replace(///g, '-') + ' ~ ' + '今天');
        nw = parseFloat(nLast.css('left')) - parseFloat(ele.css('left')) + 32;
    } else {
        selDays.html(Math.floor((new Date(nLast.attr('data-date')) - new Date(ele.attr('data-date'))) / (24 * 60 * 60 * 1000)));
        selRange.html(ele.attr('data-date').replace(///g, '-') + ' ~ ' + nLast.attr('data-date').replace(///g, '-'));
        nw = parseFloat(nLast.css('left')) - parseFloat(ele.css('left'));
    }
    viewFrame.attr('src', '/decorate/getSnapshotInfoByAppAndTime.html?appId=' + appId + '&snapshotTime=' + ele.attr('data-date').replace(///g, '-'));
    TL.scaleLabel.find('.active').removeClass('active');
    ele.find('.J_SnapshotLink').addClass('active');
    TL.dayDiff.css({left: nl, width: 0});
    TL.dayDiff.animate({width: nw}, 300);
}

跟着,就该是对每叁个标签绑定事件,让种种标签被点击的时候兑现选中等作用了。这里顺便将时间轴的拖拽及回弹功效也黄金时代并提供了:

JavaScript

tw.delegate('.J_提姆eLine', 'mousedown', function(ev卡塔尔{ // 拖拽及回弹 var originX = ev.clientX, moveX = originX, delta = 0, originLeft = parseFloat(TL.slider.css('left'卡塔尔(英语:State of Qatar)卡塔尔(英语:State of Qatar); if (TL.slider.width(卡塔尔 < tw.width(卡塔尔卡塔尔国 { return true; } TL.slider.data('moved', false卡塔尔; doc.bind('mousemove', function(ev卡塔尔(قطر‎{ moveX = ev.clientX; delta = moveX - originX; if (Math.abs(delta卡塔尔(英语:State of Qatar) > 10卡塔尔 { TL.slider.css('left', originLeft

  • delta + 'px'); } }); doc.bind('mouseup', function(ev){ doc.unbind('mousemove'); doc.unbind('mouseup'); if (Math.abs(delta) <= 10) { TL.slider.data('moved', false); } else { TL.slider.data('moved', true); } var tLeft = parseFloat(TL.slider.css('left')), tWidth = tw.width(); if (tLeft > 0) { TL.slider.animate({'left': 0}, 300, function(){}); } else if (Math.abs(tLeft) > TL.slider.width() - tWidth) { TL.slider.animate({'left': '-' + (TL.slider.width() - tWidth) + 'px'}, 300, function(){}); } }); }).delegate('.J_SnapshotLink', 'click', function(ev卡塔尔(قطر‎{ // 标签点击选中事件 if (TL.slider.data('moved'卡塔尔(英语:State of Qatar)卡塔尔(قطر‎ { return false; } var _this = $(this), hrefArr = _this.attr('href').split('#'); selectByDate(hrefArr[1]); ev.preventDefault(); });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
tw.delegate('.J_TimeLine', 'mousedown', function(ev){ // 拖拽及回弹
    var originX = ev.clientX,
        moveX = originX,
        delta = 0,
        originLeft = parseFloat(TL.slider.css('left'));
    if (TL.slider.width() < tw.width()) {
        return true;
    }
    TL.slider.data('moved', false);
    doc.bind('mousemove', function(ev){
        moveX = ev.clientX;
        delta = moveX - originX;
        if (Math.abs(delta) > 10) {
            TL.slider.css('left', originLeft + delta + 'px');
        }
    });
    doc.bind('mouseup', function(ev){
        doc.unbind('mousemove');
        doc.unbind('mouseup');
 
        if (Math.abs(delta) <= 10) {
            TL.slider.data('moved', false);
        } else {
            TL.slider.data('moved', true);
        }
 
        var tLeft = parseFloat(TL.slider.css('left')),
            tWidth = tw.width();
        if (tLeft > 0) {
            TL.slider.animate({'left': 0}, 300, function(){});
        } else if (Math.abs(tLeft) > TL.slider.width() - tWidth) {
            TL.slider.animate({'left': '-' + (TL.slider.width() - tWidth) + 'px'}, 300, function(){});
        }
    });
}).delegate('.J_SnapshotLink', 'click', function(ev){ // 标签点击选中事件
    if (TL.slider.data('moved')) {
        return false;
    }
    var _this = $(this),
        hrefArr = _this.attr('href').split('#');
    selectByDate(hrefArr[1]);
    ev.preventDefault();
});

好了,到此地大家的时日轴成效就满门做到了。只要求对上边的主意进行包装,大家就足以得到一个功力相比康健的时光轴插件了。实例演示:三个绝望舒心的岁月线实例

1 赞 5 收藏 1 评论

图片 7

<html>
<head>
<title>日期输入框演示-queyang.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">script
<style>
body{font-size:12px;font-family:Verdana,Arial,"宋体";}
a:link {color:#464646;text-decoration:none;}
a:visited {color:#464646;text-decoration:none;}iframe
a:hover{color:#ed145b;text-decoration:underline;}
a:active{color:#ed145b;text-decoration:underline;}
td{font-size:12px}
/*想要改输入日历控件的样本就改上面的CSS样式即可了*/
/*Date*/
.header {font: 12px Arial, Tahoma !important;font-weight: bold !important;font: 11px Arial, Tahoma;font-weight: bold;color: #154BA0;background:#C2DEED;height: 25px;padding-left: 10px;
}
.header td {padding-left: 10px;}
.header a {color: #154BA0;}
.header input {background:none;vertical-align: middle;height: 16px;}
.category {font: 12px Arial, Tahoma !important;font: 11px Arial, Tahoma;color: #92A05A;height:20px;background-color: #FFFFD9;}
.category td {border-bottom: 1px solid #DEDEB8;}
.expire, .expire a:link, .expire a:visited {color: #999999;}
.default, .default a:link, .default a:visited {color: #000000;}
.checked, .checked a:link, .checked a:visited {color: #FF0000;}
.today, .today a:link, .today a:visited {color: #00BB00;}
#calendar_year {display: none;line-height: 130%;background: #FFFFFF;position: absolute;z-index: 10;}
#calendar_year .col {float: left;background: #FFFFFF;margin-left: 1px;border: 1px solid #86B9D6;padding: 4px;}
#calendar_month {display: none;background: #FFFFFF;line-height: 130%;border: 1px solid #86B9D6;padding: 4px;position: absolute;z-index: 11;}
.tableborder {background: white;border: 1px solid #86B9D6;}
#year,#month{padding-right:10px;background:url(attachments/month_0701/8200714125245.gif) no-repeat center right;}/*图表路线可以改成温馨的*/
/*Date*/
</style>
<script>
//这段脚本借使您的页面里有,就能够去掉它们了
//招待访谈小编的网站queyang.com
var ie =navigator.appName=="Microsoft Internet Explorer"?true:false;
function $(objID){
 return document.getElementById(objID);
}
</script>
</head>
<body>
<!--记得哦,下边包车型地铁代码得放在Body标签里,当然,放在页面最前边也足以(可是有极大可能会产出JS还没加载实现时客户点击了下边包车型大巴输入框,那样页面就能够出错了。)-->
<script type="text/javascript">
var controlid = null;
var currdate = null;
var startdate = null;
var enddate  = null;
var yy = null;
var mm = null;
var hh = null;
var ii = null;
var currday = null;
var addtime = false;
var today = new Date();
var lastcheckedyear = false;
var lastcheckedmonth = false;
function _cancelBubble(event) {
 e = event ? event : window.event ;
 if(ie) {
  e.cancelBubble = true;
 } else {
  e.stopPropagation();
 }
}
function getposition(obj) {
 var r = new Array();
 r['x'] = obj.offsetLeft;
 r['y'] = obj.offsetTop;
 while(obj = obj.offsetParent) {
  r['x'] += obj.offsetLeft;
  r['y'] += obj.offsetTop;
 }
 return r;
}
function loadcalendar() {
 s = '';
 s += '<div id="calendar" style="display:none; position:absolute; z-index:9;" onclick="_cancelBubble(event)">';
 if (ie)
 {
  s += '<iframe width="200" height="160" src="about:blank" style="position: absolute;z-index:-1;"></iframe>';
 }
 s += '<div style="width: 200px;"><table class="tableborder" cellspacing="0" cellpadding="0" width="100%" style="text-align: center">';
 s += '<tr align="center" class="header"><td class="header"><a href="#" onclick="refreshcalendar(yy, mm-1);return false" title="上一月"><<</a></td><td colspan="5" style="text-align: center" class="header"><a href="#" onclick="showdiv('year');_cancelBubble(event卡塔尔(قطر‎;return false" title="点击选择年份" id="year"></a>  -  <a id="month" title="点击选拔月份" href="#" onclick="showdiv('month');_cancelBubble(event);return false"></a></td><td class="header"><A href="#" onclick="refreshcalendar(yy, mm+1);return false" title="下一月">>></A></td></tr>';
 s += '<tr class="category"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';
 for(var i = 0; i < 6; i++) {
  s += '<tr class="altbg2">';
  for(var j = 1; j <= 7; j++)
   s += "<td id=d" + (i * 7 + j) + " height="19">0</td>";
  s += "</tr>";
 }
 s += '<tr id="hourminute"><td colspan="7" align="center"><input type="text" size="1" value="" id="hour" onKeyUp='this.value=this.value > 23 ? 23 : zerofill(this.value);controlid.value=controlid.value.replace(/\d+(:\d+)/ig, this.value+"$1")'> 点 <input type="text" size="1" value="" id="minute" onKeyUp='this.value=this.value > 59 ? 59 : zerofill(this.value);controlid.value=controlid.value.replace(/(<a href="file://\d+:)\d+/ig">\d+:)\d+/ig</a>, "$1"+this.value)'> 分</td></tr>';
 s += '</table></div></div>';
 s += '<div id="calendar_year" onclick="_cancelBubble(event)"><div class="col">';
 for(var k = 1930; k <= 2019; k++) {
  s += k != 1930 && k % 10 == 0 ? '</div><div class="col">' : '';
  s += '<a href="#" onclick="refreshcalendar(' + k + ', mm);$('calendar_year').style.display='none';return false"><span' + (today.getFullYear() == k ? ' class="today"' : '')

  • ' id="calendar_year_' + k + '">' + k + '</span></a><br />';
     }
     s += '</div></div>';
     s += '<div id="calendar_month" onclick="_cancelBubble(event)">';
     for(var k = 1; k <= 12; k++) {
      s += '<a href="#" onclick="refreshcalendar(yy, ' + (k - 1) + ');$('calendar_month').style.display='none';return false"><span' + (today.getMonth()+1 == k ? ' class="today"' : '')
  • ' id="calendar_month_' + k + '">' + k + ( k < 10 ? ' ' : '') + ' 月</span></a><br />';
     }
     s += '</div>';
     var nElement = document.createElement("div");
     nElement.innerHTML=s;
     document.getElementsByTagName("body")[0].appendChild(nElement);
    // document.write(s);
     document.onclick = function(event) {
      $('calendar').style.display = 'none';
      $('calendar_year').style.display = 'none';
      $('calendar_month').style.display = 'none';
     }
     $('calendar').onclick = function(event) {
      _cancelBubble(event);
      $('calendar_year').style.display = 'none';
      $('calendar_month').style.display = 'none';
     }
    }
    function parsedate(s) {
     /(d+)-(d+)-(d+)s*(d*):?(d*)/.exec(s);
     var m1 = (RegExp.$1 && RegExp.$1 > 1899 && RegExp.$1 < 2101) ? parseFloat(RegExp.$1) : today.getFullYear();
     var m2 = (RegExp.$2 && (RegExp.$2 > 0 && RegExp.$2 < 13)) ? parseFloat(RegExp.$2) : today.getMonth() + 1;
     var m3 = (RegExp.$3 && (RegExp.$3 > 0 && RegExp.$3 < 32)) ? parseFloat(RegExp.$3) : today.getDate();
     var m4 = (RegExp.$4 && (RegExp.$4 > -1 && RegExp.$4 < 24)) ? parseFloat(RegExp.$4) : 0;
     var m5 = (RegExp.$5 && (RegExp.$5 > -1 && RegExp.$5 < 60)) ? parseFloat(RegExp.$5) : 0;
     /(d+)-(d+)-(d+)s*(d*):?(d*)/.exec("0000-00-00 00:00");
     return new Date(m1, m2 - 1, m3, m4, m5);
    }
    function settime(d) {
     $('calendar').style.display = 'none';
     controlid.value = yy + "-" + zerofill(mm + 1) + "-" + zerofill(d) + (addtime ? ' ' + zerofill($('hour').value) + ':' + zerofill($('minute').value) : '');
    }
    function showcalendar(event, controlid1, addtime1, startdate1, enddate1) {
     controlid = controlid1;
     addtime = addtime1;
     startdate = startdate1 ? parsedate(startdate1) : false;
     enddate = enddate1 ? parsedate(enddate1) : false;
     currday = controlid.value ? parsedate(controlid.value) : today;
     hh = currday.getHours();
     ii = currday.getMinutes();
     var p = getposition(controlid);
     $('calendar').style.display = 'block';
     $('calendar').style.left = p['x']+'px';
     $('calendar').style.top = (p['y'] + 20)+'px';
     _cancelBubble(event);
     refreshcalendar(currday.getFullYear(), currday.getMonth());
     if(lastcheckedyear != false) {
      $('calendar_year_' + lastcheckedyear).className = 'default';
      $('calendar_year_' + today.getFullYear()).className = 'today';
     }
     if(lastcheckedmonth != false) {
      $('calendar_month_' + lastcheckedmonth).className = 'default';
      $('calendar_month_' + (today.getMonth() + 1)).className = 'today';
     }
     $('calendar_year_' + currday.getFullYear()).className = 'checked';
     $('calendar_month_' + (currday.getMonth() + 1)).className = 'checked';
     $('hourminute').style.display = addtime ? '' : 'none';
     lastcheckedyear = currday.getFullYear();
     lastcheckedmonth = currday.getMonth() + 1;
    }
    function refreshcalendar(y, m) {
     var x = new Date(y, m, 1);
     var mv = x.getDay();
     var d = x.getDate();
     var dd = null;
     yy = x.getFullYear();
     mm = x.getMonth();
     $("year").innerHTML = yy;
     $("month").innerHTML = mm + 1 > 9  ? (mm + 1) : '0' + (mm + 1);
     for(var i = 1; i <= mv; i++) {
      dd = $("d" + i);
      dd.innerHTML = " ";
      dd.className = "";
     }
     while(x.getMonth() == mm) {
      dd = $("d" + (d + mv));
      dd.innerHTML = '<a href="###" onclick="settime(' + d + ');return false">' + d + '</a>';
      if(x.getTime() < today.getTime() || (enddate && x.getTime() > enddate.getTime()) || (startdate && x.getTime() < startdate.getTime())) {
       dd.className = 'expire';
      } else {
       dd.className = 'default';
      }
      if(x.getFullYear() == today.getFullYear() && x.getMonth() == today.getMonth() && x.getDate() == today.getDate()) {
       dd.className = 'today';
       dd.firstChild.title = '今天';
      }
      if(x.getFullYear() == currday.getFullYear() && x.getMonth() == currday.getMonth() && x.getDate() == currday.getDate()) {
       dd.className = 'checked';
      }
      x.setDate(++d);
     }
     while(d + mv <= 42) {
      dd = $("d" + (d + mv));
      dd.innerHTML = " ";
      d++;
     }
     if(addtime) {
      $('hour').value = zerofill(hh);
      $('minute').value = zerofill(ii);
     }
    }
    function showdiv(id) {
     var p = getposition($(id));
     $('calendar_' + id).style.left = p['x']+'px';
     $('calendar_' + id).style.top = (p['y'] + 16)+'px';
     $('calendar_' + id).style.display = 'block';
    }
    function zerofill(s) {
     var s = parseFloat(s.toString().replace(/(^[s0]+)|(s+$)/g, ''));
     s = isNaN(s) ? 0 : s;
     return (s < 10 ? '0' : '') + s.toString();
    }
    loadcalendar();absolutecellpadding
    </script>
    慎选日期:<input name="member.birth"  type="text" value="壹玖捌壹-1-1" size="14" readonly="readonly" onclick="showcalendar(event, this卡塔尔(قطر‎;" onfocus="showcalendar(event, this卡塔尔;if(this.value=='0000-00-00'卡塔尔this.value=''" />
    </body>
    </html>

本文由设计建站发布,转载请注明来源:Firefox的日历控件,手把手教你打造一款别致的时