U4-7301 - Datepicker - choose only time or date

Created by Bjarne Fyrstenborg 25 Oct 2015, 12:42:08 Updated by Sebastiaan Janssen 04 Sep 2017, 09:33:03

Tags: Up For Grabs PR

Relates to: U4-7305

Relates to: U4-8745

I think there is missing a time picker in the core. Umbraco 7 does include a datepicker https://github.com/umbraco/Umbraco-CMS/tree/d50e49ad37fd5ca7bad2fd6e8fc994f3408ae70c/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker .. but I think actually we could add an options to disable the pickDate / pickTime in the config: https://github.com/umbraco/Umbraco-CMS/blob/d50e49ad37fd5ca7bad2fd6e8fc994f3408ae70c/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js#L5

So you might choose only to pick a time or a date... and as default you pick both time and date. So I might work like in this example: https://tarruda.github.io/bootstrap-datetimepicker/

The scenarios: pickDate: true, pickTime: true; 2015-07-20T00:27:22 pickDate: true, pickTime: false; 2015-07-20T00:00:00 pickDate: false, pickTime: true; 0000-00-00T00:27:22

There have been a discussion about a time picker here: https://twitter.com/j_breuer/status/656111856059179010 .. and I have started working bit on a clock picker based on this plugin http://weareoutman.github.io/clockpicker/ .. but I think also these suggestions could make it easy to support for the core datepicker.

1 Attachments


Bjarne Fyrstenborg 25 Oct 2015, 13:05:42

This is what you see on initial click on input or on button, when pickDate is set to false: https://github.com/umbraco/Umbraco-CMS/blob/d50e49ad37fd5ca7bad2fd6e8fc994f3408ae70c/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js#L5

In that case the input format should of course just be HH:mm:ss .. maybe even add a config if the editor should see seconds (is seconds are not use it would just be :00).

Bjarne Fyrstenborg 25 Oct 2015, 13:14:17

If pickDate: false, pickTime: true, then we could use the "icon-time" icon instead of "icon-calendar". Furthermore the input field should have a smaller width, so it match the expected format and the length of the input.

Bjarne Fyrstenborg 25 Oct 2015, 23:55:39

I have made these changes https://github.com/bjarnef/Umbraco-CMS/commit/bd5a2af2dcfb1c0fe44cec33dfecd31642a75f93 https://github.com/bjarnef/Umbraco-CMS/commit/3fd81d974d68d507ab7a25e78a66887274e1701b

but it needs some more work, before it works as described here.

Bjarne Fyrstenborg 02 Nov 2015, 08:13:11

I have extended the datepicker with use of v3 of the datepicker lib and use the format to set values of pickDate, pickTime, useSecondsm useMinutes as those properties are not available in v4 and later v5 of the lib - so it will be easier to upgrade to a newer version later. I have not upgraded to v4 (and v5 is in development) because is has some issues, e.g. when setting minDate and maxDate besides other issues. https://github.com/Eonasdan/bootstrap-datetimepicker

Besides that the developer has recently closed the "issues" page, so I can't link to that issue page or see the other reported issues for e.g. v4. https://github.com/Eonasdan/bootstrap-datetimepicker/commit/a7e459c353a9df8b447a83db9f8bb20923ae13a8

So for that reason I stick to v3 for now. I think we need to "lock" some of these properties because "Publish at" and "Unpublish at" by default use the "Date/Time" datatype instance and these properties should probably also use date and time. Maybe it can be done like the Listview, where you can't delete the default instances and maybe hide or "lock" properties on these/this instance(s).

Here are the latest changes: https://github.com/umbraco/Umbraco-CMS/compare/dev-v7...bjarnef:dev-v7-U4-7301

Shannon Deminick 14 Dec 2015, 12:56:44

Are you able to put required changes in a PR?

Bjarne Fyrstenborg 14 Dec 2015, 23:54:27

@Shandem yes, I can submit a PR one of the following days.. I just need some more testing to check it works as time picker, date picker, datetime picker.. and also that unpublish at and publish at datepickers works as in the recent versions.

Shannon Deminick 15 Dec 2015, 09:16:21

no rush, the earliest we can include it in a release is 7.4.1, but most likely 7.5

Bjarne Fyrstenborg 29 Dec 2015, 15:35:50

@Shandem it would be great if you can review this PR: https://github.com/umbraco/Umbraco-CMS/pull/984 I know there are a few issues that need to be fixed before it can be merged. Mainly some issues with specifying the minimum and maximum dates in the right format.

Sebastiaan Janssen 22 Feb 2016, 08:24:10

Shannon is on holiday. We'll get to it before 7.4.2 comes out, thanks for the PR!

Bjarne Fyrstenborg 22 Feb 2016, 08:44:08

@sebastiaan okay :) .. I think there were some minor issue when entering minimum and maximum dates for Datepicker config, where the format changed on save - so as I remember a raw datetime format "20162202T00:00:00" was formatted in a different format.

Warren Buckley 06 Apr 2016, 14:50:33

As discussed with @sebastiaan this is being set for due in release in 7.5.0

Warren Buckley 06 Apr 2016, 15:05:42

@Bjarne.Fyrstenborg See notes on GitHub please about trying to complete this PR before we can review it.

Priority: Up for grabs

Type: Feature (request)

State: Open


Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.3.0

Due in version:


Story Points: