Michael Lenaghan

Time-only fields?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

So when no input format specified it will use default.

Share this post


Link to post
Share on other sites

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 : '');
...

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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.

post-474-0-84100300-1398181335_thumb.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. :/

  • Like 6

Share this post


Link to post
Share on other sites

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.

attachicon.gifScreen 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. :/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

attachicon.gifScreen 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. 

Share this post


Link to post
Share on other sites

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...

  • Like 2

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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
    }); 
}); 
  • Like 1

Share this post


Link to post
Share on other sites

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!

 

 

 

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.