2010年01月19日

JavaScriptで日付のFrom とToをチェック


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript</title>
<script type="text/javascript">
function trim(argValue)
{
return String(argValue).replace(/^[  ]*/gim, "").replace(/[  ]*$/gim, "");
}
function FromDateChange()
{
var i = 0;
var j = 0;
var From_YearIndex = document.forms[0].from_year.selectedIndex;
var From_MonthIndex = document.forms[0].from_month.selectedIndex;
var From_Year = parseInt(document.forms[0].from_year.options[From_YearIndex].text);
var From_Month = parseInt(document.forms[0].from_month.options[From_MonthIndex].text);
if (From_Month == 2)
{
// 2月の時
// うるう年の判定
if ((From_Year % 400 == 0) || ((From_Year % 4 == 0) && (From_Year % 100 != 0)))
{
for (i = 0; i < document.forms[0].from_day.options.length; i++){
document.forms[0].from_day.options[i] = null;
}
j = 1
for (i = 0; i < 29; i++){
document.forms[0].from_day.options[i] = new Option(j,i);
j = j + 1;
}
}
else
{
for (i = 0; i < document.forms[0].from_day.options.length; i++){
document.forms[0].from_day.options[i] = null;
}
j = 1
for (i = 0; i < 28; i++){
document.forms[0].from_day.options[i] = new Option(j,i);
j = j + 1;
}
}
}
else
{
// 2月以外の時
switch(From_Month)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
for (i = 0; i < document.forms[0].from_day.options.length; i++){
document.forms[0].from_day.options[i] = null;
}
j = 1
for (i = 0; i < 31; i++){
document.forms[0].from_day.options[i] = new Option(j,i);
j = j + 1;
}
break;
case 4:
case 6:
case 9:
case 11:
for (i = 0; i < document.forms[0].from_day.options.length; i++){
document.forms[0].from_day.options[i] = null;
}
j = 1
for (i = 0; i < 30; i++){
document.forms[0].from_day.options[i] = new Option(j,i);
j = j + 1;
}
//break;
}
}
}
function ToDateChange()
{
var i = 0;
var j = 0;
var To_YearIndex = document.forms[0].to_year.selectedIndex;
var To_MonthIndex = document.forms[0].to_month.selectedIndex;
var To_Year = parseInt(document.forms[0].to_year.options[To_YearIndex].text);
var To_Month = parseInt(document.forms[0].to_month.options[To_MonthIndex].text);
if (To_Month == 2)
{
// 2月の時
// うるう年の判定
if ((To_Year % 400 == 0) || ((To_Year % 4 == 0) && (To_Year % 100 != 0)))
{
for (i = 0; i < document.forms[0].to_day.options.length; i++){
document.forms[0].to_day.options[i] = null;
}
j = 1
for (i = 0; i < 29; i++){
document.forms[0].to_day.options[i] = new Option(j,i);
j = j + 1;
}
}
else
{
for (i = 0; i < document.forms[0].to_day.options.length; i++){
document.forms[0].to_day.options[i] = null;
}
j = 1
for (i = 0; i < 28; i++){
document.forms[0].to_day.options[i] = new Option(j,i);
j = j + 1;
}
}
}
else
{
// 2月以外の時
switch(To_Month)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
for (i = 0; i < document.forms[0].to_day.options.length; i++){
document.forms[0].to_day.options[i] = null;
}
j = 1
for (i = 0; i < 31; i++){
document.forms[0].to_day.options[i] = new Option(j,i);
j = j + 1;
}
break;
case 4:
case 6:
case 9:
case 11:
for (i = 0; i < document.forms[0].to_day.options.length; i++){
document.forms[0].to_day.options[i] = null;
}
j = 1
for (i = 0; i < 30; i++){
document.forms[0].to_day.options[i] = new Option(j,i);
j = j + 1;
}
break;
}
}
}
function DateCheck()
{
var From_YearIndex = document.forms[0].from_year.selectedIndex;
var From_MonthIndex = document.forms[0].from_month.selectedIndex;
var From_DayIndex = document.forms[0].from_day.selectedIndex;
var From_Year = document.forms[0].from_year.options[From_YearIndex].text;
var From_Month = document.forms[0].from_month.options[From_MonthIndex].text;
var From_Day = document.forms[0].from_day.options[From_DayIndex].text;
var To_YearIndex = document.forms[0].to_year.selectedIndex;
var To_MonthIndex = document.forms[0].to_month.selectedIndex;
var To_DayIndex = document.forms[0].to_day.selectedIndex;
var To_Year = document.forms[0].to_year.options[To_YearIndex].text;
var To_Month = document.forms[0].to_month.options[To_MonthIndex].text;
var To_Day = document.forms[0].to_day.options[To_DayIndex].text;

// 空欄チェック
if (trim(From_Day) == "")
{
alert("日(From)を選択してください。");
return;
}
if (trim(To_Day) == "")
{
alert("日(To)を選択してください。");
return;
}
// 比較
var dtFrom = new Date(From_Year, From_Month - 1, From_Day);
var dtTo = new Date(To_Year, To_Month - 1, To_Day);
if (dtFrom.getTime() > dtTo.getTime())
{
alert("FromとToの指定に問題があります。");
return;
}
else
{
alert("FromとToの指定に問題はありません。");
return;
}
}
</script>
</head>
<body>
<form id="frm" method="post" action="#">
<p>
<select id="from_year" onchange="FromDateChange();">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>年
<select id="from_month" onchange="FromDateChange();">
<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 id="from_day">
<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>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>日〜
<select id="to_year" onchange="ToDateChange();">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>年
<select id="to_month" onchange="ToDateChange();">
<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 id="to_day">
<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>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>日 
<input id="chk" type="button" value="チェック" onclick="DateCheck();" />
</p>
</form>
</body>
</html>
posted by rururu at 23:48| Comment(0) | TrackBack(0) | JavaScript

