WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > javascriptサンプル

日付をカレンダーから入力

数行の設定のみでカレンダーを表示するフリーのJavaScriptです。
input type="date"」でカレンダー表示は可能ですが、IEなど一部のブラウザが「input type="date"」には対応していません。
当JavaScriptを使用すれば、「input type="date"」に対応していないブラウザでもカレンダーを表示することができます。(※IE8など古いブラウザには対応していません)

広告

利用方法

サンプル

type="text"

<input type="text" cmanCLDat="USE:ON" style="width:150px;">

常に、当ページのカレンダーが表示されます

type="date"

<input type="date" cmanCLDat="USE:ON" style="width:150px;">

ブラウザが「date」に対応していない「IE」などの場合に当ページのカレンダーが表示されます

ブラウザが「date」に対応している「chrome」などの場合はブラウザ仕様のカレンダが表示されます

設定方法

以下の2行の設定が必要となります

[1] <script src="xxxxx.js" charset="utf-8"></script>

[2] <input type="text" cmanCLDat="USE:ON,下記参照">

[1]JavaScriptファイル指定

JavaScriptファイルは、ダウンロードしてご利用ください。

JavaScriptダウンロード

現在のバージョン:Ver091(zip形式でダウンロードされます)

JavaScriptを画面に表示
以下のJavaScriptへ直接リンクを行うことも可能ですが、予告なしに内容変更や廃止(削除)する場合もありますのでダウンロードしてご利用ください。
直接リンクの場合「http://web-designer.cman.jp/freejs/cmanCalendar_v091.js」

[2-1]属性(実行条件)の設定

実行条件

cmanCLDat="条件:値,条件:値,・・・"

条件と値は「:」で、複数条件は「,」で区切ります。
大文字小文字は区別されます。全て半角で指定してください。

条件名 設定する値
USE:ON
USE:OFF

必須属性(※必ず指定してください)
当ページののカレンダを表示する場合は「USE:ON」
当ページののカレンダを表示する場合は「USE:OFF」

USE:ON 当ページののカレンダを表示する
USE:OFF 当ページののカレンダを表示しない
LANG:JA
LANG:EN

任意属性
曜日の表示や和暦表示などを制御します(初期値:JA)

LANG:JA曜日:"日"~"土"で表示され、和暦(元号)も表示されます
LANG:EN曜日:"Sun"~"Sat"で表示され、和暦(元号)は表示されません
FORM:1~4

任意属性
選択された日付の設定形式を指定します(初期値:1)

FORM:1"2010-12-01"形式
FORM:2"20101201"形式
FORM:3"2010/12/01"形式
FUNC

任意属性
日付選択確定後に実行する関数(function)

選択された日付が形式に沿って引数に設定されます。
日付の選択なし(閉じる)の場合は、引数が空となります。

日付選択後に実行する関数を指定FUNC:FUNC001

使用例

例1)英語表記で日付を「YYYY/MM/DD」形式とする

<input type="text" cmanCLDat="USE:ON,LANG:EN,FORM:3" style="width:80px">

cmanCLDat意味
USE:ONパレットの初期色をid="sample1"のVALUEより取得する
LANG:EN透明度を表示しない
FORM:3選択された色をid="sample1"に設定する
例2)日付選択後に「run001」関数を実行する

<input type="text" cmanCLDat="USE:ON,FUNC:run001" style="width:80px">

<script>
   function run001(p1){alert(p1);}
</script>

cmanCLDat意味
USE:ONパレットの初期色をid="sample2"の背景色より取得する
FUNC:run001選択された色をid="sample2"の背景色に設定する
ページTOP

注意事項

  • HTML5、CSS3を使用しています。古いブラウザでは正常に動作しません。
  • JavaScriptを直接使用することもできますが、当社都合で予告なしに廃止することもあります。
    出来るだけダウンロードしてご利用ください。
  • ダウンロードしたJavaScriptは改変自由です。
    再配布なども自由ですが、改変時にはJavaScript内に当サイトからのコピーであることを残してください。
  • 使用方法などのご質問はお受けしておりません。
    当ページの記載内容や実際の動作にてご確認ください。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン