質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

4080閲覧

カレンダーから選択して入力した日付けの1ヶ月後を表示したい。

shirouto_user

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/09/28 08:23

お世話になっております。
現在、以下のような入力ボックスを作成しています。(画像はイメージです。)

イメージ説明

1、右横にカレンダーのアイコン
2、アイコン、テキストボックスどちらをクリックしてもカレンダーが出るようにする。
3、日付けを選択した後に、テキストボックスの下に選択した1ヶ月後の日付けを入れて
「20××年××月××日までが有効期限です」といった形の文言を表示

こういった機能の日付けの入力ボックスを作成しています。

2番までは作成できているのですが、そこから先の1ヶ月後の日付けを算出し、それを表示するやりかたがわかりません。
どのようにしたら表示できるのでしょうか?
ヒントでも良いのでいただけるとありがたいです。

ざっくりとしたききかたで申し訳ありません。
よろしくお願い致します。

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charsert=UTF-8" /> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> <style> body { background: #AAA; } img.ui-datepicker-trigger{ cursor: pointer; margin-left: 7px!important; vertical-align: middle; } </style> <title></title> </head> <body> <input type="text" id="xxdate" /> <script type="text/javascript"> $(function() { // テキストボックスへ Datepicker を仕掛ける $("#xxdate").datepicker({ buttonImage: "https://webllica.com/wp-content/themes/webllica/img/calendar-icon2.png", // カレンダーアイコン画像 buttonText: "カレンダーから選択", // ツールチップ表示文言 buttonImageOnly: true, // 画像として表示 showOn: "both" // カレンダー呼び出し元の定義 }); // 日本語化 $.datepicker.regional['ja'] = { closeText: '閉じる', prevText: '<前', nextText: '次>', currentText: '今日', monthNames: ['1月','2月','3月','4月','5月','6月', '7月','8月','9月','10月','11月','12月'], monthNamesShort: ['1月','2月','3月','4月','5月','6月', '7月','8月','9月','10月','11月','12月'], dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'], dayNamesShort: ['日','月','火','水','木','金','土'], dayNamesMin: ['日','月','火','水','木','金','土'], weekHeader: '週', dateFormat: 'yy/mm/dd', firstDay: 0, isRTL: false, showMonthAfterYear: true, yearSuffix: '年'}; $.datepicker.setDefaults($.datepicker.regional['ja']); }); </script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

onSelect で処理すればいいでしょう。

jQuery

1 $("#xxdate").datepicker({ 2 // 略 3 onSelect: function(dateText, inst) { 4 const date = inst.input.datepicker('getDate'); 5 date.setMonth(date.getMonth() + 1); 6 const message = $.datepicker.formatDate('yy年mm月dd日までが有効期限です', date); 7 console.log(message); 8 } 9 });

https://api.jqueryui.com/datepicker/#option-onSelect

投稿2018/09/28 09:04

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shirouto_user

2018/10/26 05:21

moment.jsで再現できました。教えていただきありがとうございます。
x_x

2018/10/26 05:48

jQuery UIの機能であり、moment.js は使っていませんが、コメントをつける場所を間違えたのでしょうか?
shirouto_user

2018/10/28 03:48

失礼致しました。間違えてベストアンサーをつけてしまっていたみたいです;ご指摘ありがとうございます。
guest

0

日付の処理というのはどの言語でもややこしいし、めんどくさいものですよね。
Javascriptの場合moment.jsという日付操作用のライブラリがありますのでこちらを利用してみてはいかがでしょうか?
https://momentjs.com/docs/#/manipulating/

日付の足し算引き算や、指定範囲に入っているかどうかの判定なども比較的簡単に出来てしまいます。

投稿2018/09/28 09:01

keisukeh

総合スコア657

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問