WebForm下日期时间选择控件_webform日期控件,webform时间控件资源-CSDN文库

共116个文件

js：50个

css：24个

gif：21个

时间选择控件

4星 · 超过85%的资源需积分: 50 177 浏览量 2010-11-26 13:08:37 上传评论收藏 798KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

WebForm下日期时间选择控件（116个子文件）

simple-1.html.bak 3KB

ChangeLog 25KB

calendar-win2k-cold-2.css 6KB

calendar-win2k-2.css 6KB

calendar-win2k-1.css 6KB

calendar-win2k-cold-2.css 6KB

calendar-win2k-2.css 6KB

calendar-win2k-1.css 6KB

calendar-win2k-cold-1.css 6KB

calendar-system.css 6KB

theme.css 5KB

calendar-tas.css 5KB

calendar-blue2.css 5KB

calendar-blue.css 5KB

calendar-green.css 5KB

calendar-brown.css 5KB

reference-Z-S.css 4KB

reference.css 2KB

Thumbs.db 10KB

Thumbs.db 7KB

today-bg.gif 1KB

img.gif 223B

title-bg.gif 116B

status-bg.gif 116B

title-bg.gif 116B

status-bg.gif 116B

normal-bg.gif 110B

rowhover-bg.gif 110B

normal-bg.gif 110B

rowhover-bg.gif 110B

active-bg.gif 89B

hover-bg.gif 89B

active-bg.gif 89B

hover-bg.gif 89B

dark-bg.gif 85B

menuarrow.gif 68B

menuarrow.gif 49B

menuarrow2.gif 49B

reference.html 76KB

release-notes.html 18KB

index.html 12KB

simple-3.html 4KB

bugtest-hidden-selects.html 4KB

simple-2.html 4KB

simple-1.html 3KB

dayinfo.html 3KB

multiple-dates.html 3KB

test-position.html 1KB

Noname1.html 1KB

field-button.jpg 2KB

calendar.js 48KB

calendar_stripped.js 34KB

calendar-setup.js 9KB

calendar-setup_stripped.js 5KB

cn_utf8.js 5KB

calendar-ru.js 4KB

calendar-he-utf8.js 4KB

calendar-es.js 4KB

calendar-de.js 4KB

calendar-fr.js 4KB

calendar-bg.js 4KB

calendar-br.js 4KB

calendar-ru_win_.js 4KB

calendar-it.js 4KB

calendar-lv.js 4KB

calendar-hu.js 4KB

calendar-en.js 4KB

calendar-ca.js 4KB

calendar-ko-utf8.js 3KB

calendar-pt.js 3KB

calendar-big5-utf8.js 3KB

calendar-da.js 3KB

calendar-lt-utf8.js 3KB

calendar-lt.js 3KB

calendar-big5.js 3KB

calendar-ko.js 3KB

calendar-el.js 3KB

calendar-sv.js 3KB

calendar-no.js 3KB

calendar-hr.js 3KB

calendar-zh.js 3KB

calendar-ch.js 3KB

calendar-sp.js 3KB

calendar-cs-utf8.js 3KB

calendar-fi.js 3KB

calendar-cs-win.js 3KB

calendar-si.js 3KB

calendar-sk.js 3KB

共 116 条

DHTML Calendar Widget

Mihai Bazon, <mihai bazon@yahoo.com>

 Dynarch.com 2002–2005, www.dynarch.com

March 7, 2005

calendar version: 1.0 “It is happening again”

$Id: reference.tex,v 1.23 2005/03/05 11:37:14 mishoo Exp $

Contents

1 Overview 2

1.1 How does this thing work? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.2 Project ﬁles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.3 License . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Quick startup 3

2.1 Installing a popup calendar . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.2 Installing a ﬂat calendar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.3 Calendar.setup in detail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3 Recipes 6

3.1 Popup calendars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3.1.1 Simple text ﬁeld with calendar attached to a button . . . . . . . . . . 6

3.1.2 Simple ﬁeld with calendar attached to an image . . . . . . . . . . . . . 7

3.1.3 Hidden ﬁeld, plain text triggers . . . . . . . . . . . . . . . . . . . . . . 7

3.1.4 2 Linked ﬁelds, no trigger buttons . . . . . . . . . . . . . . . . . . . . 8

3.2 Flat calendars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.3 Highlight spe cial dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.4 Select multiple dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

4 The Calendar object overview 11

4.1 Creating a calendar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4.2 Order does matter ;-) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.3 Caching the objec t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.4 Callback functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

5 The Calendar object API reference 14

