Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA month picker with a spending budget that works out the daily allowance left for the rest of the month, or says the month has finished. Use this when a budget is set per month and people want to know what they can spend per day from today.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when a budget is set per month and people want to know what they can spend per day from today.
Do not use it for non-monthly budgets; use quarter-goal-period-selector or date-range-field.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
| budget / spent | number | - / 0 | Month budget and what has been spent. |
| value / defaultValue / onValueChange | string | null | current month | YYYY-MM. |
| currency / today / locale | - | USD | Money format, reference day, locale. |
The pattern ships with a Testing Library test (month-budget-period.test.tsx) that covers the allowance mid-month, on the last day, overspent, and a past or future month.