pythondatetimepickerpyramidpylonsdeform

Formatting the time slot of a Pylon's deform.widget.DateTimeInputWidget

Needs

I need to customize a deform.widget.DateTimeInputWidget, especially to get rid of the seconds in the input time slot so that the user doesn't need to specify them. By default seconds have to be filled but I'm only interested in hours (24h based) and minutes.

enter image description here
Default deform DateTimeInputWidget. How to get rid of those pesky seconds in the time slot?

What I found

I was really attracted by the option called time_options in the doc, but it only says:

time_options A dictionary of time options passed to pickadate.

without any example of such dictionary. This is apparently needed to feed this JavaScript code: https://github.com/amsul/pickadate.js/blob/master/lib/picker.time.js but I don't really know where and how by looking at this code.

Even more confusing is the fact that the default value ( default_time_options) which is hard coded is not a dictionary: https://github.com/Pylons/deform/blob/f4da7dffb0b9235babe4e99596eefd1a6170c640/deform/widget.py#L696 is a tuple of tuples, which is then converted into a dict: https://github.com/Pylons/deform/blob/f4da7dffb0b9235babe4e99596eefd1a6170c640/deform/widget.py#L737-L741

And from the example, this (("format", "h:i A"), ("interval", 30)) is transformed into: {'format': 'h:i A', 'interval': 30}.

The thing I don't understand here is the format itself: 'h:i A'. It's quite obscure to me as it doesn't seem to rely on any of the standard format for formatting a time string in Python (https://strftime.org/).

Question

Hence my question: how could I force the time part of the deform.widget.DateTimeInputWidget to be like: %H:%M ?

With %H = hour (24-hour clock) as a zero-padded decimal number and %M = Minute as a zero-padded decimal number, as described in: to https://strftime.org/

Or some format which would lead to the same output, e.g. 00:01, 06:15, 10:10, 18:00 or 23:59.

Solution

  • I finally ended up at the right place:

    https://amsul.ca/pickadate.js/time/#formats

    where one can see in the time picker documentation how it is build in JavaScript:

    $('.timepicker').pickatime({
  // Escape any “rule” characters with an exclamation mark (!).
  format: 'T!ime selected: h:i a',
  formatLabel: '<b>h</b>:i <!i>a</!i>',
  formatSubmit: 'HH:i',
  hiddenPrefix: 'prefix__',
  hiddenSuffix: '__suffix'
})

    In addition with the quite "unusual" (I have never ever seen i for formatting minutes before, neither a or A for the day period...) formatting rules: https://amsul.ca/pickadate.js/time/#formatting-rules

    enter image description here

    Same goes for the date picker if by any chances you are also interested in formatting dates: https://amsul.ca/pickadate.js/date/#formatting-rules

    enter image description here

    Then from Python, you can set the time_options and/or the date_options in your deform.widget.DateTimeInputWidget as follow:

    time_options = {
    'format': 'HH:i',
    'formatLabel': 'HH:i',
}

    or any other of the format options as standard key:value pairs.

    Same goes for the date_options, e.g.:

    date_options = {
    'format': 'dd-mm-yyyy',
}

    Notice: in some situations, this may not be taken into account in a private browsing window (I don't know why, I simply noticed that).