Expiration datepicker

david@druna.cz · 2017-09-12 11:06:17

Is there a datepicker for expiration date somewhere? Feels cumbersome to type into the separated fields for year, month… by hand. Haven’t found any plugin solving this yet.

etc · 2017-09-12 11:38:17

That would be a reasonable core feature, especially with future custom fields. Will investigate on jQuery UI side and report back.

phiw13 · 2017-09-12 12:15:17

etc wrote #306964:

That would be a reasonable core feature, especially with future custom fields. Will investigate on jQuery UI side and report back.

The JQ-ui date picker widget was once tried in Core (Write panel) – quite a long time ago (pre 4.6, IIRC maybe philwareham remembers). However it had very poor keyboard accessibility (the user was locked between the date input field and the trigger button, I think) and the feature was backed-out. But maybe as a plugin? The default theme already has all the styling required.

etc · 2017-09-12 16:22:14

You can try this plugin, it seems to work ok for me:

# Name: etc_datepicker v0.2.2 
# Type: Admin plugin
# 
# Author: 
# URL: 
# Recommended load order: 5

# .....................................................................
# This is a plugin for Textpattern CMS - http://textpattern.com/
# To install: textpattern > admin > plugins
# Paste the following text into the 'Install plugin' box:
# .....................................................................

YToxMTp7czo0OiJuYW1lIjtzOjE0OiJldGNfZGF0ZXBpY2tlciI7czo2OiJhdXRob3IiO3M6
MDoiIjtzOjEwOiJhdXRob3JfdXJpIjtzOjA6IiI7czo3OiJ2ZXJzaW9uIjtzOjU6IjAuMi4y
IjtzOjExOiJkZXNjcmlwdGlvbiI7czowOiIiO3M6NDoiY29kZSI7czoxODM2OiJyZWdpc3Rl
cl9jYWxsYmFjaygnZXRjX2RhdGVwaWNrZXInLCAnYWRtaW5fc2lkZScsICdib2R5X2VuZCcp
Ow0KDQpmdW5jdGlvbiBldGNfZGF0ZXBpY2tlcigkZXZlbnQsICRzdGVwKQ0Kew0KJHNjcmlw
dCA9IDw8PEpTDQokKGRvY3VtZW50KS5yZWFkeShmdW5jdGlvbiAoKSB7DQp0ZXh0cGF0dGVy
bi5SZWxheS5yZWdpc3RlcigndHhwQXN5bmNGb3JtLnN1Y2Nlc3MnLCBldGNEYXRlcGlja2Vy
KTsNCg0KZnVuY3Rpb24gZXRjRGF0ZXBpY2tlcigpIHsNCiAgICAkKCcuaW5wdXQteWVhciwg
LmlucHV0LW1vbnRoLCAuaW5wdXQtZGF5JykuY2hhbmdlKGZ1bmN0aW9uICgpIHsNCiAgICAg
ICAgICAgIGlmICghJCh0aGlzKS52YWwoKSkgcmV0dXJuOw0KICAgICAgICAgICAgdmFyIGRp
diA9ICQodGhpcykucGFyZW50KCk7DQogICAgICAgICAgICB2YXIgZGF0ZSA9IG5ldyBEYXRl
KGRpdi5jaGlsZHJlbignLmlucHV0LXllYXInKS5maXJzdCgpLnZhbCgpLCBkaXYuY2hpbGRy
ZW4oJy5pbnB1dC1tb250aCcpLmZpcnN0KCkudmFsKCkgLSAxLCBkaXYuY2hpbGRyZW4oJy5p
bnB1dC1kYXknKS5maXJzdCgpLnZhbCgpKTsNCiAgICAgICAgICAgIGRpdi5jaGlsZHJlbign
LmlucHV0LXllYXInKS5kYXRlcGlja2VyKCdvcHRpb24nLCAnZGVmYXVsdERhdGUnLCBkYXRl
KS5kYXRlcGlja2VyKCdzZXREYXRlJywgZGF0ZSk7DQogICAgfSk7DQoNCiAgICAkKCcuaW5w
dXQteWVhcicpLmRhdGVwaWNrZXIoDQogICAgew0KICAgICAgICBjaGFuZ2VNb250aDogdHJ1
ZSwNCiAgICAgICAgY2hhbmdlWWVhcjogdHJ1ZSwNCiAgICAgICAgc2hvd090aGVyTW9udGhz
OiB0cnVlLA0KICAgICAgICBzaG93TW9udGhBZnRlclllYXI6IHRydWUsDQogICAgICAgIGRh
dGVGb3JtYXQ6ICd5eScsDQogICAgICAgIG9uU2VsZWN0OiBmdW5jdGlvbihkYXRlLCBpbnN0
KSB7DQogICAgICAgICAgICB2YXIgZGl2ID0gJCh0aGlzKS5mb2N1cygpLnBhcmVudCgpOw0K
ICAgICAgICAgICAgZGl2LmNoaWxkcmVuKCcuaW5wdXQtZGF5JykudmFsKCgnMCcraW5zdC5z
ZWxlY3RlZERheSkuc2xpY2UoLTIpKTsNCiAgICAgICAgICAgIGRpdi5jaGlsZHJlbignLmlu
cHV0LW1vbnRoJykudmFsKCgnMCcrKGluc3Quc2VsZWN0ZWRNb250aCArIDEpKS5zbGljZSgt
MikpOw0KICAgICAgICAgICAgZGl2LmNoaWxkcmVuKCcuaW5wdXQteWVhcicpLnZhbChpbnN0
LnNlbGVjdGVkWWVhcikuY2hhbmdlKCk7DQogICAgICAgIH0sDQogICAgICAgIG9uQ2xvc2U6
IGZ1bmN0aW9uKGRhdGUsIGluc3QpIHsNCiAgICAgICAgICAgIGlmICghJCh0aGlzKS52YWwo
KSkgJCh0aGlzKS52YWwodGhpcy5vbGRWYWwpOw0KICAgICAgICB9LA0KICAgICAgICBiZWZv
cmVTaG93OiBmdW5jdGlvbihpbnB1dCwgaW5zdCkgew0KICAgICAgICAgICAgdGhpcy5vbGRW
YWwgPSAkKHRoaXMpLnZhbCgpOw0KICAgICAgICB9DQogICAgfSkua2V5dXAoZnVuY3Rpb24o
ZSkgew0KICAgICAgICAgICAgdmFyIGtleSA9IFN0cmluZy5mcm9tQ2hhckNvZGUoZS53aGlj
aCk7DQogICAgICAgICAgICBpZiAoZS53aGljaCA9PSA0NikgdGhpcy5vbGRWYWwgPSBrZXkg
PSAnJzsNCiAgICAgICAgICAgIGlmICgoa2V5ID09ICcnIHx8ICQuaXNOdW1lcmljKGtleSkp
ICYmICQodGhpcykuZGF0ZXBpY2tlcignd2lkZ2V0JykuaXMoJzp2aXNpYmxlJykpIHsNCiAg
ICAgICAgICAgICAgICAkKHRoaXMpLmRhdGVwaWNrZXIoJ2hpZGUnKS52YWwoa2V5KTsNCiAg
ICAgICAgICAgIH0NCiAgICAgICAgfQ0KICAgICkuY2hhbmdlKCk7DQp9DQoNCmV0Y0RhdGVw
aWNrZXIoKTsNCn0pOw0KSlM7DQplY2hvIHNjcmlwdF9qcygkc2NyaXB0KTsNCn0iO3M6NDoi
dHlwZSI7czoxOiIzIjtzOjU6Im9yZGVyIjtzOjE6IjUiO3M6NToiZmxhZ3MiO3M6MToiMCI7
czo0OiJoZWxwIjtzOjA6IiI7czozOiJtZDUiO3M6MzI6IjJkZjZiYjMxN2QxM2Y2ZTkzYzMy
ZTVlYmQ0ZGU5MDFiIjt9