5.1 Calendar constructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

5.2 Useful member variables (properties) . . . . . . . . . . . . . . . . . . . . . . . 15

5.3 Public me thods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

5.3.1 Calendar.create . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

5.3.2 Calendar.callHandler . . . . . . . . . . . . . . . . . . . . . . . . . . 16

5.3.3 Calendar.callCloseHandler . . . . . . . . . . . . . . . . . . . . . . . 16

5.3.4 Calendar.hide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

5.3.5 Calendar.setDateFormat . . . . . . . . . . . . . . . . . . . . . . . . . 16

5.3.6 Calendar.setTtDateFormat . . . . . . . . . . . . . . . . . . . . . . . 16

5.3.7 Calendar.setDisabledHandler . . . . . . . . . . . . . . . . . . . . . 17

5.3.8 Calendar.setDateStatusHandler . . . . . . . . . . . . . . . . . . . . 17

5.3.9 Calendar.show . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

5.3.10 Calendar.showAt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

5.3.11 Calendar.showAtElement . . . . . . . . . . . . . . . . . . . . . . . . . 18

Dynarch.com LLC, www.dynarch.com

This material is copyright

 Dynarch.com, 2005

5.3.12 Calendar.setDate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

5.3.13 Calendar.setFirstDayOfWeek . . . . . . . . . . . . . . . . . . . . . . 19

5.3.14 Calendar.parseDate . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

5.3.15 Calendar.setRange . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

6 Side eﬀects 20

7 Credits 20

1 Overview

The DHTML Calendar widget

is an (HTML) user interface element that gives end-users

a friendly way to select date and time . It works in a web browser. The ﬁrst versions only

provided support for popup calendars, while starting with version 0.9 it also supports “ﬂat”

display. A “ﬂat” cale ndar is a calendar that stays visible in the page all the time. In this

mode it could be very useful for “blog” pages and other pages that require the calendar to

be always present.

The calendar is compatible with most popular browsers nowadays. While it’s created

using web standards and it should generally work with any compliant browser, the following

browsers were found to work: Mozilla/Firefox (the development platform), Netscape 6.0

or better, all other Gecko-based browsers, Internet Explorer 5.0 or better for Windows

Opera 7

, Konqueror 3.1.2 and Apple Safari for MacOSX.

You can ﬁnd the latest info and ve rsion at the calendar homepage:

www.dynarch.com/projects/calendar

1.1 How does this thing work?

DHTML is not “another kind of HTML”. It’s merely a naming convention. DHTML refers to

the combination of HTML, CSS, JavaScript and DOM. DOM (Document Object Model) is

a set of interfaces that glues the other three together. In other words, DOM allows dynamic

modiﬁcation of an HTML page through a program. JavaScript is our programming language,

since that’s what browsers like. CSS is a way to make it look good ;-). So all this soup is

generically known as DHTML.

Using DOM calls, the program dynamically creates a <table> element that contains a

calendar for the given date and then inserts it in the document body. Then it shows this

table at a speciﬁed position. Usually the position is related to some eleme nt in which the

date needs to be displayed/entered, such as an input ﬁeld.

By assigning a certain CSS class to the table we can control the look of the calendar

through an external CSS ﬁle; therefore, in order to change the colors, backgrounds, rollover

eﬀects and other stuﬀ, you can only change a C SS ﬁle—modiﬁcation of the program itself is

not necessary.

1.2 Project ﬁles

Here’s a description of the project ﬁles, excluding documentation and example ﬁles.

• the main program ﬁle (calendar.js). This deﬁnes all the logic behind the calendar

widget.

• the CSS ﬁles (calendar-*.css). Loading one of them is necessary in order to see the

calendar as intended.

by the term “widget” I understand a single element of user interface. But that’s in Linux world. For

those that did lots of Windows programming the term “control” might be more familiar

people report that the calendar does not work with IE5/Mac. However, this browser was discontinued

and we believe that supporting it doesn’t worth the eﬀorts, given the fact that it has the worst, buggiest

implementation for DOM I’ve ever seen.

under Opera 7 the calendar still lacks some functionality, such as keyboard navigation; al so Opera

doesn’t seem to allow disabling text selection when one drags the mouse on the page; despite all that, the

calendar is still highly functional under Opera 7 and looks as go od as in other supported browsers.

2 / 20

Dynarch.com LLC, www.dynarch.com

This material is copyright

 Dynarch.com, 2005

• the language deﬁnition ﬁles (lang/calendar-*.js). They are plain JavaScript ﬁles

that contain all texts that are displaye d by the calendar. Loading one of them is

