Quick little project for today. We often use popovers for calendar controls, but rarely for numeric fields. On occasion, it might be helpful to summon a calculator, so here’s a popover that can do math.

• If you press the calendar button, the calculator appears in a portaled popover.
• The expression entered is displayed until you press =.
• After that, the value is passed back to the input and the popover is dismissed.
• If the field has a value already, that value is passed into the calculator as the first value in the expression.
• Buttons are bound to keys, so you can type instead of clicking.

H/T to Shapr3D, which uses a similar pattern. Their version is much more robust, but the concept is the same. Live demo here.