Last edited by etc (2017-09-15 08:34:07)

phiw13 · 2017-09-13 08:33:57

etc wrote #306972:

You can try this plugin, it seems to work ok for me:

Seems to work fine in Safari and Firefox. Can’t select a date from the keyboard, but you knew that already.

philwareham · 2017-09-13 10:01:47

phiw13 wrote #306966:

The JQ-ui date picker widget was once tried in Core (Write panel) – quite a long time ago (pre 4.6, IIRC maybe philwareham remembers).

Yes Philippe is correct, I toyed with date-pickers for a while but the retooling necessary was beyond my scope and the accessibility was not great at the time. I do still have the way I’d want the UI to appear in my mockups (as a non-intrusive icon to the side of the date entry fields). And I keep the jQuery UI datepicker widget styling up to date just in case (although the jQuery UI team is doing a total rewrite of that widget at the moment to improve touch and accessibility support).

Maybe one day date and time HTML5 input fields will have universal browser support and we can just use that. Safari seems to be dragging it’s heels on that, Firefox support is nearly here, and IE won’t ever have it (though Edge does).

In the meantime I’d like to see the current (3) fields that form the date inputs to at least change format depending on language used – at the moment it’s hardcoded to the US format of YYYY MM DD when most of the world uses DD MM YYYY.

