Time-only fields?

[Michael Lenaghan]

Is it possible to create a time-only field? In other words, is it possible to use a datetime field in such a way that it doesn't allow date entry?

Here's the use case. I'm trying to create a template for "events". Events have a start date and end date, and an optional start time and end time. The start and end times are only enabled and required if a separate "All Day" checkbox isn't set.

Here's the problem. I've set a Time Input Format, but I can't set the Date Input Format to None. None is a value in the drop-down, but when I select it and Save it just reverts to a default format.

[kongondo]

Welcome to PW Michael!

Hmm, you are right. Looks like you've found a bug? For output it works fine - time can be set to none...but not for input

[Michael Lenaghan]

Filling in some additional details...

I'm using the latest version of ProcessWire (2.4.0).

The Date Output Format is "None", the Time Output Format is "5:10 PM".

The Date Picker is "No date/time picker".

The Date Input Format is "2012-04-08" (that's the problem), the Time Input Format is "5:10 PM".

*** If I enter a time like "9:00 AM" then after Save it becomes "2014-04-22 9:00 AM". ***

If I set Date Input Format Code to an empty string and Save, the Date Input Format reverts to "2012-04-08".

If I set Date Input Format Code to some value like "''" then that value shows up in the input string.

[Soma]

No date for a Datetime field would be...?

So when no input format specified it will use default.

[Michael Lenaghan]

OK, I think I've found the problem. Take a look at InputfieldDatetime.module.

/**
* Date/time Inputfield configuration, per field
*
*/
public function ___getConfigInputfields() {

...
$f->attr('value', $this->dateInputFormat ? $this->dateInputFormat : self::defaultDateInputFormat);
...
$f->attr('value', $this->timeInputFormat ? $this->timeInputFormat : '');
...

[Soma]

There's no problem.

[Michael Lenaghan]

Soma, I understand that a datetime field will always have both a date and time. It doesn't mean that we care about the date or time portion though. So just as we can input and format a datetime to accept and show only the date we should be able to input and format a datetime to accept and show only the time. Clearly that's the intent; otherwise why would None be listed among the options?

It would probably simplify things if Date and Time were separate field types. Then dates would *always* have a date format, and times would *always* have a time format, and datetimes would *always* have a datetime format. That would simplify other things too; for example, the datetime picker doesn't support time-only picking, so it wouldn't be a time field option.

[Michael Lenaghan]

If anyone else is looking for a quick fix pending a final fix, this is also an issue:

/**
* Initialize the date/time inputfield
*
*/
public function init() {
    ...
    $this->set('dateInputFormat', self::defaultDateInputFormat);
    $this->set('timeInputFormat', '');
    ...

If both instances of self::defaultDateInputFormat are replaced with '', or if the value of the const self::defaultDateInputFormat is replaced with '', time-only fields work as expected (and date-only and datetime fields are unaffected).

[renobird]

I can definitely see the need for just being able to show the time picker.
I have a custom inputfield for entering lists of hours that does this.

The JS in the module customizes the picker to only show date — even though it's using the core datetimepicker.js

$(document).on("focus", ".InputfieldHours .datepicker", function() {
    $(this).timepicker({
        timeFormat: 'h:mm tt',
        ampm: true
    }); 
}); 

bah! Just noticed some alignment issues on my time picker in safari. :/

[POWERFULHORSE]

Hey renobird, is this module something that you plan to release in the future? I'm working on something at present that needs start/end times that are independent of date.

I can definitely see the need for just being able to show the time picker.
I have a custom inputfield for entering lists of hours that does this.

Screen Shot 2014-04-22 at 11.39.59 AM.png

The JS in the module customizes the picker to only show date — even though it's using the core datetimepicker.js

$(document).on("focus", ".InputfieldHours .datepicker", function() {
    $(this).timepicker({
        timeFormat: 'h:mm tt',
        ampm: true
    }); 
}); 

bah! Just noticed some alignment issues on my time picker in safari. :/

[mr-fan]

another option is to use the sliderrange field to provide an inputfield for time/period....

[renobird]

Take a look at Netcarver's module.

You can also use the JS I posted above, but change the jQuery selector to use the class of your field name instead of .InputfieldHours

[Tom.]

I can definitely see the need for just being able to show the time picker.

I have a custom inputfield for entering lists of hours that does this.

Screen Shot 2014-04-22 at 11.39.59 AM.png

The JS in the module customizes the picker to only show date — even though it's using the core datetimepicker.js

$(document).on("focus", ".InputfieldHours .datepicker", function() {
    $(this).timepicker({
        timeFormat: 'h:mm tt',
        ampm: true
    }); 
}); 

bah! Just noticed some alignment issues on my time picker in safari. :/

A year on, I've just ran into this problem. Is there any update on this? None is present on the date field, however it defaults back to one of the settings. Is this a bug? - I understand there is another option just for time fields using a plugin, however I feel this adds bloat if the functionality is already there. 

[Pete Jones]

I'd also be interested in a time only field. 

[Macrura]

I'd also be interested in a time only field. 

I think currently this module is one option:

https://processwire.com/talk/topic/7857-module-fieldtypetime-inputfieldtime/

or you just use a plain text field but init the field for the timepicker as described above by renobird;  you can init the field using ACF and also specify to load the assets in the ACF settings...

[Pete Jones]

I grabbed that one and it works perfectly for what I need. Thanks.

[Zahari M.]

Hi Renobird

I love the screenshot that you provided and would very much like to create a field exactly like the one you did for starting and ending times. Perfect! The only problem is it is a bit beyond me how you actually did it! I would be most greatful if you could share a bit more info on how you did all this.

Did you copy the InputfieldDatetime module over to site/modules and then rename it? If so, what items in the module do we need to rename? Also that javascript... where exactly does it go? Any assistance to replicate the functionality of your module would be much appreciated!

Thanks Tom

Cheers!

[renobird]

Hi Zahari,

The JS I posted above is in a custom field type , so it's included in the admin if that field is present in the template.
You don't need to have a custom field type to do use this though.

I would do this.

1. Create a new date field that you want to only show the time picker. Let's say you call it "timepicker".
2. Use Martijn's Admin Custom Files to add that JS to the admin.

Make sure your JS targets the correct class for your field name — probably something like:

$(document).on("focus", ".Inputfield_timepicker .datepicker", function() {
    $(this).timepicker({
        timeFormat: 'h:mm tt',
        ampm: true
    }); 
}); 

[Zahari M.]

Hi Tom!

Thanks for the reply. Very much appreciated!

I have tried to implement what you have said but I am unsure if it is working as it should.

I am using the default admin theme. That being the case, in Admin Custom Files I have a file named AdminThemeDefault.js. I have added your code into this file but only changed the selector class to .InputfieldDatetimeDatepicker just to get going first. The only "option" I have activated or configured in Admin Custom Files is checking the "Include theme based files". Is there anything else I am supposed to set or do in Admin Custom Files?

I created a datetime field named timepicker and in the Input tab set Date Picker to Date/time picker on field focus.

So when i go to a page with my timepicker field and click on it I do indeed get just the time picker.

I can slide the sliders and input the time into the field.

But once I save the page, the field populates with the date and time. I was hoping I would only see time and no date!

Is this how it's supposed to be or am I doing something wrong?

Cheers!

 

 

 

 

 

[a-ok]

This still isn't possible, right? Within the standard Datetime field? We need to use a separate module?

[FireWire]

I've run into this need a few times and decided to take a crack at it. I am doing a custom calendar and really needed to get this time field and I'm on a deadline. I have a solution- albeit a little quick and dirty, but it works well for my project. I've only played with this in the new AdminThemeUikit admin interface though and do not know if it works in previous versions of PW. This is similar to the solution above but with no dependency on the Admin Custom Files module.

I created a file called pw_admin_timefield.js and put it in site/templates/admin/ to keep it organized from the site's code. Inside that file I added this:

$(function() {
  if ($.fn.timepicker) {
    $("input[name*='_time'").timepicker({
                                controlType: 'select',
                                oneLine: true,
                                timeFormat: 'h:mm TT',
                                stepMinute: 5
                              });
  }
});

Checking for the existence of that function is a requirement as it is not loaded on all admin pages and will prevent the page from rendering properly. Since this isn't integrated as a true module these settings dictate how the time select will render every time. The timepicker plugin included with PW is here at this link and has all documentation for configuration: http://trentrichardson.com/examples/timepicker/

In the site/templates/admin.php file I added these two lines:

$modules->get('JqueryCore');
$config->scripts->add($config->urls->templates . 'admin/time_field/pw_admin_timefield.js');

If the JqueryCore module is not called you will get the $ not defined JS error.

Whenever I need a time select field with no date I create a text field with a suffix of "_time" on the end of the field name which matches the jQuery selector above. So my calendar has event_start_time and event_end_time and they both get time-only pickers.

This would be much better as a module with the level of configuration that the Datetime field has. I might work on doing that next, but in the meantime this immediately solved the problem I had quickly.

Thanks to @Soma for this article on custom JS in the admin: http://soma.urlich.ch/posts/custom-js-in-processwire-admin/

[adrian]

@usualCommission - thanks for sharing, but I am curious did you see @netcarver's module:

 

Was there something that didn't suit your needs?

[FireWire]

I did see that and I tried it out in the past, I just couldn't get past the 24hr format entry and the clock entry method, I know that will be an issue with the client as well. This was a fast and easy way to get a picker that matches the datetime entry field. I really wish there was a native way to do that- it makes for a cleaner look for the user. Also looks really good in the new uikit theme.

[bernhard]

Hi @renobird (and others)

I'm trying to develop a daterange fieldtype using the core timepicker as shown in your example, but it looks like this:

The only docs I found where this one: https://trentrichardson.com/examples/timepicker/ not sure, if that are the correct docs for the timepicker PW uses?

Any ideas how I can get rid of the "choose time" button and the "time" line above hour and minut (it's unnecessary because it is also shown in the input)

Thx!

PS: I thought of hiding it via CSS, but it seems that the whole timepicker markup is loaded directly under <body> so I cant target only the timepickers that are loaded from my Inputfield, or can I?

[bernhard]

Got it working by adding a custom class via the beforeShow function:

// show time pickers
$(document).on("focus", ".RockDaterange .time", function() {
  $(this).timepicker({
    timeFormat: 'HH:mm',
    dynamic: true,
    timeOnly: true,
    showTime: false,
    beforeShow: function(el, obj) {
      $(obj.dpDiv).addClass('RockDaterange');
    },
  });
});

.ui-datepicker.RockDaterange .ui-timepicker-div { border-top: 0; margin-top: 0; }
.ui-datepicker.RockDaterange .ui-widget-header { display: none; }
.ui-datepicker.RockDaterange dl { margin: 0; }

? 

PS: Here are the datepicker docs: https://api.jqueryui.com/datepicker/#option-beforeShow