web-loop.com Open in urlscan Pro
183.181.99.10  Public Scan

Form analysis
0 forms found in the DOM

Text Content

 * COMPANY会社案内
   * 経営理念 / ご挨拶
   * 会社概要 / アクセス / オフィス
   * るーぷのスタッフ
 * BUSINESS事業案内
   * 私たちができること
   * WEB制作
   * サイト更新/管理
   * WEBコンサルティング
   * Web広告
   * MEO対策
   * アクセス解析
   * スマートフォンアプリ
   * グラフィックデザイン
 * WORKS制作実績
 * DATA / VOICEお客様の声
 * RECRUIT採用情報
 * NEWS / BLOGお知らせ

CONTACT US

 * COMPANY会社案内
   
   
   COMPANY 会社案内
   
    * 経営理念 / ご挨拶
    * 会社概要 / アクセス / オフィス
    * るーぷのスタッフ

 * BUSINESS事業案内
   
   
   BUSINESS 事業案内
   
    * WEB制作
    * サイト更新/管理
    * WEBコンサルティング
    * アクセス解析
    * Web広告
    * MEO対策
    * スマートフォンアプリ
    * グラフィックデザイン

 * WORKS制作実績
 * DATA & VOICEお客様の声
 * RECRUIT採用情報
 * NEWS & BLOGお知らせ

CONTACT US


NEWS & BLOG

お知らせ & ブログ


 * TOP
 * NEWS & BLOG
 * <input type=”date”>現在の○日後から○日後まで選択できるようにする

ブログ 2023/09/25


<INPUT TYPE=”DATE”>現在の○日後から○日後まで選択できるようにする

k.miki



おはようございます。株式会社るーぷのコーダー、三木と申します。

やっと涼しい日が来たり来なかったりしはじめました。
3~4年ほど前から、涼しくなってくると我が家の玄関に設置されている電気メーターにアシナガバチがやってくるようになりました。
はじめのうちはビビリ散らかしていたのですが、「アシナガバチはおとなしい」
「10～11月に集まってくるアシナガバチはお爺ちゃんらしい。（調べたところ、役割を終えたオスの場合が多く巣作りしないとのこと。）」
と聞いたので、「ほな、えぇか。。。」と毎年放置してます。

虫が大の苦手なのですが、「怖い顔して意外とこいつは臆病らしい。」とか聞くと割と許しちゃいます私。


<INPUT TYPE=”DATE”>

さて今回は、日時が入力できる”<input type=”date”>”に、現在から○日後～○日後と制限をかける方法をご紹介します。

日付の入力欄が作成できる、<input type=”date”>。
クリックすると、日付が入力できます。

<input type=”date”>


更に、min属性を指定すると日付の最小値（○年○月○日”から”）、
max属性を指定すると最大値（○年○月○日”まで”）と、選択範囲を指定することができます。

<input type=”date” min=”2023-09-28″ max=”2023-11-28″>



“JAVASCRIPT/JQUERY”で日付を現在の○日後から選択できるようにする。【初心者向け】

それでは本題に入ります。

以下、コードです。(初心者向けです。理由は、コードを書いた私が初心者だからです。)

HTML

<input type=”date”>

JAVASCRIPT(JQUERY)

$(function(){

// input[type=”date”]のminとmaxを現在日時取得して指定
// min (現在の3日後)
var minD = new Date();// 現在日時取得
minD.setDate(minD.getDate() + 3);// 現在日時の日数+3して上書き
var minYear = minD.getFullYear();// 上書きしたので、年月日それぞれ取得
var minMonth = minD.getMonth() + 1;
if(minMonth < 10){// 2桁にしないといけないので 10未満なら頭に0を追加
var minMonth = ‘0’ + minMonth;
}
var minDate = minD.getDate();
if(minDate < 10){// 2桁にしないといけないので 10未満なら頭に0を追加
var minDate = ‘0’ + minDate;
}
var min = minYear + ‘-‘ + minMonth + ‘-‘ + minDate;// yyyy-mm-ddになるように
$(‘input[type=”date”]’).attr(‘min’, min);
// max (現在の30日後)
var maxD = new Date();// 現在日時取得
maxD.setDate(maxD.getDate() + 30);// 現在日時の日数+30して上書き
var maxYear = maxD.getFullYear();// 上書きしたので、年月日それぞれ取得
var maxMonth = maxD.getMonth() + 1;
if(maxMonth < 10){// 2桁にしないといけないので 10未満なら頭に0を追加
var maxMonth = ‘0’ + maxMonth;
}
var maxDate = maxD.getDate();
if(maxDate < 10){// 2桁にしないといけないので 10未満なら頭に0を追加
var maxDate = ‘0’ + maxDate;
}
var max = maxYear + ‘-‘ + maxMonth + ‘-‘ + maxDate;// yyyy-mm-ddになるように
$(‘input[type=”date”]’).attr(‘max’, max);
});





