Jump to main content Jump to doc navigation

What is input.datepicker?

Add a datepicker to a form quickly and easily using this snippet.


Example for input.datepicker:

[[input.datepicker? &value=`5/3/2012`]]


Name Description Default Required Version
input_id The id to assign to the input box. >0.0.1
name The name to assign to the input box. >0.0.1
value The value to assign to the input box. >0.0.1
menu Enter "1" to add year and month drop down to the date picker. >0.0.1
date_format Add year and month drop down to the date picker. >0.0.1
min_date Set the minimum date to use. >0.0.1
max_date Set the maximum date that can be used. >0.0.1
animation The method the calendar is displayed. show >0.0.1


The date can be formatted in several ways, below are a few examples:

  • mm/dd/yy
  • yy-mm-dd
  • d M, y
  • d MM, y
  • DD, d MM, yy


There are several different animations available:

  • show (default)
  • slideDown
  • fadeIn
  • blind
  • bounce
  • clip
  • drop
  • fold
  • slide

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.


  • modmore
  • Jens Wittmann – Gestaltung & Entwicklung
  • Fabian Christen
  • Digital Penguin
  • Dannevang Digital
  • Sepia River Studios
  • Chris Fickling
  • CrewMark
  • deJaya
  • Following Sea
  • Anton Tarasov
  • eydolan
  • Raffy
  • Lefthandmedia
  • Murray Wood
  • Snow Creative
  • Nick Clark
  • Helen
  • JT Skaggs
  • krisznet
  • YJ
  • Yanni
  • Richard


$370 per month—let's make that $500!

Learn more