colak · 2017-09-13 11:09:58

The full proof way would be to have 3 pull-down menus, as 90s as the method might be:)

GugUser · 2017-09-13 12:24:28

philwareham wrote #306976:

(…) at the moment it’s hardcoded to the US format of YYYY MM DD when most of the world uses DD MM YYYY.

I always thought YYYY MM DD is ISO 8601, and for archiving it makes sense.

philwareham · 2017-09-13 12:34:33

GugUser wrote #306978:

I always thought YYYY MM DD is ISO 8601, and for archiving it makes sense.

Yes but people don’t generally write in ISO 8601, they write in their natural language.

etc · 2017-09-13 13:16:55

phiw13 wrote #306974:

Seems to work fine in Safari and Firefox. Can’t select a date from the keyboard, but you knew that already.

Plugin updated to enable the keyboard input, but still not perfect.

Bloke · 2017-09-13 13:36:18

On a technical note, if we know the language (and hence locale?) in use on the admin side for the current user, can we reliably obtain the “preferred date format” for that locality? If so (e.g. ask PHP and find that dd/mm/yyyy is the preferred order for en-gb) there shouldn’t be any issue swapping the order of the individual date/month/year fields to match. And, if it can’t be obtained, for whatever reason, default to YYYY-MM-DD order like we do today.

That’s fine for multi-input boxes, but single input boxes represent a real headache. I’ve done it before on a separate project and it hurts. The date picker usually needs to be told what format is acceptable, so any existing dates need to be in that format before the picker is invoked. Plus, the input field needs to be told what format to accept. They MUST match. Manually altering the dates can wreak havoc, and I found some annoying corner cases where dates would show as ‘invalid’ or throw yucky PHP errors on submission because they didn’t quite match the format (e.g. omitting the leading 0 on days/months). It’s a minefield and I rather like my legs.

If date pickers can be invoked such that:

they can correctly direct each part of the chosen date into separate boxes based on their name/ID; and
they can read the “currently set” date from separate input boxes via their name/ID and display it in the widget

then that would be my preferred solution. Best of both worlds: unambiguous date display, unambiguous intepretation of incoming date portions, user-friendliness of a single date picker.

Now, as for time pickers…. urgh!

etc · 2017-09-13 16:11:52

Bloke wrote #306981:

If date pickers can be invoked such that:

they can correctly direct each part of the chosen date into separate boxes based on their name/ID; and

they can read the “currently set” date from separate input boxes via their name/ID and display it in the widget

then that would be my preferred solution. Best of both worlds: unambiguous date display, unambiguous intepretation of incoming date portions, user-friendliness of a single date picker.

Yes they can, kinda.

Textpattern CMS

Textpattern CMS support forum

#1 2017-09-12 11:06:17