以下が流れになります。

 1. 現在時刻を取得する。
    
    
    
    var minD = new Date();

 2. .setDate()で年月日の”日”の部分を、「取得した現在時刻の”日”」+3にして、さっきの変数に上書き。
    
    
    
    minD.setDate(minD.getDate() + 3);

 3. +3して上書きしたので”年””月””日”それぞれ取得。ただし
    min=”2023-09-28″のように「年4桁」「月2桁」「日2桁」でなければいけないので、
    年は良いとして月と日は10未満の場合頭に0を追加する。
    
    
    
    var minYear = minD.getFullYear();
    
    
    
    var minMonth = minD.getMonth() + 1;
    
    
    
    if(minDate < 10){
    var minDate = ‘0’ + minDate;
    }
    
    

 4. min=”2023-09-28″のような形になるよう文字と変数をハイフンを継ぎ接ぎ。
    
    
    
    var min = minYear + ‘-‘ + minMonth + ‘-‘ + minDate;

 5. <input type=”date”>のmin属性と先程から頑張ったアレを指定。
    
    
    
    $(‘input[type=”date”]’).attr(‘min’, min);

 6. max属性も同様に…


参考サイト様

こちらを参考に仕上げました。ありがとうございます。

jQueryで日付や時刻を表示する方法【new Date()の使い方を解説】
https://web.skipjack.tokyo/javascript/jquery_date/#chapter-6

【JavaScript入門】日付の加算・減算方法まとめ(月またぎ/うるう年)
https://www.sejuku.net/blog/22925#index_id2

それでは、失礼いたします。








PREV
NEXT


関連記事

 * ブログ 2023/11/22
   
   
   【小技】イラストレーターのWEB制作で便利な機能
   
   n.minami

 * ブログ 2024/01/11
   
   
   【超初心者向け】PHOTOSHOPでも整列がしたい！PART 2【前回のアレってどういう意味？】
   
   shibata

 * ブログ 2024/09/30
   
   
   【イラストレーター2024】アウトライン化されたテキストのフォントを探す方法！！
   
   hosokawa

 * ブログ 2023/06/29
   
   
   【PHOTOSHOP】初心者でも簡単！合成した写真の色味を一瞬で整える方法
   
   hosokawa


CATEGORY

 * お知らせ (17)
   * カルチャー (1)
   * 休業 (7)
 * ブログ (184)
   * EC (18)
   * SEO対策 (8)
   * Webマーケティング (25)
   * Web制作 (43)
   * Web広告 (25)
   * アクセス解析 (16)
   * デザイン (29)
   * 学習 (7)
   * 技術紹介 (19)
   * 雑記 (26)


WRITER

 * Loop Inc.

 * t.matsuzaki

 * n.minami

 * a-okuda

 * mukai

 * fu

 * y.matsuda

 * k.miki

 * hosokawa

 * t.onishi

 * shibata

 * s.hatakenaka


人気の記事


 * るーぷの健康経営の取り組みがテレビ取材を受けました！！


 * ページが更新されないのはキャッシュのせいかも！？再読み込み・キャッシュの削除方法をご紹介！


 * 【リスティング広告とSEO対策の違い】最前線のマーケターが徹底解説


 * 失敗しない！WEB広告代理店に依頼時に伝えるべき12のポイント


CONTACT US お問い合わせ

何から始めればいいかわからない、
WEBサイトからの集客ができないなどのお悩みも、
お気軽にご相談ください。

0742-70-3005 受付時間：平日10:00 - 18:30 メールでお問合せ 24時間受付（1営業日以内に返信）


株式会社るーぷ 〒631-0805
奈良県奈良市右京3丁目19-24 PATIO 2F TEL.0742-70-3005 E-MAIL.info@web-loop.com OPEN 09:30 /
CLOSE 18:30 © 2024 LOOP inc.
GO TO TOP

×
このサイトでは、ユーザーの利便性向上を目的としてCookieを使用しています。
同意ボタンをクリックすると、ユーザーはこのサイトでのCookieの使用に同意したことになります。
詳細については、「Cookie（クッキー）ポリシー」をご覧ください。が入ります。同意する