Month and Week Inputs (type="month" & type="week")

Technical Deep Dive & Specifications

The type="month" Specification

The value, min, and max attributes of <input type="month"> must strictly match:

$$\text{YYYY-MM}$$

• YYYY: Four-digit year (0001 through 9999).
• MM: Two-digit month (01 through 12).

<!-- Wire Value: August 2026 -->
<input type="month" name="subscription_start" value="2026-08" min="2026-01" max="2028-12">

DOM valueAsNumber for Month Inputs

For type="month", valueAsNumber returns the total number of months elapsed since January 1970: $$\text{valueAsNumber} = (\text{Year} - 1970) \times 12 + (\text{Month} - 1)$$

• For 1970-01, valueAsNumber is 0.
• For 2026-08, valueAsNumber is $(2026 - 1970) \times 12 + (8 - 1) = 56 \times 12 + 7 = 679$.

The type="week" Specification & ISO 8601 Weeks

The value, min, and max attributes of <input type="week"> must strictly match:

$$\text{YYYY-Www}$$

• YYYY: Four-digit ISO week-numbering year.
• W: The mandatory literal uppercase letter "W".
• ww: Two-digit week index from 01 to 53.

<!-- Wire Value: Week 34 of 2026 -->
<input type="week" name="sprint_cycle" value="2026-W34" min="2026-W01" max="2026-W52">

How ISO 8601 Defines "Week 01":

+-------------------------------------------------------------------------------+
|                       THE ISO 8601 WEEK 01 FORMULA                            |
+-------------------------------------------------------------------------------+
| - A week always begins on MONDAY and ends on SUNDAY.                          |
| - Week 01 of any year is the week that contains the FIRST THURSDAY of January |
|   (or equivalently, the week that contains January 4th).                      |
| - If January 1st falls on a Friday, Saturday, or Sunday, those days belong   |
|   to Week 52 or 53 of the PREVIOUS year!                                      |
+-------------------------------------------------------------------------------+

Cross-Browser Support Matrix & Progressive Fallbacks

While Chromium-based browsers (Chrome, Edge, Opera, Samsung Internet) provide native visual calendar pickers for month and week, Safari (desktop) and Firefox have historically treated them as standard text inputs.

+-------------------------------------------------------------------------------+
|                         BROWSER COMPATIBILITY MATRIX                          |
+----------------------+--------------------+-----------------------------------+
| Browser Engine       | type="month"       | type="week"                       |
+----------------------+--------------------+-----------------------------------+
| Chromium / Edge      | ✅ Native Picker    | ✅ Native Picker                   |
| Firefox (Desktop)    | ⚠️ Text Fallback   | ⚠️ Text Fallback                  |
| Safari (macOS)       | ⚠️ Text Fallback   | ⚠️ Text Fallback                  |
| iOS Safari           | ✅ Native Roller    | ⚠️ Text Fallback                  |
| Android Chrome       | ✅ Native Picker    | ✅ Native Picker                   |
+----------------------+--------------------+-----------------------------------+

The HTML Graceful Degradation Guarantee

When any browser encounters an input type it does not recognize or support, it automatically degrades to <input type="text"> without throwing an error.

Progressive Enhancement Pattern:

To ensure unsupported browsers still collect valid data, always attach a regex pattern and clear placeholder:

<!-- Month with progressive fallback -->
<input 
  type="month" 
  id="card-exp" 
  name="exp_month" 
  placeholder="YYYY-MM"
  pattern="[0-9]{4}-(0[1-9]|1[0-2])"
  title="Please enter a valid month in YYYY-MM format"
  autocomplete="cc-exp"
  required
>

<!-- Week with progressive fallback -->
<input 
  type="week" 
  id="sprint" 
  name="sprint_week" 
  placeholder="YYYY-Www"
  pattern="[0-9]{4}-W(0[1-9]|[1-4][0-9]|5[0-3])"
  title="Please enter an ISO week in YYYY-Www format (e.g., 2026-W34)"
  required
>

JavaScript Feature Detection

function isInputTypeSupported(type) {
  const input = document.createElement('input');
  input.setAttribute('type', type);
  return input.type === type;
}

if (!isInputTypeSupported('month')) {
  console.log('Native month picker not supported; initializing custom fallback UI');
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 123–136: The <input type="month"> captures the billing period (2026-08). The inclusion of pattern="[0-9]{4}-(0[1-9]|1[0-2])" acts as an automatic validation safety net in browsers that degrade to type="text".
• Lines 139–152: The <input type="week"> captures the ISO sprint week (2026-W34). The pattern validates standard ISO weeks from 01 to 53.
• Lines 159–173: The JavaScript utility dynamically tests whether the rendering engine natively supports type="month" and type="week", updating the status badges to inform the developer and user.

Expected Browser Render Output

+-------------------------------------------------------------+
| SaaS Contract & Sprint Roadmap                              |
| Select billing subscription month and release week          |
|                                                             |
| [ Month: Native Picker ]  [ Week: Native Picker ]           |
|                                                             |
| Subscription Commencement Month *                           |
| [ August 2026                                          📅 ] |
|                                                             |
| Production Deployment Sprint (ISO Week) *                   |
| [ Week 34, 2026                                        📅 ] |
|                                                             |
| [        Activate Contract & Assign Sprint                ] |
+-------------------------------------------------------------+