以下は入力フォームでキーボードを使わずにカレンダーから選択できる便利なコマンドです。

HTML
1<input type="date" name="example1">
2
3<input type="date" name="example2" value="2012-02-16">

例として2016年1月1日を選択した場合は「2016-1-1」と引数に入れられることになります。
これのハイフンを無くして「20160101」や「20150111」に変換してリクエストしたいのです

恐らくJavaScriptで処理をするのではないかと調べていますがご存知方アドバイス頂きたいです。

rossi46hiro

2016/01/04 07:22

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けていますわからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

行動規範の内容に同意します

回答4件

ベストアンサー

replaceにて削除が可能です。
下記のサイトなどが参考になると思います。

https://syncer.jp/javascript-reverse-reference/how-to-replace-text

投稿2016/01/04 07:45

Y.Tanihata

総合スコア39

takato

2016/01/04 08:29

Y.Tanihata様初めまして！ここのサイトを参考にしたことがあったのですが「選択した年月日」を削除することができずスルーしました。関連付けることはできるのでしょうか？

Y.Tanihata

2016/01/05 08:27

replaceで変換しても、変換後の値をリクエストに詰めてsubmitしてあげないと、次画面で取得しても元々の値のままとなります。

行動規範の内容に同意します

input[type=date] の value 値は yyyy-mm-dd に正規化される仕様ですが、制限を回避するだけなら input[type=text] に変更すれば事足ります。

HTML
1<script>
2'use strict';
3function handleSubmit (event) {
4  var elements = event.target.elements,
5      input = elements.example2;
6
7  input.type = 'text';
8  input.value = input.value.replace(/-/g, '');
9
10  event.preventDefault(); // 挙動確認用のテストコード
11}
12</script>
13<form onsubmit="handleSubmit(event);">
14  <p><input type="date" name="example2" value="2012-02-16"></p>
15  <p><input type="submit" value="submit"></p>
16</form>

ただし、submit 後とはいえ、便利な機能を殺していることになるのでform送信を受けるサーバサイドスクリプト側で yyyy-mm-dd から yyyymmdd に正規化する実装が最良だと思います。
クライアントサイド側で実装するなら JavaScript が無効化されている環境でも正常動作する必要があるので、JavaScript 無効時には input[type=text] を表示される実装が必要になります。

Re: takato さん

投稿2016/01/05 08:57

think49

総合スコア18194

（Chromeで調べてみたところ）フォームの「example1」や「example2」それ自体に replace を行っても YYYY-mm-dd 形式に強制変換されてしまうようです。
ですので、hidden フィールドを追加して、そちらに replace の結果を代入した後、リクエストを実行すれば良いのではないでしょうか。下記にサンプルコードを記載しておきます。
（入力後のどのタイミングで実行するかは、ipadcaron さんのコメントにある通り、onBlur, onChange, onSubmit 何れかお好みで。サンプルでは onSubmit 時に replace 処理を実行し、example1 は example1_date, example2 は example2_date というフィールドに値を追加しています）

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>テスト</title>
6<script type="text/javascript">
7function dateReplace() {
8	var form = document.forms['test'];
9	var example1 = form.elements['example1'];
10	var example2 = form.elements['example2'];
11	var example1_date = form['example1_date'];
12	var example2_date = form['example2_date'];
13	
14	example1_date.value = example1.value.replace(/-/g, "");
15	example2_date.value = example2.value.replace(/-/g, "");
16	
17	alert(document.forms['test'].elements['example1_date'].value);
18	alert(document.forms['test'].elements['example2_date'].value);
19}
20</script>
21</head>
22
23<body>
24<form name="test" method="post" action="送信先URL" onSubmit="dateReplace()">
25  <input type="date" name="example1">
26  <input type="date" name="example2" value="2012-02-16">
27  <input type="hidden" name="example1_date">
28  <input type="hidden" name="example2_date">
29  <input type="submit" name="submit" id="submit" value="送信">
30</form>
31</body>
32</html>
33