Live-Demo
Datepicker Playground
AngularJS directive demo for multiple Moment.js formats. Each field updates a numeric timestamp model shown below it.
Year + Month
ts-format="YYYY-MM" + ts-model-format="months" → model = 12*y+m
Year + Month (name)
ts-format="YYYY MMMM" + ts-model-format="months" → model = 12*y+m
German Date
ts-format="DD.MM.YYYY"
US Date
ts-format="MM/DD/YYYY"
24h Time
ts-format="HH:mm" + ts-model-format="time" → model = 3600*h+60*m+s
German Datetime
ts-format="DD.MM.YYYY HH:mm"
Year Only
ts-format="YYYY" → unix of Jan 1 00:00:00
German Datetime seconds
ts-format="DD.MM.YYYY HH:mm:ss"
Comma in input (parsing tolerance)
ts-format="DD.MM.YYYY HH:mm", value="09.09.25, 23:07"
US Datetime (am/pm)
ts-format="MM/DD/YYYY h:mm a"
Calendar Week
ts-format="YYYY / W" → clamp to Monday 00:00:00
German Datetime (Angular-style)
ts-format="dd.MM.yyyy HH:mm"
US Datetime (Angular-style)
ts-format="MM/dd/yyyy h:mm a"
12h Time (am/pm)
ts-format="hh:mm a" + ts-model-format="time"
German Date (day-end)
ts-format="DD.MM.YYYY" + ts-model-format="day-end" + ts-end="true" → model at 23:59:59
Unix Milliseconds
ts-format="DD.MM.YYYY HH:mm:ss" + ts-model-format="unixms"
German Date (min/max constrained)
ts-format="DD.MM.YYYY" + data-min/data-max (2024-01-01 to 2025-12-31)
Non-Angular (string only)
Direct applyDatepicker