More than 5 years have passed since last update.

client 側で yyyy mm dd 入力時に処理

JavaScript

Last updated at 2013-04-01Posted at 2013-04-01

年もしくは月を変えると、それに伴って日が変わります。

日付け選択時にわざわざサーバ側を通さなくても、と思っていたので
それで作った js
ずっと使っていたんですが、最近の書き方じゃないなあと思い始めました。
クラスとか使うともっときれいに出来るんだろうか。
というほど長いコードでもない……

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="initdate.js"></script>
<script type="text/javascript" language="javascript">
window.onload = function()
{
    initYYYY(document.getElementById('birthyear'),-1,1,true);
    initMM(document.getElementById('birthmonth'));
    iniD(document.getElementById('birthyear'),document.getElementById('birthmonth'),document.getElementById('birthday'),true);
};
</script>
</head>
<body>
  <select name="yyyy" id="birthyear" onChange="iniD(document.getElementById('birthyear'),document.getElementById('birthmonth'),document.getElementById('birthday'),true);">
  </select>/
  <select name="mm" id="birthmonth" onChange="iniD(document.getElementById('birthyear'),document.getElementById('birthmonth'),document.getElementById('birthday'),true);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
  </select>/
  <select name="dd" id="birthday">
  </select>
</html>

initdate.js


function initYYYY(obj,start,end,flg)
{
    var nowdate = new Date();
    var thisyear = nowdate.getYear() + 1900;
    var startyear = thisyear + parseInt(start);
    var endyear = thisyear + parseInt(end);
    obj.options.length = endyear - startyear + 1;
    for(var i=startyear;i<=endyear;i++)
    {
        obj.options[i - startyear].text = i;
        obj.options[i - startyear].value = i;
        if(flg && thisyear == i)
            obj.options[i - startyear].selected = "selected";
    }
}
function initMM(obj)
{
    var nowdate = new Date();
    var thismonth = nowdate.getMonth() + 1;
    for(var i=0;i<obj.options.length;i++)
    {
        if(thismonth == obj.options[i].value)
            obj.options[i].selected = "selected";
    }
}
function iniD(yy,mm,obj,flg)
{
    var yt = yy;
    var mt = mm;
    var dt = obj;
    var selectedday = obj.value;
    var lastday = new Date(yy.value, mm.value, 0).getDate();
    obj.options.length = lastday;
    for(var i=0;i<lastday;i++)
    {
        dt.options[i].text  = i + 1;
        dt.options[i].value = i + 1;
        if(flg && i+1 == selectedday)
        {
            dt.options[i].selected = "selected";
        }
    }
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up