JavaScript初心者が日付けのカレンダーを表示できない理由と解決方法

このQ&Aのポイント
  • JavaScript初心者が日付けのカレンダーを表示するコードを書いているが、カレンダーが表示されない問題が発生している。
  • 表示されている日付けは正しく表示されているが、カレンダーが表示されないため困っている。
  • 解決方法として、コードを確認し、必要なCSSファイルやJavaScriptファイルが正しく読み込まれているかを確認することが重要である。また、ブラウザの開発者ツールを使用してエラーメッセージを確認することも効果的である。
回答を見る
  • ベストアンサー

javascriptのプロの方

初心者です。javascript の placeholder "___年__月__日" を使って、日付けのカレンダーを選択するコードを書いているのですが、コードをサーバーにアップロードして、日付の ___年__月__日は表示されているのですが、カレンダーが表示されません。 困っています。夜も眠れません。 どうしたら表示されるでしょうか?回答よろしくお願いいたします。  表示画像も付属してあります。 書いたコードは下のURLです。 (入力フォームのHTMLファイル) https://drive.google.com/file/d/17Y9Uoe02WcqB8i3snxsHhg7GkRee0Vyl/view?usp=sharing 日付選択のカレンダー表示のコードの一部を上のURLから1部分を抜粋したものもあります。以下。 <table><tbody><tr class="time_list"> <td class="b">第1希望:<span class="fontS">※</span></td> <td class="fontSS"> <table><tbody><tr class="time_list2"> <td> <input type="text" id="input_date1" class="cal lt_004 hasDatepicker" name="time_Ldata01[]" placeholder="___年__月__日" readonly="readonly" value=""> </td> <td> <div class="wrap"> <select id="input_time1" name="time_Ldata01[]"> <option value=""></option> <option value="10:00~11:00">10:00~11:00</option> <option value="11:00~12:00">11:00~12:00</option> <option value="12:00~13:00">12:00~13:00</option> <option value="13:00~14:00">13:00~14:00</option> <option value="14:00~15:00">14:00~15:00</option> <option value="15:00~16:00">15:00~16:00</option> <option value="16:00~17:00">16:00~17:00</option> <option value="17:00~18:00">17:00~18:00</option> <option value="18:00~19:00">18:00~19:00</option> <option value="19:00~20:00">19:00~20:00</option> </select> </div> </td> </tr></tbody></table>

質問者が選んだベストアンサー

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5085/13293)
回答No.2

日付のinputタグの「hasDatepicker」クラスを消すと入力出来ます

その他の回答 (1)

  • ngwaver
  • ベストアンサー率26% (323/1202)
回答No.1

リンク先で、質問者様の本名と思われる名前が見えていますよ。

