html时间控件修改默认格式,纯js日期控件-可以自定义样式.html

于 2021-06-03 23:09:17 发布
阅读量519 收藏
点赞数

html时间控件修改默认格式
calender select

body {

font-family: "Lucida sans unicode", sans-serif;

font-size: 12px;

margin: 0;

padding: 0;

height: 100%;

}

#basis {

display: inline;

position: relative;

}

#calender {

position: absolute;

top: 30px;

left: 0;

width: 220px;

background-color: #fff;

border: 3px solid #ccc;

padding: 10px;

z-index: 10;

}

#control {

text-align: center;

margin: 0 0 5px 0;

}

#control select {

font-family: "Lucida sans unicode", sans-serif;

font-size: 11px;

margin: 0 5px;

vertical-align: middle;

}

#calender .controlPlus {

padding: 0 5px;

text-decoration: none;

color: #333;

}

#calender table {

empty-cells: show;

width: 100%;

font-size: 11px;

table-layout: fixed;

}

#calender .weekdays td {

text-align: right;

padding: 1px 5px 1px 1px;

color: #333;

}

#calender .week td {

text-align: right;

cursor: pointer;

border: 1px solid #fff;

padding: 1px 4px 1px 0;

}

#calender .week .today {

background-color: #ccf;

border-color: #ccf;

}

#calender .week .holiday {

font-weight: bold;

}

#calender .week .hoverEle {

border-color: #666;

background-color: #99f;

color: #000;

}

var allMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

var allNameOfWeekDays = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];

var allNameOfMonths = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];

var newDate = new Date();

var yearZero = newDate.getFullYear();

var monthZero = newDate.getMonth();

var day = newDate.getDate();

var currentDay = 0,

currentDayZero = 0;

var month = monthZero,

year = yearZero;

var yearMin = 2000,

yearMax = 2010;

var target = '';

var hoverEle = false;

function setTarget(e) {

if (e) return e.target;

if (event) return event.srcElement;

}

function newElement(type, attrs, content, toNode) {

var ele = document.createElement(type);

if (attrs) {

for (var i = 0; i < attrs.length; i++) {

eval('ele.' + attrs[i][0] + (attrs[i][2] ? '=\u0027' : '=') + attrs[i][1] + (attrs[i][2] ? '\u0027' : ''));

}

}

if (content) ele.appendChild(document.createTextNode(content));

if (toNode) toNode.appendChild(ele);

return ele;

}

function setMonth(ele) {

month = parseInt(ele.value);

calender()

}

function setYear(ele) {

year = parseInt(ele.value);

calender()

}

function setValue(ele) {

if (ele.parentNode.className == 'week' && ele.firstChild) {

var dayOut = ele.firstChild.nodeValue;

if (dayOut < 10) dayOut = '0' + dayOut;

var monthOut = month + 1;

if (monthOut < 10) monthOut = '0' + monthOut;

target.value = dayOut + '.' + monthOut + '.' + year;

removeCalender();

}

}

function removeCalender() {

var parentEle = document.getElementById("calender");

while (parentEle.firstChild) parentEle.removeChild(parentEle.firstChild);

document.getElementById('basis').parentNode.removeChild(document.getElementById('basis'));

}

function calender() {

var parentEle = document.getElementById("calender");

parentEle.onmouseover = function(e) {

var ele = setTarget(e);

if (ele.parentNode.className == 'week' && ele.firstChild && ele != hoverEle) {

if (hoverEle) hoverEle.className = hoverEle.className.replace(/hoverEle ?/, '');

hoverEle = ele;

ele.className = 'hoverEle ' + ele.className;

} else {

if (hoverEle) {

hoverEle.className = hoverEle.className.replace(/hoverEle ?/, '');

hoverEle = false;

}

}

}

while (parentEle.firstChild) parentEle.removeChild(parentEle.firstChild);

function check() {

if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) allMonth[1] = 29;

else allMonth[1] = 28;

}

function addClass(name) {

if (!currentClass) {

currentClass = name

} else {

currentClass += ' ' + name

}

};

if (month < 0) {

month += 12;

year -= 1

}

if (month > 11) {

month -= 12;

year += 1

}

if (year == yearMax - 1) yearMax += 1;

if (year == yearMin) yearMin -= 1;

check();

var control = newElement('p', [

['id', 'control', 1]

], false, parentEle);

