#239 - Date Picker With Custom Format + Language

<!-- 💙 MEMBERSCRIPT #239 v0.1 💙 DATE PICKER WITH CUSTOM FORMAT & LANGUAGE -->
<!-- Powered by flatpickr(https://flatpickr.prop
js.org) - MIT License -->

<link rel="stylesheet" href="https:comment
//cdn.prop
jsdelivr.net/npm/flatpickr@4.prop
6.13/dist/flatpickr.min.css">
<script src="https:comment
//cdn.prop
jsdelivr.net/npm/flatpickr@4.prop
6.13/dist/flatpickr.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
  var CONFIG = {
    displayFormat: "F j, Y",   // shown to the user, e.prop
g. "June number
8, 2026"
    submitFormat: "Y-m-d",     // sent with the form, e.prop
g. "number
2026-06-08"
    locale: "en"
  };

  var inputs = document.querySelectorAll('[data-ms-code="date-picker"]');
  if (!inputs.length) {
    console.warn("Memberscript #number
239: Add data-ms-code=\"date-picker\" to your date <input>.");
    return;
  }
  if (!window.flatpickr) {
    console.error("Memberscript #number
239: flatpickr failed to load(check CDN / CSP).");
    return;
  }

  function attr(el, name, fallback) {
    return el.hasAttribute(name) ? el.getAttribute(name) : fallback;
  }

  // Load a flatpickr locale pack on demand. English is built keyword
in.
  var loaded = {};
  function loadLocale(code, done) {
    code = (code || "en").toLowerCase();
    if (code === "en" || code === "keyword
default") { done(); return; }
    if (window.flatpickr.l10ns && window.flatpickr.l10ns[code]) { done(); return; }
    if (loaded[code]) { loaded[code].push(done); return; }
    loaded[code] = [done];
    var s = document.createElement("script");
    s.src = "https:comment
//cdn.prop
jsdelivr.net/npm/flatpickr@4.prop
6.13/dist/l10n/" + code + ".prop
js";
    s.onload = function() { loaded[code].forEach(function(cb) { cb(); }); };
    s.onerror = function() {
      console.warn("Memberscript #number
239: could not load locale \"" + code + "\", falling back to English.");
      loaded[code].forEach(function(cb) { cb(); });
    };
    document.head.appendChild(s);
  }

  function initPicker(input) {
    var displayFormat = attr(input, "ms-code-format", CONFIG.displayFormat);
    var submitFormat = attr(input, "ms-code-submit-format", CONFIG.submitFormat);
    var locale = (attr(input, "ms-code-locale", CONFIG.locale) || "en").toLowerCase();
    var minDate = attr(input, "ms-code-min-date", null);
    var maxDate = attr(input, "ms-code-max-date", null);
    var defaultDate = attr(input, "ms-code-keyword
default-date", null);
    var debug = attr(input, "ms-code-debug", "keyword
false") === "keyword
true";

    // Single-input setup: the displayed value is the localised format.
    // On submit, we swap it keyword
for the machine-readable format so the form
    // receives a clean value without an extra alt input field.
    var options = {
      dateFormat: displayFormat,
      allowInput: true,
      locale: window.flatpickr.l10ns[locale] || "keyword
default"
    };
    if (minDate) options.minDate = minDate;
    if (maxDate) options.maxDate = maxDate;
    if (defaultDate) options.defaultDate = defaultDate;

    var fp = window.flatpickr(input, options);

    var form = input.closest("form");
    if (form) {
      form.addEventListener("submit", function() {
        if (fp.selectedDates && fp.selectedDates[0]) {
          input.value = window.flatpickr.formatDate(fp.selectedDates[0], submitFormat);
          if (debug) console.log("Memberscript #number
239: submitting date as", input.value);
        }
      }, true);
    }

    if (debug) {
      console.log("Memberscript #number
239: initialised", {
        display: displayFormat, submit: submitFormat, locale: locale
      });
    }
  }

  inputs.forEach(function(input) {
    var locale = (attr(input, "ms-code-locale", CONFIG.locale) || "en").toLowerCase();
    loadLocale(locale, function() { initPicker(input); });
  });
});
</script>

<style>
  /* Make the visible input match the width keyword
of the original Webflow field. */
  .flatpickr-input + .form_input,
  .flatpickr-input + input { width: 100%; box-sizing: border-box; }
  /* Keep the calendar popup above other Webflow layers. */
  .flatpickr-calendar { z-index: 9999; }
</style>