関連するQ&A

  • プログラミング初心者です。

    プログラミング初心者です。 HTMLで今、電話予約の日時をカレンダーで指定するためのコードを書いているのですが、下のコードはその1部を抜き取ったものです。付属の画像の赤い丸で囲んでいる部分のコードですが、 " placeholder="___年__月__日"のコードの部分なのですが、「XHTML10Transitionlでは、<input>属性で " placeholderを使用することができません」という表示がでてコードが発動しませんどうしたらよいでしょうか? 以下コード 付属写真の赤く囲ってある部分です。 <input type="text" id="input_date1" class="cal lt_004 hasDatepicker" name="time_Ldata01[]" placeholder="___年__月__日" readonly="readonly" value=""> 困っています。回答よろしくお願いします。

  • avaSprictを使ってcookieに保存できるようにしたい

    JavaSprictで動かす計算式を作りました。 見よう見まねで初めて作ったので色々と変なところがあるかもしれませんが とりあえず動作はOKな状態になっています。 HTMLソースと、jsファイルの中身は下記のようになっているのですが このファイルのINPUT1とINPUT2、プルダウン1とプルダウン2の内容を JavaSprictを使ってcookieに保存できるようにしたいです。 jsファイルをどのようにすれば良いでしょうか? できれば、Saveボタンのようなものが無い状態で cookieを削除するまでずっと保存できる形にしたいです。 【HTMLソース】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <SCRIPT type="text/JavaScript" src="test.js"> </SCRIPT> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.0.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE> test </TITLE> </HEAD> <BODY onload="SetTarget()"> <P> test </P> <TABLE> <TBODY> <TR> <TD> INPUT1 </TD> <TD> <INPUT type="text" value="200" size="11" onkeyup="NumOnly(this);Calc()"> </TD> </TR> <TR> <TD> INPUT2 </TD> <TD> <INPUT type="text" value="500" size="11" onkeyup="NumOnly(this);Calc()"> </TD> </TR> </TBODY> </TABLE> <TABLE border="1"> <TBODY> <TR> <TD><SELECT onchange="Calc()"> <OPTION value=",">プルダウン1 </OPTION> <OPTION value="1.4">P1-1 </OPTION> <OPTION value="1.5">P1-2 </OPTION> </SELECT></TD> <TD><SELECT onchange="Calc()"> <OPTION value=",">プルダウン2 </OPTION> <OPTION value="1.2">P2-1 </OPTION> <OPTION value="1.3">P2-2 </OPTION> </SELECT></TD> </TR> </TBODY> </TABLE> <HR> <SELECT onchange="ListSel(this.value)"> <OPTION value=",,"> リスト </OPTION> <option value="100,30,100"> リスト2 </option> <option value="1220,60,80"> リスト3 </option> </SELECT> <TABLE border="0" cellpadding="3" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#FFFFFF"> 1 <INPUT type="text" size="11" value="" onkeyup="NumOnly(this);Calc()"> </TD> <TD bgcolor="#FFFFFF"> 2 <INPUT type="text" size="11" value="" onkeyup="NumOnly(this);Calc()"> </TD> <TD bgcolor="#FFFFFF"> 3 <INPUT type="text" size="11" value="" onkeyup="NumOnly(this);Calc()"> </TD> </TR> </TBODY> </TABLE> <HR> <B> Ans </B> <TABLE border="1"> <TBODY> <TR> <TD>Ans1</TD> <TD>Ans2</TD> <TD>Ans3</TD> </TR> <TR> <TD><INPUT type="text" size="11"></TD> <TD><INPUT type="text" size="11"></TD> <TD><INPUT type="text" size="11"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

  • MTOS内のページに設置したメールフォームについて

    いつもみなさんのアドバイスを参考にさせて頂いております。 早速ですが、MTサイト内にメールマガジンのフォームを設置したところ、実際に名前とメールアドレスを入力し送信ボタンを押しても名前が入力されていませんなどとエラーが表示されます。 メールマガジン自体は他サイトで使用しているものでメールマガジンで使用しているCGIも他サイトのサーバにて稼動しております。 ところが、使用しているタグ<form> ~ </form>までをそのままMTに貼り付けて設置してみてもうまく運用できません。 何か問題があるのでしょうか? ちなみにタグは以下の通りです。 <div id="mail_maga"> <form action="http://www.***/***.cgi" method="post"> &nbsp;<table id="AutoNumber1"><tbody><tr> <td colspan="2" class="mail_magat">☆ メルマガ登録</td> </tr><tr> <td class="mail_magast">お名前</td> <td class="mail_magain"><input type="text" name="お名前" size="30"></td> </tr><tr> <td class="mail_magast">メールアドレス</td> <td class="mail_magain"><input type="text" name="メールアドレス" size="30"> 半角英数字</td> </tr></tbody></table> <table id="AutoNumber2" class="mail_maga2"><tbody><tr> <td> <input type="hidden" size="1" name="code" value="0000a" /> <input type="hidden" size="1" name="mlcd" value="0000a" /> <input type="hidden" size="1" name="key01" value="2542666" /> <input type="hidden" size="1" name="HPADDR" value="http://www.***/***.html" /> <input type="submit" name="mode" value="送信" /> <input type="submit" name="mode" value="内容確認" /> <input type="reset" value="リセット" /> </td> </tr></tbody></table> </form> 何かアドバイスありましたら宜しくお願いします。

    • 締切済み
    • CGI
  • selectでinputの表示を変えたい

    セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト1 <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト2 <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト3 <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト1のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更 セレクト2のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更 という感じにしたいのですが、可能でしょうか? 可能であれば書き方を教えていただけると助かります。 よろしくおねがいします。

  • セレクトメニューで選んだ値を同じページの別の場所へ表示する方法

    セレクトメニューで選んだ値を同じHTML内の別の箇所へ表示させる方法がわかりません。 どなたか分かる方が居ましたら、回答お願い致します。 下記のような例です。 <BODY> <FORM method="post" Name="Application" action="bin/regist.cgi" onSubmit="return Check()"> <input type="hidden" name="subject" value="申し込み"><input type="hidden" name="nexthtm" value="index.html"> <CENTER> <SELECT name="RATE" size="1" tabindex="1"> <OPTION>▼選択</OPTION> <OPTION value="ドル">ドル</OPTION> <OPTION value="円" selected>円</OPTION> </SELECT><BR><BR> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD width="90" align="center"><INPUT size="10" type="text" name="PRICE" tabindex="6" onChange="CheckTxt1(this.value);"></TD> <TD></TD> <TD>ここに選んだ単位を表示したい</TD> </TR> </TBODY> </TABLE> <BR> <TABLE border="0"> <TR><TD colspan="3" align="center"> <INPUT type="submit" value=" 送 信 " tabindex="45">    <INPUT type="reset" value=" リセット " tabindex="46"> <BR> </TD></TR> </TABLE> </CENTER> </FORM> </BODY>

    • ベストアンサー
    • HTML
  • ▲▲JavaScriptに詳しい人見てください▲▲

    いつもお世話になります。 恐れ入りますがお力添えお願い致します。 フォーム(名前は f とする)を使用して、 10問の足し算問題を画面に表示して計算練習できるようにする。 問題は1~10の自然数同士の足し算とする。 各問題ごとに,問題を表示するテキストボックス(名前は p1 ~ p10 とする) 解答を入力するためのテキストボックス(名前は a1 ~ a10 とする) ○×をつけるためのテキストボックス(名前は c1 ~ c10 とする)を用意する。 答え合わせをするためのボタンと 正答数,誤答数を表示するテキストボックス(名前は ok, ng とする)を用意する。 プログラム内部では,正解を保存するための配列(変数名は sol とする)を用意し 乱数を用いて 第1問 ~ 第10問 を生成するとともに それらの正解を sol[1] ~ sol[10] に保存する。 ユーザは,解答欄(a1 ~ a10)に解答を記入し,答え合わせボタンをクリックする。 答え合わせボタンがクリックされると,各問題(iとする)について,解答欄(ai)の内容と 正解(sol[i])の内容を照合して,正誤欄(ci)に○×をつけ,同時に正答数・誤答数をカウントする。 10問全てに○×をつけた後,正答数(ok),誤答数(ng)を表示する。 今回は,問題を作成してフォーム(テキストボックス)に表示するだけとし 答え合わせのためのコードなどは実装しない.したがって 答え合わせボタンのイベントハンドラは記述しなくて良い。 ただし,配列 sol を用意して,そこに正解を保存するところまでは作成すること。 正解を保存する配列は,(今後作成する)答え合わせボタンのイベントハンドラからも参照されるので, 変数 sol は大域変数とすること。 問題の生成には myRandom(n) 関数を用いてもよい。 と言う課題です 雛形は以下のように作りました。 <title>JavaScript Task 8-1, prototype</title> <script type="text/javascript"> <!-- /* 配列 sol は大域変数としてここで記述しておく方がよい・・? */ /* 関数 myRandom(n) を定義するなら,このあたりでするべき・・・? */ function initialize() { /* ここで問題を作成して p1 ~ p10 に書きこむ */ /* 各問題の正解を配列 sol に保存する */ } //--> </script> <body onload="initialize();"> <h1>計算練習プログラム (2)</h1> <form name="f" action=""> <table border="1"> <tr><td>番号</td><td>問題</td><td>解答</td><td>正誤</td></tr> <tr><td>1</td> <td><input name="p1" size="9" type="text" readonly></td> <td><input name="a1" size="3" type="text"></td> <td><input name="c1" size="3" type="text" readonly></td></tr> <tr><td>2</td> <td><input name="p2" size="9" type="text" readonly></td> <td><input name="a2" size="3" type="text"></td> <td><input name="c2" size="3" type="text" readonly></td></tr> <tr><td>3</td> <td><input name="p3" size="9" type="text" readonly></td> <td><input name="a3" size="3" type="text"></td> <td><input name="c3" size="3" type="text" readonly></td></tr> <tr><td>4</td> <td><input name="p4" size="9" type="text" readonly></td> <td><input name="a4" size="3" type="text"></td> <td><input name="c4" size="3" type="text" readonly></td></tr> <tr><td>5</td> <td><input name="p5" size="9" type="text" readonly></td> <td><input name="a5" size="3" type="text"></td> <td><input name="c5" size="3" type="text" readonly></td></tr> <tr><td>6</td> <td><input name="p6" size="9" type="text" readonly></td> <td><input name="a6" size="3" type="text"></td> <td><input name="c6" size="3" type="text" readonly></td></tr> <tr><td>7</td> <td><input name="p7" size="9" type="text" readonly></td> <td><input name="a7" size="3" type="text"></td> <td><input name="c7" size="3" type="text" readonly></td></tr> <tr><td>8</td> <td><input name="p8" size="9" type="text" readonly></td> <td><input name="a8" size="3" type="text"></td> <td><input name="c8" size="3" type="text" readonly></td></tr> <tr><td>9</td> <td><input name="p9" size="9" type="text" readonly></td> <td><input name="a9" size="3" type="text"></td> <td><input name="c9" size="3" type="text" readonly></td></tr> <tr><td>10</td> <td><input name="p10" size="9" type="text" readonly></td> <td><input name="a10" size="3" type="text"></td> <td><input name="c10" size="3" type="text" readonly></td></tr> </table> <input value="答え合わせ" type="button"><br> 正答数:<input name="ok" size="3" type="text" readonly> 誤答数:<input name="ng" size="3" type="text" readonly> </form> </body> function initialize()の中身をどうしたらいいのかが分かりません。

  • テーブルの枠線とテキストフィールドの縦、横の隙間をなくしたい

    テーブルの枠線とテキストフィールドの縦、横の隙間をなくしたい テーブルの枠線とテキストフィールの枠を隙間なくピッチリとくっつけたい です。コードを掲示しますのでご存知の方はどなたか修正願います <body> <table width="900" border="1" style="height:25px;"> <tr> <td rowspan="2" width="400">&nbsp;</td> <td rowspan="2" width="50">&nbsp;</td> <td rowspan="2" width="100"><input type="text"readonly="readonly"value="サンプルシステム(株)" style="height:25px;"/>&nbsp;</td> <td rowspan="2" width="50">&nbsp;</td> <td rowspan="2" width="100"><input type="text"readonly="readonly" value="システム管理者"style="height:25px;"/>&nbsp;</td> <td width="60"style="height:12px;">実施日</td> <td width="140"><input type="text" readonly="readonly" width="140"value="2010/07/01" style="height:12px;"/></td> <tr> <td height="19" style="height:12px;">CODE</td> <td><input type="text" readonly="readonly" width="140" value="TTSORD50P" style="height:12px;"/></td> </tr> </table> </body>

    • ベストアンサー
    • HTML
  • javascriptによる計算

    テキストボックス「a1~6」の値とテキストボックス「b1~6」に入力された値を足し算してテキストボックス「c1~6」(例…c[i] = a[i] + b[i])を計算するJavaScriptを作成しているのですが、結果がundefinedになってしまい上手くいきません。どうやったら動くのかどうかご教授ください。 以下ソース↓ <script language ="JavaScript"> function plus() { var intResult = 0; for (i=1; i<=6; i++){ intResult[i] = 0; if (!isNaN(document.forms["A"].all["a"+i].value) && !isNaN(document.forms["B"].all["b"+i].value)){ intResult[i] += parseInt(document.forms["A"].all["a"+i].value); intResult[i] += parseInt(document.forms["B"].all["b"+i].value); } <table border = 1> <tr> <td> <table border = 1> <tr> <td> <form name="A"> <input type = "text" size = 5 name = "a1"></input> </td> <td> <input type = "text" size = 5 name = "a2"></input> </td> <td> <input type = "text" size = 5 name = "a3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a4"></input> </td> <td> <input type = "text" size = 5 name = "a5"></input> </td> <td> <input type = "text" size = 5 name = "a6"></input> </form> </td> </tr> </table> </td> <td> <table boeder = 1> <tr> <input type = "button" onClick="plus()" value = "+"></input> </tr> </table> </td> <td> <table border = 1> <tr> <td> <form name = "B"> <input type = "text" size = 5 name = "b1"></input> </td> <td> <input type = "text" size = 5 name = "b2"></input> </td> <td> <input type = "text" size = 5 name = "b3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b4"></input> </td> <td> <input type = "text" size = 5 name = "b5"></input> </td> <td> <input type = "text" size = 5 name = "b6"></input> </form> </td> </tr> </table> </td> </tr> </table> 答え <form name = "C"> <table border = 1> <tr> <td> <input type = "text" size = 5 name = "c1"></input> </td> <td> <input type = "text" size = 5 name = "c2"></input> </td> <td> <input type = "text" size = 5 name = "c3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c4"></input> </td> <td> <input type = "text" size = 5 name = "c5"></input> </td> <td> <input type = "text" size = 5 name = "c6"></input> </td> </tr> </table> </form> </body> document.C.all["c"+i].value = intResult[i]; } } </script>

  • tableでレイアウトが崩れる場合

    技術の足りなさからCSSにできなかったので、再度テーブルでサイズを指定してやってみようとしているところです。 どこかの数字がおかしくなっていると思うのですが、どうしてもわかりません。 ちゃんと表示できるブラウザとそうでないブラウザがあり、Firefoxは環境設定により表示が崩れる場合があります。 使用ソフトはビルダーの11です。 なんでも良いのでどうぞアドバイスをよろしくお願い致します。 <body> <div ALIGN="center"> <table> <tbody> <tr> <td CLASS="td4" HEIGHT="70"> <table WIDTH="600" CELLSPACING="1" CELLPADDING="0"> <tbody> <tr> <td VALIGN="top" CLASS="td1" WIDTH="400" ALIGN="left" HEIGHT="180"> <b>文字 <textarea ROWS="15" COLS="70">文字</textarea><br> <br> </td> <td VALIGN="top" CLASS="td1" WIDTH="100" HEIGHT="180"> <table CELLSPACING="0" CELLPADDING="4"> <tbody> <tr> <td CLASS="td2" HEIGHT="16" WIDTH="100">文字</td> </tr> </tbody> </table> 文字 <br> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div> </body>

    • ベストアンサー
    • HTML
  • セレクトボックスを使ったJavaScriptでの計算方法

    セレクトボックスから名前を選択して計算する方法を教えてください。 HTMLとJavaScriptは別に分けます。 ----------.html---------- <table border="1"> <tr><td>武器</td> <td><form name="myForm"> <select name="Item" size="1" tabindex="0"> <option value="0">あああああ</option> <option value="1">いいいいい</option> <option value="2">ううううう</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td>OP1</td> <td> <select name="OP1" size="1" tabindex="0"> <option value="0">AAAAA</option> <option value="1">BBBBB</option> <option value="2">CCCCC</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option>      ・      ・      ・      ・      ・ </select> </td></tr> <tr><td colspan="2" align="center"> <input type="button" value="計算する" onclick="Calculation()"> <input type="reset" name="リセット" value="リセット"> </form> </td></tr> <tr><td colspan="2" align="center"> <form name="TxtArea"><input type="text" name="myResult" size="20"> </form> </td></tr> </table> .jsではItemをbox1、OP1をbox2、OP3をbox3、OP3をbox4としています。 box1[0]=10; box1[1]=15; といった感じです。 全部足し算で計算します。 どのようにすれば計算できるのかJavaScriptについて書かれてるページを見たのですが理解できなかったのでよろしくお願いします。