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

33 浏览量更新于2024-08-31 收藏 36KB PDF 举报

"Js日期选择自动填充到输入框(界面漂亮兼容火狐)" 这篇资源主要介绍了一个使用JavaScript实现的日期选择器，该选择器具有良好的界面设计，并且兼容Firefox浏览器。通过这段代码，用户可以在网页上点击一个输入框，弹出一个美观的日期选择界面，选定日期后，所选日期会自动填充到对应的输入框中。首先，HTML部分创建了页面的基本结构，包括`<html>`、`<head>`和`<title>`标签，以及一个`<meta>`标签来设置页面的字符编码为GBK。在`<head>`部分，还引入了一段CSS样式，用于定义页面元素的显示效果，如字体、颜色、链接样式等。 CSS部分定义了页面的全局样式，例如`body`的字体大小和字体家族，以及`a`标签在不同状态下的颜色和下划线效果。此外，还定义了日期选择器特定的样式，如`.header`、`.category`和`.expire`，这些类用于设置日期选择器头部、分类（可能是指年、月、日）和过期状态的样式。通过这些样式，可以实现日期选择器的美观界面。 JavaScript部分虽然没有在摘要中给出，但根据描述，应该包含了一个事件监听器，可能是`onclick`事件，当用户点击输入框时触发日期选择器的弹出。这个功能可能是通过创建一个动态的日期选择对话框，或者利用JavaScript库如jQuery UI的日期选择插件实现。选定日期后，JavaScript会更新输入框的值，将所选日期填入其中。兼容性方面，由于特别提到了“兼容火狐”，这意味着代码可能包含了处理Firefox浏览器特有的CSS样式或JavaScript语法，以确保在Firefox和其他浏览器上的表现一致。在实际开发中，通常需要使用像jQuery这样的库来处理跨浏览器兼容性问题，或者使用像`window.navigator.userAgent`来检测浏览器类型并应用相应的修复。这个资源提供了一个适用于网页的JavaScript日期选择解决方案，它不仅考虑了界面的美观性，还注重了在Firefox浏览器中的兼容性，对于那些需要在网页中集成日期选择功能的开发者来说，是一个实用的示例。

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;

} else {

e.stopPropagation();

}

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

weixin_38643212

粉丝: 3
资源: 931

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

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

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

javascript日历控件 兼容ie firefox opera

前端如何解决浏览器自动填充input输入框账号密码的问题

密码输入框怎么禁止自动填充

android 回复评论自动到输入框

elementui 输入框里面禁止浏览器自动填充用户名密码

在界面中添加日期选择器，用户可以通过选择年月日来输入自己的出生日期。

ant design vue密码输入框自动填充问题

uniapp输入框自动填充短信验证码

最新资源

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

javascript日历控件兼容ie firefox opera