Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Expiration datepicker
philwareham wrote #306983:
Small notes: Your example only works if the year field is activated, not the month or day fields. Also seems to not be showing the selected day styling on the date picker either – not sure if it’s my code or something in the above plugin (the selected day should be highlighted in blue on the picker).
When the field is already filled (publish date), and the date is not “today” (e.g. editing an older article), the date of the article is highlighted with a very faint white / lighter grey (Hive). The class applied is a.ui-state-hover, the parent <td /> has a class of .ui-datepicker-days-cell-over.
The thing here, if I move the mouse over the calendar, that highlight immediately disappears. The class a.ui-state-hover is removed from the selected date. The class on the <td /> is kept in place.
It took me a few tries to see it (and more to “see” it in the inspector). With Hive that highlight is very hard to see, with my own Sandspace, it is a bit better – a light grey on smoke-white, although I prolly should improve that highlight a bit.
When the field is blank (Expire date), OR, the publish date for a new article, the date (“today”) is highlighted with the class a.ui-state-active, with Hive: a light blue.
(I would expect both cases to have a class a.ui-state-active, or eventually .ui-selected, but that is a bug / limitation of the JQ-UI code)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Expiration datepicker
The date picker in Hive should have blue for a selected date, try it here and select any date and you’ll see what should happen. Not sure why that would differ in Oleg’s implementation since it’s the same jQuery UI code and my styling is based on the vanilla widget behaviour.
Offline
Re: Expiration datepicker
philwareham wrote #306988:
The date picker in Hive should have blue for a selected date, try it here and select any date and you’ll see what should happen. Not sure why that would differ in Oleg’s implementation since it’s the same jQuery UI code and my styling is based on the vanilla widget behaviour.
3 screenshots for you
(the file names speak for themselves, I hope)
TXP 4.7-dev up-to-date running on localhost.
edit – What you need:
.ui-datepicker-days-cell-over .ui-state-default,
.ui-datepicker td a.ui-state-active { }Last edited by phiw13 (2017-09-14 09:29:55)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Expiration datepicker
phiw13 wrote #306989:
.ui-datepicker-days-cell-over .ui-state-default,...
Actually no, sorry. There is something amiss with the widget implementation that has been used in this plugin. The td cells in question should have classes as follows (from jQuery UI’s own code)…
.ui-datepicker-today
.ui-datepicker-current-day…which don’t appear in Oleg’s date picker at all but do appear (correctly) in my demo date picker. Not sure why that would be. I’m not going to hack in some extraneous CSS selectors when my original code is fine.
Offline
Re: Expiration datepicker
philwareham wrote #306990:
.ui-datepicker-today...…which don’t appear in Oleg’s date picker at all but do appear (correctly) in my demo date picker. Not sure why that would be. I’m not going to hack in some extraneous CSS selectors when my original code is fine.
The plugin sets the correct class (.ui-datepicker-today) for “today”, but fails to set the class (.ui-datepicker-current-day) for the currently selected date (in a pre-filled field with a date that is not “today”, e.g the Publish date for an older article). It correctly scrolls to that date, though, but then sets a wrong class(.ui-datepicker-days-cell-over).
(all those classes are applied to <td />s.)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Offline
Re: Expiration datepicker
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Expiration datepicker
Works for me too, thanks Oleg! Can I be annoying and ask if you could try a version with the date picker invoked by using an icon link to the side of the field instead of by clicking in the field, like in this mockup? – is that physically possible?
Offline
Re: Expiration datepicker
philwareham wrote #307014:
Works for me too, thanks Oleg! Can I be annoying and ask if you could try a version with the date picker invoked by using an icon link to the side of the field, like in this mockup? – is that physically possible?
I’ve tried few days ago, that was a bit hackish, but I will try again. Actually, this should be easier because we don’t have to struggle with the keyboard input. Leave me few hours…
Offline
Re: Expiration datepicker
That’s the best I can do atm. The widget is closed on select or link outside click.
# Name: etc_datepicker v0.3.1
# 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
MDoiIjtzOjEwOiJhdXRob3JfdXJpIjtzOjA6IiI7czo3OiJ2ZXJzaW9uIjtzOjU6IjAuMy4x
IjtzOjExOiJkZXNjcmlwdGlvbiI7czowOiIiO3M6NDoiY29kZSI7czozMjQ3OiJyZWdpc3Rl
cl9jYWxsYmFjaygnZXRjX2RhdGVwaWNrZXInLCAnYWRtaW5fc2lkZScsICdib2R5X2VuZCcp
Ow0KDQpmdW5jdGlvbiBldGNfZGF0ZXBpY2tlcigkZXZlbnQsICRzdGVwKQ0Kew0KJHNjcmlw
dCA9IDw8PEpTDQokKGRvY3VtZW50KS5yZWFkeShmdW5jdGlvbiAoKSB7DQp0ZXh0cGF0dGVy
bi5SZWxheS5yZWdpc3RlcigndHhwQXN5bmNGb3JtLnN1Y2Nlc3MnLCBldGNEYXRlcGlja2Vy
KTsNCg0KZnVuY3Rpb24gZXRjRGF0ZXBpY2tlcigpIHsNCiAgICBpZiAoISQoJy50eHAtZGF0
ZXBpY2tlci1idXR0b24nKS5sZW5ndGgpDQogICAgICAgICQoJy5pbnB1dC1kYXknKS5hZnRl
cignJm5ic3A7PGEgY2xhc3M9InR4cC1kYXRlcGlja2VyLWJ1dHRvbiIgaHJlZj0iIyIgdGl0
bGU9IkRhdGVwaWNrZXIiIGFyaWEtbGFiZWw9IkRhdGVwaWNrZXIiPjxzcGFuIGNsYXNzPSJ1
aS1pY29uIHVpLWljb24tY2FsZW5kYXIiPkRhdGVwaWNrZXI8L3NwYW4+PC9hPicpOw0KDQog
ICAgJCgnLnR4cC1kYXRlcGlja2VyLWJ1dHRvbicpLmNsaWNrKGZ1bmN0aW9uKGUpIHsNCiAg
ICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpOw0KICAgICAgICAkKHRoaXMpLnBhcmVudCgpLmNo
aWxkcmVuKCcubXlwaWNrZXInKS50b2dnbGUoKTsNCiAgICAgICAgZS5zdG9wUHJvcGFnYXRp
b24oKTsNCiAgICB9KS5hZnRlcignPGRpdiBzdHlsZT0iZGlzcGxheTpub25lO3Bvc2l0aW9u
OmFic29sdXRlO3otaW5kZXg6MTAwIiBjbGFzcz0ibXlwaWNrZXIiIC8+Jyk7DQoNCiAgICAk
KCcubXlwaWNrZXInKS5kYXRlcGlja2VyKA0KICAgICAgICB7DQogICAgICAgICAgICBjaGFu
Z2VNb250aDogdHJ1ZSwNCiAgICAgICAgICAgIGNoYW5nZVllYXI6IHRydWUsDQogICAgICAg
ICAgICBzaG93T3RoZXJNb250aHM6IHRydWUsDQogICAgICAgICAgICBzaG93TW9udGhBZnRl
clllYXI6IHRydWUsDQogICAgICAgICAgICBvblNlbGVjdDogZnVuY3Rpb24oZGF0ZSwgaW5z
dCkgew0KICAgICAgICAgICAgICAgIHZhciBkaXYgPSAkKHRoaXMpLmhpZGUoKS5wYXJlbnQo
KTsNCiAgICAgICAgICAgICAgICB2YXIgZGF0ZSA9ICQodGhpcykuZGF0ZXBpY2tlcignZ2V0
RGF0ZScpOw0KICAgICAgICAgICAgICAgICQodGhpcykuZGF0ZXBpY2tlcignb3B0aW9uJywg
J2RlZmF1bHREYXRlJywgZGF0ZSkuZGF0ZXBpY2tlcignc2V0RGF0ZScsIGRhdGUpOw0KICAg
ICAgICAgICAgICAgIGRpdi5jaGlsZHJlbignLmlucHV0LWRheScpLnZhbCgoJzAnK2luc3Qu
c2VsZWN0ZWREYXkpLnNsaWNlKC0yKSk7DQogICAgICAgICAgICAgICAgZGl2LmNoaWxkcmVu
KCcuaW5wdXQtbW9udGgnKS52YWwoKCcwJysoaW5zdC5zZWxlY3RlZE1vbnRoICsgMSkpLnNs
aWNlKC0yKSk7DQogICAgICAgICAgICAgICAgZGl2LmNoaWxkcmVuKCcuaW5wdXQteWVhcicp
LnZhbChpbnN0LnNlbGVjdGVkWWVhcik7DQogICAgICAgICAgICB9DQogICAgICAgIH0NCiAg
ICApLmNsaWNrKGZ1bmN0aW9uKGUpIHsNCiAgICAgICAgZS5zdG9wUHJvcGFnYXRpb24oKTsN
CiAgICB9KTsNCg0KICAgICQoJ2JvZHknKS5iaW5kKCdjbGljayB0b3VjaHN0YXJ0JywgZnVu
Y3Rpb24oZSkgew0KICAgICAgICAkKCcubXlwaWNrZXInKS5oaWRlKCk7DQogICAgfSk7DQoN
CiAgICAkKCcuaW5wdXQteWVhciwgLmlucHV0LW1vbnRoLCAuaW5wdXQtZGF5JykuY2hhbmdl
KGZ1bmN0aW9uICgpIHsNCiAgICAgICAgICAgIGlmICghJCh0aGlzKS52YWwoKSkgcmV0dXJu
Ow0KICAgICAgICAgICAgdmFyIGRpdiA9ICQodGhpcykucGFyZW50KCk7DQogICAgICAgICAg
ICB2YXIgZGF0ZSA9IG5ldyBEYXRlKGRpdi5jaGlsZHJlbignLmlucHV0LXllYXInKS5maXJz
dCgpLnZhbCgpLCBkaXYuY2hpbGRyZW4oJy5pbnB1dC1tb250aCcpLmZpcnN0KCkudmFsKCkg
LSAxLCBkaXYuY2hpbGRyZW4oJy5pbnB1dC1kYXknKS5maXJzdCgpLnZhbCgpKTsNCiAgICAg
ICAgICAgIGRpdi5jaGlsZHJlbignLm15cGlja2VyJykuZGF0ZXBpY2tlcignb3B0aW9uJywg
J2RlZmF1bHREYXRlJywgZGF0ZSkuZGF0ZXBpY2tlcignc2V0RGF0ZScsIGRhdGUpOw0KICAg
IH0pOw0KDQogICAgJCgnLmlucHV0LXllYXInKS5jaGFuZ2UoKTsNCn0NCg0KLyoNCiAgICAk
KCcuaW5wdXQteWVhcicpLmRhdGVwaWNrZXIoDQogICAgew0KICAgICAgICBjaGFuZ2VNb250
aDogdHJ1ZSwNCiAgICAgICAgY2hhbmdlWWVhcjogdHJ1ZSwNCiAgICAgICAgc2hvd090aGVy
TW9udGhzOiB0cnVlLA0KICAgICAgICBzaG93TW9udGhBZnRlclllYXI6IHRydWUsDQogICAg
ICAgIGRhdGVGb3JtYXQ6ICd5eScsDQogICAgICAgIG9uU2VsZWN0OiBmdW5jdGlvbihkYXRl
LCBpbnN0KSB7DQogICAgICAgICAgICB2YXIgZGl2ID0gJCh0aGlzKS5mb2N1cygpLnBhcmVu
dCgpOw0KICAgICAgICAgICAgZGl2LmNoaWxkcmVuKCcuaW5wdXQtZGF5JykudmFsKCgnMCcr
aW5zdC5zZWxlY3RlZERheSkuc2xpY2UoLTIpKTsNCiAgICAgICAgICAgIGRpdi5jaGlsZHJl
bignLmlucHV0LW1vbnRoJykudmFsKCgnMCcrKGluc3Quc2VsZWN0ZWRNb250aCArIDEpKS5z
bGljZSgtMikpOw0KICAgICAgICAgICAgZGl2LmNoaWxkcmVuKCcuaW5wdXQteWVhcicpLnZh
bChpbnN0LnNlbGVjdGVkWWVhcikuY2hhbmdlKCk7DQogICAgICAgIH0sDQogICAgICAgIG9u
Q2xvc2U6IGZ1bmN0aW9uKGRhdGUsIGluc3QpIHsNCiAgICAgICAgICAgIGlmICghJCh0aGlz
KS52YWwoKSkgJCh0aGlzKS52YWwodGhpcy5vbGRWYWwpOw0KICAgICAgICB9LA0KICAgICAg
ICBiZWZvcmVTaG93OiBmdW5jdGlvbihpbnB1dCwgaW5zdCkgew0KICAgICAgICAgICAgdGhp
cy5vbGRWYWwgPSAkKHRoaXMpLnZhbCgpOw0KICAgICAgICB9DQogICAgfSkua2V5dXAoZnVu
Y3Rpb24oZSkgew0KICAgICAgICAgICAgdmFyIGtleSA9IFN0cmluZy5mcm9tQ2hhckNvZGUo
ZS53aGljaCk7DQogICAgICAgICAgICBpZiAoZS53aGljaCA9PSA0NikgdGhpcy5vbGRWYWwg
PSBrZXkgPSAnJzsNCiAgICAgICAgICAgIGlmICgoa2V5ID09ICcnIHx8ICQuaXNOdW1lcmlj
KGtleSkpICYmICQodGhpcykuZGF0ZXBpY2tlcignd2lkZ2V0JykuaXMoJzp2aXNpYmxlJykp
IHsNCiAgICAgICAgICAgICAgICAkKHRoaXMpLmRhdGVwaWNrZXIoJ2hpZGUnKS52YWwoa2V5
KTsNCiAgICAgICAgICAgIH0NCiAgICAgICAgfQ0KICAgICkuY2hhbmdlKCk7DQoqLw0KDQpl
dGNEYXRlcGlja2VyKCk7DQp9KTsNCkpTOw0KZWNobyBzY3JpcHRfanMoJHNjcmlwdCk7DQp9
IjtzOjQ6InR5cGUiO3M6MToiMyI7czo1OiJvcmRlciI7czoxOiI1IjtzOjU6ImZsYWdzIjtz
OjE6IjAiO3M6NDoiaGVscCI7czowOiIiO3M6MzoibWQ1IjtzOjMyOiIxNDI5YmI4MjdhMjQx
NTkwMmQ2OWE3YzhiNGRlNWNlOCI7fQ==Last edited by etc (2017-09-15 17:37:43)
Offline
Re: Expiration datepicker
etc wrote #307025:
That’s the best I can do atm. The widget is closed on select or link click.
I like this! Great work.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Re: Expiration datepicker
Very nice. Just a couple of thing and it’s perfect in my opinion.
Can you put a single (non-breaking) space between the field and the icon.
Closing the widget by clicking anywhere outside of the date picker can be achieved using something like this…
$(function() {
$(".datepicker").datepicker();
$(".hasDatepicker, .ui-datepicker, .ui-datepicker-trigger").click(function(event) {
event.stopPropagation();
});
$("body").bind("click touchstart", function(event) {
$('.ui-datepicker').hide();
$('.hasDatepicker').blur();
});
});…which is the best UI behaviour I think.
Offline
Re: Expiration datepicker
Please feel free to play with it, I have no more free time atm ;-)
Offline
Re: Expiration datepicker
etc wrote #307025:
That’s the best I can do atm. The widget is closed on select or link click.
# Name: etc_datepicker v0.3...
That is nice! And very friendly for keyboard users, as can access the calendar to pickup a date…
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Expiration datepicker
etc wrote #307028:
Please feel free to play with it, I have no more free time atm ;-)
Hi Oleg, when you get a minute can you possibly upload your date picker plugin’s PHP code to a new repo in the etc-plugins GitHub team? I will then make a couple of minor amends to it. Cheers!
Offline