Js日期选择器：界面美观，火狐兼容

147 浏览量更新于2024-08-30 收藏 39KB PDF 举报

"这篇技术文章主要介绍了一个使用JavaScript编写的日期选择器，该选择器设计得既美观又兼容Firefox浏览器，能够将所选日期自动填充到输入框内。作者提供了相关的HTML、CSS和JavaScript代码示例，供读者参考学习。" 在网页开发中，为用户提供友好的日期选择功能是常见的需求。JavaScript作为一种客户端脚本语言，非常适合实现这种交互功能。这个Js日期选择器就是基于这一需求而设计的，它的主要特点包括： 1. **兼容性**：此日期选择器特别强调了对Firefox浏览器的兼容性，这意味着它不仅能在主流的Chrome、Safari、Edge等浏览器上运行，还能在Firefox这样的非Webkit内核浏览器上正常工作，提升了应用的普适性。 2. **用户界面**：被描述为“很漂亮”，意味着它在设计上注重用户体验，可能采用了美观的颜色搭配、清晰的布局以及易于操作的交互元素。 3. **自动填充**：用户在日期选择器中选定日期后，选定的日期会自动填充到指定的输入框中，简化了用户的输入步骤，提高了数据录入的效率。 4. **CSS样式**：文章中的CSS代码段定义了日期选择器的各种样式，如`.header`、`.category`、`.expire`等类，分别对应头部、分类和过期等元素的样式，通过这些类可以控制各个部分的字体、颜色、背景色、边框等属性，以达到美观的效果。 5. **HTML结构**：HTML代码中包含了`<head>`、`<title>`、`<meta>`、`<style>`、`<body>`、`<table>`、`<td>`等元素，构建了页面的基本框架，并且通过`<input>`标签来创建日期选择的输入框。 6. **JavaScript功能**：虽然具体实现的JavaScript代码没有给出，但根据描述，这部分代码应该包含事件监听、日期选择逻辑以及将选定日期插入到输入框中的功能。 7. **可定制性**：由于提供了源代码，开发者可以根据自己的需求对代码进行修改，以适应不同的应用场景或者与现有的前端框架集成。通过这个示例，开发者可以学习如何使用JavaScript和CSS来创建一个自定义的日期选择器，并了解如何处理浏览器兼容性问题，提升网页的交互性和用户体验。同时，这个例子也鼓励开发者深入理解DOM操作、事件处理以及CSS样式设计，这些都是前端开发中的核心技能。

Js日期选择自动填充到输入框日期选择自动填充到输入框(界面漂亮兼容火狐界面漂亮兼容火狐)

本文为大家写了个很漂亮、兼容火狐的Js日期选择，自动填充到输入框，代码如下，有需要的朋友可以参考下

复制代码代码如下:

<html>

<head>

<title>很漂亮、兼容火狐的Js日期选择，自动填充到输入框</title>

body{font-size:12px;font-family:Verdana,Arial,"宋体";}

a:link {color:#464646;text-decoration:none;}

a:visited {color:#464646;text-decoration:none;}

a:hover{color:#ed145b;text-decoration:underline;}

a:active{color:#ed145b;text-decoration:underline;}

td{font-size:12px}

/*/*/

/*DateCSS样式*/

.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;}

</style>

//下面的代码段如果你页面里有，可以去掉

var ie =navigator.appName=="Microsoft Internet Explorer"?true:false;

function $(objID){

return document.getElementById(objID);

}

</script>

</head>

<body>

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;

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38688145

粉丝: 3
资源: 962

Js日期选择器：界面美观，火狐兼容

JS日期输入控件，非常好的js日期查询和自动填充

HTML5新控件之日期和时间选择输入的实现代码

兼容火狐的漂亮Js日期选择器，自动填入输入框

js日期上传控件，兼容火狐

javascript日历控件 兼容ie firefox opera

js日期控件 支持IE、firefox、chrome

JS火狐兼容日历控件

获取和设置输入框光标位置的插件

html5配合css3实现带提示文字的输入框

jQuery基于jeDate选择一年日期范围插件

最新资源

javascript日历控件兼容ie firefox opera

js日期控件支持IE、firefox、chrome