necessary.

• helper functions for quick setup of the calendar (calendar-setup.js). You can do

ﬁne without it, but starting with version 0.9.3 this is the rec omme nded way to setup a

calendar.

1.3 License

 Dynarch.com 2002–2005, www.dynarch.com

Author: Mihai Bazon

The calendar is released under the GNU Lesser General Public License.

2 Quick startup

Installing the calendar used to be quite a task until version 0.9.3. Starting with 0.9.3 I have

included the ﬁle calendar-setup.js whose goal is to assist you to setup a popup or ﬂat

calendar in minutes. You are encouraged to modify this ﬁle and not cale ndar.js if you need

extra customization, but you’re on your own.

First you have to include the needed scripts and style-sheet. Make sure you do this in

your do cument’s <head> section, also make sure you put the correct paths to the scripts.

2.1 Installing a popup calendar

Now suppose you have the following HTML:

</form>

You want the button to popup a calendar widget when clicked? Just insert the following

code immediately after the HTML form:

Calendar.setup(

{

inputField : "data", // ID of the input field

ifFormat : "%m %d, %Y", // the date format

button : "trigger" // ID of the button

}

);

</script>

The Calendar.setup function, deﬁned in calendar-setup.js takes care of “patching”

the button to display a calendar when clicked. The calendar is by default in single-click

mode and linked with the given input ﬁeld, so that when the end-user selects a date it will

update the input ﬁeld with the date in the given format and close the calendar. If you are

a long-term user of the calendar you probably remember that for doing this you needed to

write a couple functions and add an “onclick” handler for the button by hand.

By looking at the example above we can see that the function Calendar.setup receives

only one parameter: a JavaScript object. Further, that object can have lots of properties

that tell to the setup function how would we like to have the calendar. For instance, if we

would like a calendar that closes at double-click instead of single-click we would also include

the following: singleClick:false.

For a list of all supported parameters please see the section

2.3.

1.3 License 3 / 20

Dynarch.com LLC, www.dynarch.com

This material is copyright

 Dynarch.com, 2005

2.2 Installing a ﬂat calendar

Here’s how to conﬁgure a ﬂat calendar, using the same Calendar.setup function. First,

you should have an e mpty element with an ID. This element will act as a container for the

calendar. It can be any block-level element, such as DIV, TABLE, etc. We will use a DIV

in this example.

Then there is the JavaScript code that sets up the calendar into the “calendar-container”

DIV. The code can occur anywhere in HTML after the DIV element.

function dateChanged(calendar) {

// Beware that this function is called even if the end-user only

// changed the month/year. In order to determine if a date was

// clicked you can use the dateClicked property of the calendar:

if (calendar.dateClicked) {

// OK, a date was clicked, redirect to /yyyy/mm/dd/index.php

var y = calendar.date.getFullYear();

var m = calendar.date.getMonth(); // integer, 0..11

var d = calendar.date.getDate(); // integer, 1..31

// redirect...

window.location = "/" + y + "/" + m + "/" + d + "/index.php";

}

};

Calendar.setup(

{

flat : "calendar-container", // ID of the parent element

flatCallback : dateChanged // our callback function

}

);

</script>

2.3 Calendar.setup in detail

Following there is the complete list of properties interpreted by Calendar.setup. All of them

have default values, so you can pass only those which you would like to customize. Anyway,

you must pass at least one of inputField, displayArea or button, for a popup calendar,

or flat for a ﬂat calendar. Otherwise you will get a warning mess age saying that there’s

nothing to setup.

property type description default

inputField string The ID of your input ﬁeld. null

displayArea string This is the ID of a <span>, <div>, or any other

element that you would like to use to display the

current date. This is ge nerally useful only if the

input ﬁeld is hidden, as an area to display the

date.

null

button string The ID of the calendar “trigger”. This is an ele-

ment (ordinarily a button or an image) that will

dispatch a certain event (usually “click”) to the

function that creates and displays the calendar.

null

eventName string The name of the event that will trigger the cal-

endar. The name should be without the “on”

preﬁx, such as “click” instead of “onclick”. Vir-

tually all users will want to let this have the de-

fault value (“click”). Anyway, it could be useful

if, say, you want the calendar to appear when the

input ﬁeld is focused and have no trigger button

(in this case use “focus” as the event name).

“click”

4 / 20 2.2 Installing a ﬂat calendar

Dynarch.com LLC, www.dynarch.com

This material is copyright

 Dynarch.com, 2005

property type description default

ifFormat string The format string that will be used to enter the

