Nishvault / Dayhaven / Date field integration

Localize a jQuery date field while keeping ISO form values

A form can display familiar month and weekday labels while storing one unambiguous calendar date. Dayhaven opens a fullscreen date chooser, lets a person review a draft choice and commits a strict YYYY-MM-DD value only after confirmation.

This guide builds a fictional Winter equipment pickup exercise. Its window is December 1, 2026 through January 31, 2027, Sundays are closed, and December 24–25 are explicit closures. German calendar labels accompany an ISO value such as 2026-12-11. These fixed dates are deliberate practice rules, not a live service schedule or booking availability.

Use the complete free component

The live integration workbench and complete source and example ZIP are free ($0). There is no paid checkout, subscription or account. The kit includes jQuery 4.0.0 locally, the core and plugin, styles, two independent example fields, preset backup and a working-form HTML exporter.

Extract the ZIP without changing its folders. The documented loopback route uses Python's local HTTP server; see the installation and API guide. The actual QA route used HTTP. File-origin operation is self-contained but is not independently certified by that route. No npm install or runtime build is needed.

Dayhaven chooses one date for a named input. It does not display an event program or manage appointments. For a month-based event calendar, the Dayweave workshop calendar guide describes a different task.

Try confirmation and cancellation before changing rules

  1. In the workbench's fictional Alder Workshop form, choose Choose date. The existing pickup value starts as the dialog's draft.
  2. Use the month/year controls to reach December 2026, then select December 10. Review the summary and choose Use date. The host input now contains 2026-12-10.
  3. Open the chooser again, select December 11 and choose Cancel. The host field must remain 2026-12-10. Selecting a day alone is not a commit.
  4. Open it again, select December 11 and confirm. Preview form result now shows pickup_date with 2026-12-11. The preview reads native FormData locally; no request or booking is sent.

Escape also cancels. With the calendar focused, arrow keys move day/week focus and skip unavailable dates; Enter or Space selects a draft, then the confirmation button commits it. Month/year dropdowns help with distant dates. Check keyboard behavior in your actual integration and supported browser.

Apply a localized, constrained preset

Keep the current pickup date inside the new December–January window before applying these rules. A proposed configuration that invalidates a current field value is rejected. The workbench's Display language, Earliest date and Latest date form changes the first field when you choose Apply field rules; full closure lists and second-field options are carried in JSON.

Save the following as winter-pickup-preset.json, then choose Open preset JSON in the workbench. It replaces both field configurations after validation while preserving valid current field values:

{
  "version": "dayhaven-preset-v1",
  "primary": {
    "label": "Equipment pickup day",
    "min": "2026-12-01",
    "max": "2027-01-31",
    "disabledWeekdays": [
      0
    ],
    "disabledDates": [
      "2026-12-24",
      "2026-12-25"
    ],
    "locale": "de-DE",
    "weekStart": 1,
    "required": true
  },
  "secondary": {
    "label": "Inspection date",
    "min": "2027-01-01",
    "max": "2027-06-30",
    "disabledWeekdays": [
      0,
      6
    ],
    "disabledDates": [],
    "locale": "en-US",
    "weekStart": 1,
    "required": false
  }
}

The first calendar now uses German labels and month names, while the inspection field keeps English and its own weekday rules. Workbench help and validation messages remain English. The form value stays ISO; changing a display locale does not translate it into a slash-formatted string.

disabledWeekdays uses 0 for Sunday through 6 for Saturday; weekStart accepts 0 or 1. Min/max and explicit closures are strict ISO dates. At least one permitted day must remain. The core handles Gregorian dates from 1900 through 2100, with no date ranges, time selection or timezone conversion. Today uses the person's local calendar day and may be unavailable.

Integrate one real named form input

Save this example as winter-pickup.html at the extracted kit's root so its relative paths resolve. It uses the same primary rules and begins with a valid December 10 value. On a page that already loads jQuery, use that existing instance and omit the extra jQuery script tag; the supplied release was tested with bundled 4.0.0, not every jQuery version.