JavaScriptで日付チェック関数を作ってみました。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript</title>
<script type="text/javascript">
function DateCheck()
{
var Value = document.forms[0].date.value;
// YYYY/MM/DD形式チェック(年は数字4桁,月は01〜12,日は01〜31)
if(!Value.match(/^([0-9]{4})\/(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])$/))
{
alert("日付の形式が正しくありません。");
return;
}
//年月日
var sYear = Value.split("/")[0] - 0;
var sMonth = Value.split("/")[1] - 1; // Javascriptは、0-11で表現
var sDay = Value.split("/")[2] - 0;

//日付の妥当性チェック
var oDate = new Date(Date.parse(Value));
if(oDate.getFullYear() == sYear && oDate.getMonth() == sMonth && oDate.getDate() == sDay)
{
alert("入力した日付に問題はありませんでした。");
}
else
{
alert("入力した日付は正しくありません。");
}
}
</script>
</head>
<body>
<form id="dateadd" method="post" action="#">
<p>
YYYY/MM/DD形式(年は数字4桁,月は01〜12,日は01〜31)の日付を入力してボタンを<br />
押下すると確認結果のダイアログが表示します。<br />
<input id="date" type="text" value="2009/08/23" />
<input id="chk" type="button" value="チェック" onclick="DateCheck();" />
</p>
</form>
</body>
posted by rururu at 23:44| Comment(0) | TrackBack(0) | JavaScript

JavaScriptで日付を加算する関数を作ってみました。

JavaScriptで日付を加算する関数を作ってみました。
VBScriptのDataAdd関数のようなやつです。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript</title>
<script type="text/javascript">
// 実際の仕事で使う場合は、BaseDateの未入力/日付チェックと
// AddDaysの未入力/数値チェックを追加した方がいいと思います。
function DateAdd()
{
var BaseDate = document.forms[0].basedate.value;
var AddDays = document.forms[0].adddays.value;
var months = new Array("01","02","03","04","05","06","07","08","09","10","11","12");
var targetdate = new Date(BaseDate);
var calcuratedate;
var resultdate;
var number;
if ((AddDays < 0) || (AddDays > 0))
{
number = AddDays * 1000 * 60 * 60 * 24;
calculatedate = targetdate.getTime();
calculatedate += number;
targetdate.setTime(calculatedate);
var theYear = targetdate.getFullYear();
var theMonth = months[targetdate.getMonth()];
var theDay = targetdate.getDate();
var strDay = theDay.toString();
if (strDay.length == 1)
{
theDay = "0" + strDay;
}
resultdate = theYear + "/" + theMonth + "/" + theDay;
}
else
{
resultdate = BaseDate;
}
document.forms[0].resultdate.value = resultdate;
}
</script>
</head>
<body>
<form id="dateadd" method="post" action="#">
<p>
日付と加算する日数を入力して、計算ボタンを押下すると加算された日数を計算します。<br />
<input id="basedate" type="text" value="2009/08/19" /> + 
<input id="adddays" type="text" value="2" /> = 
<input id="calc" type="button" value="計算" onclick="DateAdd();" /> 
<input id="resultdate" type="text" value="" />
</p>
</form>
</body>
</html>
posted by rururu at 23:21| Comment(0) | TrackBack(0) | JavaScript

JavaScriptでTrim

JavaScriptでTrimを作ってみました。正規表現を使わないと
かなり多くのコードを書かないといけないのとテストがたいへん
です。正規表現をちゃんと勉強しようと思いました。
正規表現で日付チェックなども作る予定です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript</title>
<script type="text/javascript">
// JavaScriptでTrim() :正規表現を使用
function trim(argValue)
{
// [  ]内には半角スペースと全角スペースを記述
return String(argValue).replace(/^[  ]*/gim, "").replace(/[  ]*$/gim, "");
}
// JavaScriptでTrim():正規表現を未使用
// 2000年頃に作成。全角スペースにも対応
function trim2(argValue)
{
// 変数宣言
var i;
var retValue;
var RightSpaceCount;
var LeftSpaceFlg;
// 初期値
i = 0;
RightSpaceCount = 0;
LeftSpaceFlg = false;
retValue = "";
for (i = 0; i < argValue.length; i++)
{
if ((argValue.charAt(i) == " " || argValue.charAt(i) == " ") && (LeftSpaceFlg == false))
{
retValue = retValue + "";
}
else
{
LeftSpaceFlg = true;
retValue = retValue + argValue.charAt(i);
}
}
if (retValue != "")
{
for (i = retValue.length; i > 0; i--)
{
if (retValue.charAt(i) == " " || retValue.charAt(i) == " ")
{
RightSpaceCount++;
}
}
if (RightSpaceCount != 0)
{
retValue = retValue.substr(0, retValue.length - RightSpaceCount);
}
}
return retValue;
}

function chk1()
{
if (trim(document.forms[0].moji.value) == "")
{
alert("未入力です。値を入力してください。");
}
else
{
alert("入力値に問題はありません。");
}
}
function chk2()
{
if (trim2(document.forms[0].moji.value) == "")
{
alert("未入力です。値を入力してください。");
}
else
{
alert("入力値に問題はありません。");
}
}
</script>
</head>
<body>
<form id="frm" action="#">
<input type="text" id="moji" value="" /><br />
<input type="button" value="チェック(正規表現を使用)" onclick="chk1();" /><br />
<input type="button" value="チェック(正規表現を未使用)" onclick="chk2();" />
</form>
</body>
</html>
posted by rururu at 23:06| Comment(0) | TrackBack(0) | JavaScript