怎么创建日历控件_百度知道
怎么创建日历控件
提问者采纳
在日历上选择日期后：日历在文本框底部显示实现？答，再次双击隐藏，调整大小对齐：双击“复合框”显示。要求：文本框右侧的向下三角按钮是怎样做出来的，双击日历将选择的日期输入复合框。然后通过日历控件的visible属性实现日历的显示与隐藏：在窗体中将日历控件放在复合框控件之下：使用“复合框”控件即可问。功能说明。窗体打开后日历控件默认不显示
其他类似问题
为您推荐：
日历的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁& 怎么在win7系统桌面上添加自带日历小工具
怎么在win7系统桌面上添加自带日历小工具
时间：　　来源：互联网　　阅读次数：329　　小编：小东　　我要分享：
　1、在桌面空白处鼠标右击选择“小工具”选项;
2、这时候就会弹出一个小工具库，然后双击“日历”小工具;
3、接着就可以看到桌面右上角出现了一个日历了，大家把鼠标移动到它上面的时候，就会看到出现有三个小按钮，分别是关闭、缩放尺寸以及拖动小工具按钮;
4、如果你觉得日历较小的话就可以点击“较大尺寸”按钮，就会显示出更加详细的日期了，效果图如下。温馨提示：如果你直接在较小尺寸的日历上双击鼠标的话，就会看到不一样的效果，可以试试看哦。
许多人在RANK里都因为楼层的关系选择不到自己擅长的位置，如果能躺赢还行，反之会被队友教…
俄罗斯飞行控制中心30日说，由于国际空间站每天要绕地球飞行数圈，按地球上的时区划分，空…
好特网精选
完全禁止了后台连接行为,阻止启动生成adv.dat文件
系统：Vista/win7/WinXP/Win2000/
大小：3.49 MB
大家都在看什么
网友在29秒点赞了
网友在8分钟点赞了
网友在17分钟点赞了
网友在23分钟点赞了
网友在23分钟点赞了
大小：52.46 MB
大小：433.5 KB
大小：11.33 MB
大小：2.06 MB
大小：3.54 MB
大小：41.5 MB
大小：11.75 MB
大小：7.07 MB
大小：33.61 MB
大小：3.44 MB
大小：80.5 MB
大小：137.9 MB
大小：46.97 MB
大小：127.4 MB
大小：90.9 MB纯javascript制作日历控件
投稿：hebedich
字体：[ ] 类型：转载 时间：
本文给大家分享的是使用纯javascript实现的日历控件的代码，笔者也是第一次写控件，摸索着前行，
以前要用到日历控件都是直接从网上下载一套源码来使用，心里一直有个梗，就是想自己动手写一个日历控件，最近刚好来了兴趣，时间上也允许，于是自己摸索写了一个，功能还算完善，界面就凑合了。可能最值得说的一点就是让input控件内部右边显示一个按钮，我是直接给input加了个背景，然后把input的边框去掉实现的。
这个是最初版的，再往后打算做出纯javascript版的，再往后打算用JQuery做一套。
&!doctype html&
&meta charset="utf-8"&
&title&日历控件&/title&
#date_text {
background-image: url(images/input.png);
background-repeat:no-
width: 198
height: 27
padding-left:5
#cal_body {
width: 198
border: solid 1px #CCCCCC;
z-index:10;
width:100%;
background-color:#0FF;
font-size:14
line-height:26
text-align:
margin-left:2
margin-bottom:2
background-color:#CCC;
margin-left:10
text-align:
line-height:20
border-radius:3
border:solid 1
margin-top:2
.year_month {
margin-left:10
text-align:
line-height:19
border-radius:6
.end_tag {
line-height:26
margin-left:10
Date.prototype.toFormatString = function(){
var result = this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate();
var today = new Date();
var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组
var month_small = new Array("4","6","9","11"); //包含所有小月的数组
//判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false
function array_contain(array, obj){
for (var i = 0; i & array. i++){
if (array[i] == obj)
//判断年份year是否为闰年，是闰年则返回true，否则返回false
function isLeapYear(year){
var a = year % 4;
var b = year % 100;
var c = year % 400;
if( ( (a == 0) && (b != 0) ) || (c == 0) ){
function hideCalendar(){
var calbody = document.getElementById("cal_body");
cal_body.style.display = "none";
function showCalendar(){
var calbody = document.getElementById("cal_body");
var style = getDefaultStyle(calbody,"display");
if(style == "none")
cal_body.style.display = "block";
if(style == "block")
cal_body.style.display = "none";
var date_text = document.getElementById("date_text");
var val = date_text.
init(val);
function init(val){
clearCube();
var date_text = document.getElementById("date_text");
if(val == ""){
temp_date =
date_text.value = today.toFormatString();
temp_date = new Date(val);
var year = temp_date.getFullYear();
var month = temp_date.getMonth() + 1;
var date = temp_date.getDate();
temp_date.setDate(1);
var start = temp_date.getDay() + 7;
if(array_contain(month_big, month)){
end = start + 31;
else if(array_contain(month_small, month)){
end = start + 30;
if(isLeapYear(year)){
end = start + 29;
end = start + 28;
for(var i = i & i++){
var cube = document.getElementsByClassName("cube").item(i);
cube.innerHTML = i - start + 1;
cube.style.cursor = "pointer";
cube.onmouseover = function(){
this.style.backgroundColor = '#0FF';
if(date == (i - start + 1))
cube.style.backgroundColor = '#0FF';
cube.onmouseout = function(){
this.style.backgroundColor = '';
cube.onclick = function(){
date_text.value = year + "-" + month + "-" + this.innerHTML;
cal_body.style.display = "none";
document.getElementById("text_year").value =
document.getElementById("text_month").value =
function clearCube(){
for(var i=7; i & 49; i++){
var cube = document.getElementsByClassName("cube").item(i);
cube.innerHTML = "";
cube.style.backgroundColor = "";
function yearDown(){
if(isValidated()){
var old_year = parseInt(document.getElementById("text_year").value);
if(old_year & 1960){
var year = old_year - 1;
var month = parseInt(document.getElementById("text_month").value);
var val = year + "-" + month + "-" + 1;
init(val);
function yearUp(){
if(isValidated()){
var old_year = parseInt(document.getElementById("text_year").value);
if(old_year & 2050){
var year = old_year + 1;
var month = parseInt(document.getElementById("text_month").value);
var val = year + "-" + month + "-" + 1;
init(val);
function monthDown(){
if(isValidated()){
var old_month = parseInt(document.getElementById("text_month").value)
if(old_month & 1){
var year = parseInt(document.getElementById("text_year").value);
var month = old_month - 1;
var val = year + "-" + month + "-" + 1;
init(val);
var year = parseInt(document.getElementById("text_year").value) - 1;
var month = 12;
var val = year + "-" + month + "-" + 1;
init(val);
function monthUp(){
if(isValidated()){
var old_month = parseInt(document.getElementById("text_month").value)
if(old_month & 12){
var year = parseInt(document.getElementById("text_year").value);
var month = parseInt(document.getElementById("text_month").value) + 1;
var val = year + "-" + month + "-" + 1;
init(val);
var year = parseInt(document.getElementById("text_year").value) + 1;
var month = 1;
var val = year + "-" + month + "-" + 1;
init(val);
function isValidated(){
var year = document.getElementById("text_year").
var month = document.getElementById("text_month").
if(isNaN(year) || isNaN(month)){
alert("请输入正确的年份/月份");
if(year%1 != 0 || month%1 != 0){
alert("请输入正确的年份/月份");
year = parseInt(year);
if(year & 1960 || year & 2050){
alert("请输入之间的年份！");
else if(month & 1 || month &12){
alert("请输入正确的月份！");
function changed(){
if(isValidated()){
var year = document.getElementById("text_year").
var month = document.getElementById("text_month").
var val = year + "-" + month + "-" + 1;
init(val);
function getDefaultStyle(obj,attribute){
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
&div id="container"&
&div id="input_bg"&&input id="date_text" type="text" readonly onClick="showCalendar()" /&&/div&
&div id="cal_body"&
&div class="line"&&div class="btn" id="year_down" onClick="yearDown()"&-&/div&&input class="year_month" id="text_year" value="2015" onChange="changed()"&&div class="btn" id="year_up" onClick="yearUp()"&+&/div&&span class="end_tag"&年&/span&&/div&
&div class="line"&&div class="btn" id="month_down" onClick="monthDown()"&-&/div&&input class="year_month" id="text_month" value="5" onChange="changed()"&&div class="btn" id="month_up" onClick="monthUp()"&+&/div&&span class="end_tag"&月&/span&&/div&
&div class="cube"&日&/div&
&div class="cube"&一&/div&
&div class="cube"&二&/div&
&div class="cube"&三&/div&
&div class="cube"&四&/div&
&div class="cube"&五&/div&
&div class="cube"&六&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
&div class="cube"&&/div&
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具西西软件下载最安全的下载网站、值得信赖的软件下载站！
→ 人生日历怎么添加应用 人生日历插件应用管理器使用教程
V4.2.40.285 官方安装版
类型：桌面工具大小：8.8M语言：中文 评分：9.4
十一快到了，小编今天安装了准备到时候抢票用，话说的功能越来越不像个日历软件了，各种强大的功能被开发出来。比如医院挂号、订机票、竟然还可以看电影，实在是神奇啊，今天小编体验了人生日历插件应用管理器这项功能，他可以把你常用的软件添加进入进行管理，很方便的，可以试试！人生日历插件应用管理器使用教程1.下载和安装西西这里提供人生日历官方正版下载，安装过程很简单，这里就不再详述了。2.主页面一览3.打开应用管理器很容易看到主页面右下角有一个&应用&图标，点击它就可以打开插件应用管理器了4.添加应用方法很简单，直接拖曳进去即可，快捷方式也可以。西西把qq的快捷方式拖进去了。5.运行应用新添加的应用不会显示在人生日历的主界面，你需要重新打开应用管理器，点击应用图标即可运行。是不是很简单那呢，赶紧动手试试吧！本文由西西软件园原创，转载请注明出处！
日历表人生日历
时间过的真快，马上就要到年了，西西软件园提供了众多的日历软件，阴历阳历都有哦，估计大家最为关心的恐怕就是年的放假安排，日历表全都写的很清楚。年春节是几月几号年月日就是的哦，距离过年也就个月的时间了。...
02-16 / 22.8M
推荐理由：RedNotebook，风靡全球的桌面日历记事本。不管您是用来起草生活计划还是记日记，都是您得心应手的好帮手！
07-10 / 5.6M
推荐理由：集合超多功能:日历、月历、世界时钟、倒计时时钟、定时关机、备忘录、节日生日定制、系统热键、光驱控制、网
05-26 / 16M
推荐理由：通过 Google Calendar Sync，您可以在 Google 日历和 Microsoft Outlook 日历之间同步活动。您可以指定同步
05-07 / 19.6M
推荐理由：经常有朋友问小编，如何在桌面上看到日历~每次小编遇到这个问题总是忍不住在心里暗笑~因为小编有一款非常酷
11-19 / 8.8M
推荐理由：人生日历是驱动人生里有一个人生日历的小工具，非常的不错。于是把它提取出来做成了绿色版，程序文件夹只有
12-31 / 14.2M
推荐理由：Rainlendar 是一个十分漂亮的桌面日历软件，支持换肤、透明效果，还可以完全自定义显示内容，支持和网上的服
人生日历这款由驱动人生开发的日常应用小编记得应该是在去年买春节火车票的时候走红的，那个时候它推出了购火车票功能迅速吸引了大批固定用户，用它来订票大伙都放心，毕竟是个品牌嘛人生日历抢票软件，清明节假日将到，火车票再次迎来购票难的问题而此时人生日历再次开放全自动刷火车票功能，给广大网友订购火车票提供便利。人生日历抢票插件，比火车票官网的预售时间点早两分钟，这两分钟可以大大提高抢票成功的几率。下面跟随小...
11-19 / 8.8M
推荐理由：人生日历是驱动人生里有一个人生日历的小工具，非常的不错。于是把它提取出来做成了绿色版，程序文件夹只有
11-05 / 7.2M
推荐理由：人生日历这款驱动人生的日历产品相信很多人都有在电脑上用过，这回安卓版的人生日历终于发布了，安卓版进入
09-04 / 4.9M
推荐理由：简单日历一款桌面日历工具，这款日历ui非常简洁明了，个性化的透明皮肤设计，可以覆盖任务背景的电脑桌面，
05-15 / 183KB
推荐理由：&一个最简单的日历与记事小程序，满足你最基本的记事需求，可以对未来40天的任务做汇总报告。
01-16 / 5.8M
推荐理由：考拉日历是一款很清爽的桌面日历软件，并同时提供全国范围内实时的天气预报、节假日安排、农历查询
05-07 / 1.9M
推荐理由：百看壁纸日历是一款免费的桌面壁纸日历工具，不仅可以作为普通的日历使用还能给你的桌面更换壁纸，拥有海量
09-2609-2609-0509-0408-2908-2908-2908-2808-2208-09
阅读本文后您有什么感想? 已有0人给出评价!
名称大小下载My97日期控件 功能演示 配置说明 My97 Datepicker Demo
三. 配置说明
1. 属性配置
静态属性:只能在WdatePicker.js中配置,一般情况下,不建议您修改静态属性的值
是否自动引入Wdate类 设置为true时,可直接在引入WdatePicker.js的页面里使用 class=&Wdate&
Wdate可在skin目录下的WdatePicker.css文件中定义
建议使用默认值
是否显示指定程序包的绝对位置,一般情况下为空即可(程序自动创建),该属性是为防止极其少数的情况下程序创建出错而设置的
如果,程序包所在http中的地址为 http://localhost/proName/My97DatePicker/
则 $dpPath = '/proName/My97DatePicker/';
建议使用默认值
$crossFrame
是否跨框架,一般设置为true即可,遇到跨域错误时可以将此功能关闭
可配置属性:可以在WdatePicker方法是配置
Element 或 String
指定一个控件或控件的ID,必须具有value或innerHTML属性(如input,textarea,span,div,p等标签都可以),用户存储日期显示值(也就是dateFmt格式化后的值)
Element 或 String
指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值)
doubleCalendar
是否是双月模式,如果该属性为true,则弹出同时显示2个月的日期框
enableKeyboard
键盘控制开关
enableInputMask
文本框输入启用掩码开关
autoUpdateOnChanged
在修改年月日时分秒等元素时,自动更新到el,默认是关闭的(即:需要点击确定或点击日期才更新)
为false时 不自动更新
为true时 自动更新
为null时(默认值) 如果有日元素且不隐藏确定按钮时 为false,其他情况为true
weekMethod
周算法不同的地方有一些差异
常见算法有两种
1. ISO8601:规定第一个星期四为第一周,默认值
2. MSExcel:1月1日所在的周
日期选择框显示位置
注意:坐标单位是px,是相对当前框架坐标(不受滚动条影响),默认情况下系统根据页面大小自动选择
{left:100,top:50}表示固定坐标[100,50]
{top:50}表示横坐标自动生成,纵坐标指定为 50
{left:100}表示纵坐标自动生成,横坐标指定为 100
请参考示例
当值为'auto'时 自动根据客户端浏览器的语言自动选择语言
当值为 其他 时 从langList中选择对应的语言
你可以参考
皮肤名称 默认自带 default和whyGreen两个皮肤
另外如果你的css够强的话,可以自己做皮肤
你可以参考
'yyyy-MM-dd'
日期显示格式
你可以参考
realDateFmt
'yyyy-MM-dd'
计算机可识别的,真正的日期格式
无效日期设置(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必须与它们相匹配
建议使用默认值
realTimeFmt
'HH:mm:ss'
realFullFmt
'%Date %Time'
' 00:00:00'
最小日期(注意要与上面的real日期相匹配)
' 23:59:59'
最大日期(注意要与上面的real日期相匹配)
起始日期,既点击日期框时显示的起始日期
为空时,使用今天作为起始日期(默认值)
否则使用传入的日期作为起始日期(注意要与上面的real日期相匹配)
你可以参考
firstDayOfWeek
周的第一天 0表示星期日 1表示星期一
isShowWeek
是否显示周
你可以参考
highLineWeekDay
是否高亮显示 周六 周日
isShowClear
是否显示清空按钮
是否显示确定按钮
isShowToday
是否显示今天按钮
isShowOthers
为true时,第一行空白处显示上月的日期，末行空白处显示下月的日期,否则不显示
errDealMode
纠错模式设置 可设置3中模式 0 - 提示 1 - 自动纠错 2 - 标记
autoPickDate
为false时 点日期的时候不自动输入,而是要通过确定才能输入
为true时 即点击日期即可返回日期值
为null时(推荐使用) 如果有时间置为false 否则置为true
hmsMenuCfg
{ H: [1, 6], m: [5, 6], s: [15, 4] }
4.8beta4新增
使用hmsMenuCfg属性可以实现时分秒菜单的自定义时分秒自定义 H m s 分别代表时分秒
第一个参数表示步进,1表示0,1,2,3... 2表示0,2,4... 15表示0,15,30...
第二个参数表示每行显示值的数量
默认H [1, 6] 步进1 每行显示6个 共4行
默认m [5, 6] 步进5 每行显示6个 共2行
默认s [15, 4] 步进15 每行显示4个 共1行
是否启用快速选择功能
注意:当日期格式中没有d这个元素时(如yyyy-MM或HH:mm:ss这样的格式时),该属性永远为true
autoShowQS
是否默认显示快速选择
快速选择数据,可以传入5个快速选择日期
注意:日期格式必须与 realDateFmt
realTimeFmt realFullFmt 相匹配
你可以参考
disabledDays
可以使用此功能禁用周日至周六所对应的日期
0至6 分别代表 周日至周六
你可以参考
disabledDates
可以使用此功能禁用所指定的一个或多个日期
你可以参考
默认为false, 为true时,无效日期变成有效日期
注意:该属性对无效天特殊天不起作用
你可以参考
specialDates
特殊日期,对指定的日期进行高亮显示
你可以参考
specialDays
特殊天,使用此功能禁用周日至周六所对应的日期进行高亮显示
0至6 分别代表 周日至周六
你可以参考
此四个参数为事件参数
你可以参考
onclearing
ychanging ychanged
Mchanging Mchanged
dchanging dchanged
Hchanging Hchanged
mchanging mchanged
schanging schanged
y M d H m s 分别表示年月日时分秒
changing 事件发生在属性改变之前
changed 事件发生在属性改变之后
你可以参考
配置全局默认值
通过配置WdatePicker.js的属性可以避免每次调用都传入配置值,为变成带来很多方便.
在默认情况下My97为每个属性都配置了默认值,这些默认值都可以在WdatePicker.js中修改的
你可以根据你个人的喜好更改这些值
比如你比较不喜欢默认的皮肤default 而更喜欢 whyGreen 这个皮肤,
你可以直接在WdatePicker.js把skin值改为 whyGreen
这样,你就不必每次调用控件的时候都传入 skin:'whyGreen' 了
你学会了吗?
配置单个控件
在控件里面你可以使用 onfocus 或 onclick 事件来调用WdatePicker函数来触发日期控件
WdatePicker({})其中{}中的内容都是只对当前实例有效,你可以任意配置属性表里有的所有属性
你可以随意的组合这些属性,达到你的需求
My97日期控件在这方面是做得非常灵活的.
多套配置快速切换
您可以设置多个WdatePicker.js文件,如
cn_WdatePicker.js,en_WdatePicker.js,simple_WdatePicker.js等
在不同的页面引入不同的
WdatePicker.js 达到配置快速切换的目的.
注意:文件必须以 _WdatePicker.js(大小写不限制) 为后缀,形如 &yourname&_WdatePicker.js
2. 语言配置
语言列表My97DatePicker目录下有个config.js(4.8以后在WdatePicker.js中),里面有段代码:
var langList =
{name:'en',
charset:'UTF-8'},
{name:'zh-cn', charset:'gb2312'},
{name:'zh-tw', charset:'GBK'}
这就是语言列表,每个项有name和charset两个属性.
name 表示语言的名称(必须与浏览器的语言字符串命名相同),在配置的时候,lang属性只能是配置列表里面已有的项,否则将自动返回第一项
charset 表示对应语言目录下的js文件所对应的编码格式
语言安装说明
分两步轻松实现:
1 将语言文件拷贝到 lang 目录
2 打开 config.js 配置语言列表
3. 皮肤配置
My97DatePicker目录下有个config.js(4.8以后在WdatePicker.js中),里面有段代码:
var skinList =
{name:'default', charset:'gb2312'},
{name:'whyGreen', charset:'gb2312'},
{name:'blue',
charset:'gb2312'},
{name:'simple',
charset:'gb2312'}
这就是皮肤列表,每个项有name和charset两个属性.
name 表示皮肤的名称,在配置的时候,skin属性只能是配置列表里面已有的项,否则将自动返回第一项
charset 表示对应皮肤目录下的css文件:datepicker.css所对应的编码格式
皮肤安装说明分两步轻松实现:
1 将皮肤文件包拷贝到 skin 目录
2 打开 config.js 配置皮肤列表
注意:安装过多的皮肤会影响性能,一般只安装自己使用的皮肤,3个以下比较适宜
&&&&浙ICP备号}