JavaScript日期控件,用select实现

<!doctype html>
<html>
<head>
<title>年月日</title>
</head>
<body onLoad="init()">
<select id="year" onChange="swap_day()"></select>年
<select id="month" onChange="swap_day()"></select>月
<select id="day"></select>日
</body>
<script>
var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组
var month_small = new Array("4","6","9","11"); //包含所有小月的数组 

//页面加载时调用的初始化select控件的option的函数
function init()
{
    var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
    var select_month = document.getElementById("month"); //获取id为"month"的下拉列表框
    var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框

    //将年份选项初始化,从1980到2000
    for(var i = 1980; i <= 2000; i++)
    {
        select_year_option = new Option(i, i);
        select_year.options.add(select_year_option);
    }

    //将月份选项初始化,从1到12
    for(var i = 1; i <= 12; i++)
    {
        select_month_option = new Option(i, i);
        select_month.options.add(select_month_option);
    }

    //调用swap_day函数初始化日期
    swap_day();
}
//判断数组array中是否包含元素obj的函数,包含则返回true,不包含则返回false
function array_contain(array, obj)
{
    for (var i = 0; i < array.length; i++)
    {
        if (array[i] === obj)
        {
            return true;
        }
    }
    return false;
}

//根据年份和月份调整日期的函数
function swap_day()
{
    var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
    var select_month = document.getElementById("month"); //获取id为"month"的下拉列表框
    var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框

    select_day.options.length = 0; //在调整前先清空日期选项里面的原有选项
    var month = select_month.options[select_month.selectedIndex].value; //获取被选中的月份month

    //如果month被包含在month_big数组中,即被选中月份是大月,则将日期选项初始化为31天
    if(array_contain(month_big, month))
    {
        for(var i = 1; i <= 31; i++)
        {
            select_day_option = new Option(i, i);
            select_day.options.add(select_day_option);
        }
    }

    //如果month被包含在month_small数组中,即被选中月份是小月,则将日期选项初始化为30天
    else if(array_contain(month_small, month))
    {
        for(var i = 1; i <= 30; i++)
        {
            select_day_option = new Option(i, i);
            select_day.options.add(select_day_option);
        }
    }

    //如果month为2,即被选中的月份是2月,则调用initFeb()函数来初始化日期选项
    else
    {
        initFeb();
    }
}
//判断年份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) )
    {
        return true;
    }
    return false;
}

//根据年份是否闰年来初始化二月的日期选项
function initFeb()
{
    var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
    var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框
    var year = parseInt(select_year.options[select_year.selectedIndex].value); //获取被选中的年份并转换成Int

    //如果是闰年,则将日期选项初始化为29天
    if(isLeapYear(year))
    {
        for(var i = 1; i <= 29; i++)
        {
            select_day_option = new Option(i, i);
            select_day.options.add(select_day_option);
        }
    }

    //如果不是闰年,则将日期选项初始化为28天
    else
    {
        for(var i = 1; i <= 28; i++)
        {
            select_day_option = new Option(i, i);
            select_day.options.add(select_day_option);
        }
    }
}
</script>
</html>
时间: 2024-10-05 22:28:21

JavaScript日期控件,用select实现的相关文章

【javascript】分享一款经典的日期控件 My97DatePicker

最近在做平台项目,其中有用到日期选择,相对于 jqueryui 的 datepicker 我更喜欢 My97DatePicker. 理由 体积小,相对于 jqueryui 的 datepicker 的百来 K,My97DatePicker 只有 50K 不到: My97DatePicker 是用原生 js 编写的,能够用在任何环境下: My97DatePicker 功能非常强大全面,能够满足使用者的绝大部分需求. 如何使用 首先需要引用日期控件库: <script src="My97Dat

[整理]通过AngularJS directive对bootstrap日期控件的的简单包装

最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看来写官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形式即可使用了. <!doctype html> <html ng-app="datepickerApp"> <head> <link type="text/css" rel="stylesheet" hre

My97DatePicker日期控件实现按日、周、月、季、年选择时间段

 http://www.cnblogs.com/kevin-zlg/p/4631413.html 前台页面需要使用日期控件时,同事选择了My97DatePicker,功能还是挺强大的,在使用过程中需要实现按日.按周.按月.按季度.按年选择时间的功能. 控件自身提供了按日.按月和按年选择的功能,但是选择周和选择季度没有,鉴于方便,在选择周时就使用了选择日的状态,选择了日后再计算这一天所属的周的起始和结束日期. 在选择季度时,使用了选择月份的状态,选择月份后计算所属的季度的开始和结束日期. 控件本身

js 日期控件 可以显示为和历

日期控件的js 1 <!-- 2 /** 3 * Calendar 4 * @param beginYear 1990 5 * @param endYear 2010 6 * @param language 0(zh_cn)|1(en_us)|2(en_en)|3(zh_tw)|4(jp) 7 * @param patternDelimiter "-" 8 * @param date2StringPattern "yyyy-MM-dd" 9 * @param

日期控件html

日期控件多的是,这里收录的是最简单的一种 <html> <head> <script type="text/javascript"> function DateSelector(selYear, selMonth, selDay) { this.selYear = selYear; this.selMonth = selMonth; this.selDay = selDay; this.selYear.Group = this; this.selMo

Jquery Mobile日期控件mobiscroll

1.日期控件 参考:http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html http://www.wglong.com/main/artical!details?id=11 <link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" /> <script sr

根据条件决定My97DatePicker日期控件弹出的日期格式

代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>根据条件决定My97DatePicker日期控件弹出的日期格式</title> 6 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.

ux.form.field.GridDate 支持快速选择日期的日期控件

效果如图,亲测6.2.1版本可用 1 /** 2 *支持快速选择日期的日期控件 3 */ 4 Ext.define('ux.form.field.GridDate', { 5 extend: 'Ext.form.field.Date', 6 alias: 'widget.gridDateField', 7 requires: ['ux.picker.GridDate'], 8 pickerGrid: { 9 store: { 10 //默认配置 11 data: [{ 12 value: 30,

mui 时间日期控件(浏览器上无法查看,在手机端可以点击)

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui.mi