@rnwonder/solid-date-picker/dist/src/components/MonthSelector/index.js

A responsive, highly-customizable datepicker component for SolidJS.

import { memo as s, createComponent as m, mergeProps as c } from "solid-js/web";
import { createSignal as h, onMount as u } from "solid-js";
import { Selector as g } from "../Selector/index.js";
import { SelectorTriggerButton as y } from "../SelectorTriggerButton/index.js";
const C = (t) => {
  const [e, i] = h([]);
  u(() => {
    const o = Array.from({ length: 12 }, (r, l) => new Date(0, l + 1, 0).toLocaleDateString(t.locale || "en", { month: t != null && t.monthSelectorFormat ? t.monthSelectorFormat : t.monthSelectorType === "compact-dropdown" ? "short" : "long" }));
    i(o);
  });
  const p = () => {
    var o, r;
    (o = t.setSelectorTwoProps) == null || o.call(t, { ...t, optionsArray: e(), option: t.month, setOption: t.setMonth, ref: t.ref, attributes: { "data-month": "true" }, className: "month-selector-option", zIndex: t.zIndex, primaryTextColor: t.primaryTextColor, primaryColor: t.primaryColor, twoMonthsDisplay: t.twoMonthsDisplay }), (r = t.setShowSelectorTwo) == null || r.call(t, !0);
  };
  return s((n = s(() => t.monthSelectorType === "compact-dropdown"), () => n() ? m(g, c(t, { get optionsArray() {
    return e();
  }, get option() {
    return t.month;
  }, get setOption() {
    return t.setMonth;
  }, ref(o) {
    var r = t.ref;
    typeof r == "function" ? r(o) : t.ref = o;
  }, get gridTemplateColumnsNo() {
    return t.monthSelectorFormat === "long" ? "3" : "6";
  }, attributes: { "data-month": "true" }, className: "month-selector-option", get zIndex() {
    return t.zIndex;
  }, get primaryColor() {
    return t.primaryColor;
  }, get primaryTextColor() {
    return t.primaryTextColor;
  }, get twoMonthsDisplay() {
    return t.twoMonthsDisplay;
  } })) : m(y, { get option() {
    return t.month;
  }, get optionsArray() {
    return e();
  }, type: "full-size", get isOpen() {
    var o;
    return ((o = t.showSelectorTwo) == null ? void 0 : o.call(t)) || !1;
  }, get twoMonthsDisplay() {
    return t.twoMonthsDisplay;
  }, onClick: p, get noButtonAnimation() {
    return t.noButtonAnimation;
  } })));
  var n;
};
export {
  C as MonthSelector
};