date in the input ﬁeld. This format w ill be hon-

ored even if the input ﬁeld is hidden.

“%Y/%m/%d”

daFormat string Format of the date displayed in the displayArea

(if speciﬁed).

“%Y/%m/%d”

singleClick boolean Wether the calendar is in “single-click mode” or

“double-click mode”. If true (the default) the

calendar will b e created in single-click mode.

true

disableFunc function A function that receives a JS Date object. It

should return true if that date has to be dis-

abled, false otherwise. DEPRECATED (see

below).

null

dateStatusFunc function A function that receives a JS Date object and

returns a boolean or a string. This function al-

lows one to set a certain CSS class to some date,

therefore making it look diﬀerent. If it returns

true then the date will be disabled. If it returns

false nothing special happens with the given

date. If it returns a string then that will be

taken as a CSS class and appended to the date

element. If this string is “disabled” then the

date is also disabled (therefore is like returning

true). For more information please also refer to

section 5.3.8.

null

firstDay integer Speciﬁes which day is to be displayed as the ﬁrst

day of week. Possible values are 0 to 6; 0 means

Sunday, 1 means Monday, ..., 6 means Satur-

day. The end user can easily change this too, by

clicking on the day name in the calendar header.

weekNumbers boolean If “true” then the calendar will display week

numbers.

true

align string Alignment of the calendar, relative to the refer-

ence element. The reference element is dynami-

cally chosen like this: if a displayArea is speciﬁed

then it will be the reference element. Otherwise,

the input ﬁeld is the reference element. For the

meaning of the alignment characters please sec-

tion 5.3.11.

“Bl”

range array An array having exactly 2 elements, integers. (!)

The ﬁrst [0] element is the minimum year that

is available, and the second [1] element is the

maximum year that the calendar w ill allow.

[1900, 2999]

flat string If you want a ﬂat calendar, pass the ID of the

parent object in this property. If not, pass null

here (or nothing at all as null is the default

value).

null

flatCallback function You should provide this function if the calendar

is ﬂat. It will be called when the date in the

calendar is changed with a reference to the cal-

endar object. See section 2.2 for an example of

how to setup a ﬂat calendar.

null

onSelect function If you provide a function handler here then you

have to manage the “click-on-date” event by

yourself. Look in the calendar-setup.js and take

as an example the onSelect handler that you can

see there.

null

onClose function This handler will be called when the calen-

dar needs to close. You don’t need to provide

one, but if you do it’s your responsibility to

hide/destroy the calendar. You’re on your own.

Check the calendar-setup.js ﬁle for an example.

null

2.3 Calendar.setup in detail 5 / 20

评论收藏

内容反馈

zhzzy11845670

2019-10-30

挺好用的。
我会有一只猫的

2016-05-13

样式还可以，适用于初学者
唐卫星

2013-02-16

刚开始学这个，用处很大的，学了很多东西
sakuram

2012-09-18

挺好用，有多种风格
2024守候未来

2013-02-16

样式不好看，太丑了

前往

页

LV_Q

粉丝: 3
资源: 1

WebForm下日期时间选择控件

Web选择日期时间控件

带时间的日期选择web控件

web版日期选择控件(出生日期版)js

C# ASP.NET 时间控件_日期时间选择输入框控件。

C#编写的web自定义日期选择控件带演示

web 表单日期控件看看有没适合的

asp.net WebForm程序删除.designer.cs文件，重新设计并绑定服务端控件时间

数据与控件绑定（WebForm控件 WinForm控件 Xml 方案 绘图 基础 集成开发环境（IDE） 类型 日期 输入和输出 Access MySQL SQLServer 网络 系统 应用程序接口 字符串）

form表单日期输入控件

自己用C#编写的日期选择web自定义控件

form表单日期输入时间控件2

用C#编写的日期选择web自定义控件

asp.net日期选择控件

[首发]asp.net日期控件常用控件

ASP.NET c# 日期控件

datetimepicker

ASP 简单实现日期下拉菜单

HTML中带时间的日期控件

自定义WebForm控件集

C#的WEB日历控件Calendar

一个功能强大的基于ASP.NET的WebTimer时间控件源程序

Asp.net中时间格式化的6种方法详细总结

一套基于C#+ASP.NET实现的Web页面控件类库及页面表单设计程序代码

datetimepicker:手机页面时间选择控件

最新资源

数据与控件绑定（WebForm控件 WinForm控件 Xml 方案绘图基础集成开发环境（IDE）类型日期输入和输出 Access MySQL SQLServer 网络系统应用程序接口字符串）