How do I add a DatePicker to a custom field

Question

I have TRAC 1.0.1 running. For my tickets I would like to have a DueDate. Entering the DueDate should be done by using a DatePicker. Because it is convenient, and you can not enter wrong values.

I added following plugin to TRAC: http://trac-hacks.org/wiki/DateFieldPlugin The description says, that it provides validation for custom fields and a DatePicker for Milestone and Ticket fields.

My trac.ini configuration file looks like this:

[ticket-custom]
duedate1 = text
duedate1.date = true
duedate1.date_empty = true
duedate1.label = Due Date
duedate1.order = 4
duedate1.value = DD-MM-YYYY

[datefield]
first_day = 1
format = dmy
separator = -

TRAC is now checking the input against the format. But what I really want is a DatePicker that pops up and lets me choose the date.

Any help is appreciated.

Answer 1

If the input is being validated but there is no datepicker it sounds like a client side JS / browser problem.

I just created a new Trac env, added the DateFieldPlugin, copied your [ticket-custom] and [datefield] ini configuration and it seemed to work out of the box just fine. For example on /newticket I can see a datepicker for the Due Date field (using Firefox at least). Given that, all I can really do is give some more details which might help us debug your problem.

The datepicker is added via JavaScript. If you are running Trac 1.0 then you don't need to worry about jQuery or jQuery UI as Trac core now ships with these dependencies. You can see that by looking at the scripts tab in Firebug etc. when you are running tracd. Are you serving your own jQuery or jQuery UI scripts which might be conflicting? Are there any errors shown on the Firebug console tab?

The plugin serves extra JS files when you request certain pages in Trac, including /newticket and /ticket. You should also be able to see these scripts being served in Firebug etc. Is that true for you?

If you inspect the HTML in the ticket.html template displayed on /newticket you should also see something like this for the Due Date input

<input type="text" class="datepick hasDatepicker" value="MM-DD-YYYY" name="field_due_date1" id="field-due_date1">

Note the two datepick and hasDatePicker classes are what tell JS to to render a jQuery Datepicker dialog. Does your custom field have these classes? The plugin should be adding them for you (inside the post_process_request())

If all that is the same for you then maybe it is a browser problem?

Answer 2

While the plugin way was ok, when there was no other way, now it is only second best, because of all the limitations of storing date/time as formatted string instead of POSIX (micro)seconds, just like for other native Trac time fields.

There is a better way: Custom date/time field support has entered Trac core since 1.1.1 ("unstable" development branch moving towards next stable 1.2).

At least if you foresee heavy use and/or long term Trac deployment, you'll appreciate adding true timestamps to your db right from the start. It provides you with the best possible experience like date picker UI, full time zone and TracQuery support, even future time constraints ('nextday', 'nextweek', etc.) are possible right now.

A last note regarding Trac code stability: For what its worth I'm using true custom time fields support via patches in production since 2009 (Trac 0.13dev), runs smoothly in applications with 30.000+ tickets by now.