<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Fictional equipment pickup date exercise</title>
<link rel="stylesheet" href="styles/dayhaven.css">
</head><body>
<form id="pickup-form">
  <label for="pickup-day">Equipment pickup day</label>
  <input id="pickup-day" name="pickup_date"
         value="2026-12-10" placeholder="YYYY-MM-DD" required>
  <button type="submit">Inspect form value</button>
</form>
<pre id="result">No form value inspected yet.</pre>
<script src="vendor/jquery-4.0.0.min.js"></script>
<script src="lib/core.js"></script>
<script src="lib/dayhaven.js"></script>
<script>
jQuery('#pickup-day').dayhaven({
  "label": "Equipment pickup day",
  "min": "2026-12-01",
  "max": "2027-01-31",
  "disabledWeekdays": [
    0
  ],
  "disabledDates": [
    "2026-12-24",
    "2026-12-25"
  ],
  "locale": "de-DE",
  "weekStart": 1,
  "required": true
});
document.getElementById('pickup-form').addEventListener('submit', function (event) {
  event.preventDefault();
  if (!this.reportValidity()) return;
  document.getElementById('result').textContent =
    JSON.stringify(Object.fromEntries(new FormData(this)), null, 2);
});
</script>
</body></html>

After confirming December 11, Inspect form value displays {"pickup_date":"2026-12-11"}, with JSON whitespace added by the example. The name attribute supplies the FormData key. The script prevents submission for inspection; your production form handler and server remain your responsibility.

Validate dates and permissions again on the server. Client constraints do not establish capacity or authorize a reservation. Ordinary native form.submit() bypasses client validation; use requestSubmit() when you need the normal validation/submission behavior. Dayhaven does not take over form submission.

Handle programmatic changes and independent fields

jQuery('#pickup-day').dayhaven('setDate', '2026-12-11') validates, assigns the ISO value and emits native change. An invalid setDate leaves the valid field intact. A jQuery .val() assignment alone does not run validation; use setDate or dispatch the appropriate input/change event.

Listen for dayhaven:confirm when a confirmed choice matters; its second jQuery handler argument is the ISO string, including when the same date is confirmed again. Open or calendar navigation is not a confirmation. getConfig returns a defensive copy. update is a complete replacement configuration, validated before mutation; merge deliberately with getConfig if changing one option.

The required pickup cannot commit an empty selection. An optional inspection field can clear, but only confirmation commits that clearing. Each instance keeps its own rules and value; opening another Dayhaven dialog cancels the first draft. Test both directions so changing inspection does not change pickup.

Save rules and inspect the finished export

Save preset JSON stores configurations, not selected dates or form results. Open preset validates both fields before either changes. Invalid imports preserve the existing rules and values. Files are limited to 100 KB, and there is no localStorage draft; download a preset before closing the tab.

Export working form HTML creates a complete two-field form with jQuery, component, styles and preset embedded. Open the actual downloaded file, choose a valid date again, confirm it and inspect FormData. Test wide and narrow layouts and both independent fields. The exported form is functional; it is not a booking backend. It has no external runtime dependencies or measurement adapter.

Physical touch, mobile screen readers, other browser engines and your host CSS need integration-specific checks. A narrow desktop viewport does not certify a physical phone. Native dialog, Intl and Blob support are required; old Internet Explorer is outside this version's scope.

Keep use terms and data boundaries clear

The included free-use terms permit personal and commercial project use and sharing, embedding or selling finished outputs, including embedded runtime. They do not authorize redistribution or resale of the product package or a competing rebranded copy. Preserve jQuery's separate MIT rights and notice. Guaranteed support, an SLA and an update schedule are not included.

Offline runtime and outputs use no fetch, storage, analytics, external fonts or remote service. Hosted Nishvault diagnostics are separate: confirmed date actions use fixed diagnostic fields and respect Do Not Track and Global Privacy Control, without sending dates, field labels, rules, identities or FormData. Such counts are not bookings, people or sales. Presets and exported HTML contain their labels and rules, so share them intentionally. The product page links the free kit and current supported scope.