Jump to content

Time-only fields?


Michael Lenaghan
 Share

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.

Link to comment
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.

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

Link to comment
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).

Link to comment
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
Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

  • 8 months later...

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. 

Link to comment
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
Link to comment
Share on other sites

  • 6 months later...

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!

Link to comment
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
Link to comment
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!

 

 

 

 

 

Link to comment
Share on other sites

  • 10 months later...
  • 6 months later...

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/

timepicker.png

  • Like 2
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

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:

02HkAjT.png

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?

Link to comment
Share on other sites

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; }

uo1QruC.png

? 

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

  • Like 1
Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...