お世話になっております。
現在、以下のような入力ボックスを作成しています。(画像はイメージです。)
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>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/26 05:21
2018/10/26 05:48
2018/10/28 03:48