var controlPlus = newElement('a', [

['href', 'javascript:month--;calender()', 1],

['className', 'controlPlus', 1]

], '

var select = newElement('select', [

['onchange', function() {

setMonth(this)

}]

], false, control);

for (var i = 0; i < allNameOfMonths.length; i++) newElement('option', [

['value', i, 1]

], allNameOfMonths[i], select);

select.selectedIndex = month;

select = newElement('select', [

['onchange', function() {

setYear(this)

}]

], false, control);

for (var i = yearMin; i < yearMax; i++) newElement('option', [

['value', i, 1]

], i, select);

select.selectedIndex = year - yearMin;

controlPlus = newElement('a', [

['href', 'javascript:month++;calender()', 1],

['className', 'controlPlus', 1]

], '>', control);

check();

currentDay = 1 - new Date(year, month, 1).getDay();

if (currentDay > 0) currentDay -= 7;

currentDayZero = currentDay;

var newMonth = newElement('table', [

['cellSpacing', 0, 1],

['onclick', function(e) {

setValue(setTarget(e))

}]

], false, parentEle);

var newMonthBody = newElement('tbody', false, false, newMonth);

var tr = newElement('tr', [

['className', 'head', 1]

], false, newMonthBody);

tr = newElement('tr', [

['className', 'weekdays', 1]

], false, newMonthBody);

for (i = 0; i < 7; i++) td = newElement('td', false, allNameOfWeekDays[i], tr);

tr = newElement('tr', [

['className', 'week', 1]

], false, newMonthBody);

for (i = 0; i < allMonth[month] - currentDayZero; i++) {

var currentClass = false;

currentDay++;

if (currentDay == day && month == monthZero && year == yearZero) addClass('today');

if (currentDay <= 0) {

if (currentDayZero != -7) td = newElement('td', false, false, tr);

} else {

if ((currentDay - currentDayZero) % 7 == 0) addClass('holiday');

td = newElement('td', (!currentClass ? false : [

['className', currentClass, 1]

]), currentDay, tr);

if ((currentDay - currentDayZero) % 7 == 0) tr = newElement('tr', [

['className', 'week', 1]

], false, newMonthBody);

}

if (i == allMonth[month] - currentDayZero - 1) {

i++;

while (i % 7 != 0) {

i++;

td = newElement('td', false, false, tr)

};

}

}

}

function showCalender(ele) {

if (document.getElementById('basis')) {

removeCalender()

} else {

target = document.getElementById(ele.id.replace(/for_/, ''));

var basis = ele.parentNode.insertBefore(document.createElement('div'), ele);

basis.id = 'basis';

newElement('div', [

['id', 'calender', 1]

], false, basis);

calender();

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史

胡启奋
关注
HTML自定义时间控件
04-09
自定义HTML时间控件：控件中已实现的功能 1、根据给定的年和月绘画出时间控件 2、往时间控件中添加小圆点标识(单个添加和批量添加--单个传当月日期，多个传日期数组) 3、对控件中前、后月份日期的点击事件（灰色日期），当前月份日期点击事件 4、日期控件css样式部分自由修改
简单的html日期控件
10-02
超好用简单的html日期控件。将整个文件夹拷贝到你的工程下，在html页面直接引用WdatePicker.js即可
HTML日期控件
青椒的博客
01-08 1513
年/月/日<input type=”date”/> –年--周<input type=”week”/> –年--月<input type=”month”/> – ：–（时间）<input type=”time”/> 年/月/日 --：-- <input type=”datetime”/> 本地日期时间<input type=”da...
HTML日期选择控件
12-27
简洁的HTML日期选择控件，给input添加获得焦点事件即可触发控件
HTML_JS实现很好的日期控件
09-25
HTML_JS实现很好的日期控件，可用于网页时间选择。
HTML中带时间的日期控件
11-19
HTML中带时间的日期控件 HTML中带时间的日期控件
简易纯JS日期控件
iteye_16272的博客
08-22 178
无聊，做了个纯JS的日期控件，JS动态生成CSS，可兼容大部分浏览器，直接JS引用即可使用，引用方式在JS最下面，可自行修改   猥琐的效果图_JS日历控件   js源文件： // JavaScript Document (function(){ var $=function(id){return document.getElementById(id);} var Date...
html日期控件
紫竹铃
08-24 6796
把以下4个文件放到同一个文件夹下,运行 test.html 即可 //文件 DateBox.html     hiyu                  var getStr=window.dialogArguments;                                                                                 
html+javascript的简单带文本框选择日期控件
09-20
简单的文本框日期控件，只需要一个js文件+文本框上一个触发事件。
js自定义时间控件My97DatePicker
07-02
网页开发中时间控件，能精确定时，使用方便，内含所需js包及使用说明
日期控件(input输入框)
04-07
用于页面的日期选择,里面的插件涉及js和css,而这两个都是基于jquery的,所以资源中还包含了jquery.显示的日期格式可以设定.
html js脚本日历控件
05-11
基于javascript脚本的网页日历控件，格式为2013-01-01
HTML的日期控件,样式随意更改,方便易懂
04-19
HTML的日期控件,很好用,显示格式随意改,希望嫩个给大家带来帮助,
Html日期控件
weixin_44070137的博客
07-08 676
HTML5新控件 - 日期和时间选择输入: 参考链接:https://blog.csdn.net/lianzhang861/article/details/80422513 几款实用的前端日历时间日期选择控件: 参考链接:https://blog.csdn.net/lianzhang861/article/details/80605128 ...
js日期控件（纯手写）
weixin_33962923的博客
10-16 275
/* onclick="SetDate(this,'yyyy-MM-dd')" */ var cal; var isFocus = false; // 是否为焦点 function SetDate(obj, strFormat) { var date = new Date(); var by = date.getFullYear() - 50; // 最小值 → 50...
纯javascript编写js日期控件
Curtain
01-23 6954
function PopupCalendar(InstanceName) { ///Global Tag this.instanceName=InstanceName; ///Properties this.separator="-" this.oBtnTodayTitle="����" this.oBtnCancelTitle="ȡ��" //oCalendarChs.oBtnTo
js的日期控件
12-13 73
jeDate使用的时候，如果不是直接放在html中而是通过Js加载进去的，那么最好来个延迟。 http://www.sucaijiayuan.com/Js/DateTime/ http://www.cnblogs.com/lhb25/archive/2012/10/16/jquery-calendar-timepicker-plugins.html 转载于:https://www....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值