Custom Side-by-Side Date & Time Picker
By Justin on Tuesday, 09 June 2015
Posted in General Issues
Replies 17
Likes 0
Views 2.1K
Votes 0
Hello,

I've had some constructive feedback on the date and time picker. Many users find it confusing and recommend separating the date and time selectors when creating and editing events.

I'm hoping to curb this by including the text 'Select Time' along side the glyphicon-time icon in the date time picker but I'm not able to find the file that controls the output (see attached image).

If you could point be in the right direction that would be much appreciated!

Thanks,
Justin
Thanks Ezrul!

For anyone else that wants to show the date-time picker side by side (see screenshot of result), you can do the following:

1 - Update line 171 in file '/media/com_easysocial/scripts/apps/fields/event/startend/content.js' ... change false to true

2 - Recompile scripts: http://www.yoursite.com/index.php?option=com_easysocial&compile=true&minify=true

3 - Add the following code to your template's custom css (and adjust as needed):





body div#fd.bootstrap-datetimepicker-widget .glyphicon {

 font-size: 20px;

 margin-left: 5px

}



body div#fd.es.bootstrap-datetimepicker-widget {

font-size: 14px!important;

}



.bootstrap-datetimepicker-widget .datepicker {

border-right: 2px dotted #CCCCCC;

}



.bootstrap-datetimepicker-widget .timepicker-picker {

padding-top: 43px;

}



.bootstrap-datetimepicker-widget .timepicker-hours {

padding-top: 82px;

}



.bootstrap-datetimepicker-widget .timepicker-minutes {

 padding-top: 115px;

}



.bootstrap-datetimepicker-widget .timepicker-picker td.separator {

padding-top: 23px!important;

font-weight: bold;

}



body div#fd .timepicker-picker .btn-primary {

margin-top: 8px;

}



body div#fd.es  .input-group-addon [class^="ies-"]:after,

body div#fd.es  .input-group-addon [class*=" ies-"]:after {

  font-family: easysocial;

  font-weight: normal;

  font-style: normal;

  display: inline-block;

  text-decoration: inherit;

}



body div#fd.es .input-group-addon .ies-calendar-2:after {

  content: "\e06b";

  margin-left: 5px;

  font-size: 115%;

}
Justin
·
Wednesday, 10 June 2015 22:09
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Justin,

The file that responsible with the output of datetime picker is located at /media/com_easysocial/scripts/apps/fields/event/startend/content.js. If you want to make the time to be more visible when user click on it, you can change the following line of code at line 172:
sideBySide: false,

// change it to

sideBySide: true,


Hope these help.
Ezrul Fazwan
·
Tuesday, 09 June 2015 11:30
·
0 Likes
·
0 Votes
·
0 Comments
·
Justin, I totally agree. A while back I made a mockup for this as seen here:



This would not only make time more obvious (but still well concise) but also make it easier to modify with less clicks/views.
Josh Lewis
·
Tuesday, 09 June 2015 16:09
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Josh,

Thanks sharing this with us
Izzan Akmal
·
Tuesday, 09 June 2015 17:25
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks Ezrul! I believe that will be better for the user.

@Josh - I'll see if I can come up with a CSS solution based on your mockup.
Justin
·
Wednesday, 10 June 2015 02:42
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Ezrul,

When I switch 'System Environment' from 'Development' to 'Production' in ES System Preferences, the update to the script you mentioned makes no difference. Is there another one I should be looking for?

Thanks,
Justin
Justin
·
Wednesday, 10 June 2015 02:58
·
0 Likes
·
0 Votes
·
0 Comments
·
Justin wrote:

@Josh - I'll see if I can come up with a CSS solution based on your mockup.


I usually code my mockups in CSS and HTML. It's easier for me to do it in code than it is to draw it.
Josh Lewis
·
Wednesday, 10 June 2015 06:25
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Josh,

How did you add the clock icon after the calendar one? I haven't tried applying anything design-wise yet.

Thanks,
Justin
Justin
·
Wednesday, 10 June 2015 06:33
·
0 Likes
·
0 Votes
·
0 Comments
·
Here's a video of how I made it:



It's not functional for accessing the time (but does access the calendar). I re-created this much easier now by simply copying the span enclosing the calendar icon:

<span data-picker-toggle="" class="input-group-addon">

                    <i class="ies-calendar-2"></i>

                </span>


I copied the above code, placed it right next to the span tag with the calendar icon. Then I changed the i element class to ies-clock.
Josh Lewis
·
Wednesday, 10 June 2015 06:57
·
0 Likes
·
0 Votes
·
0 Comments
·
Now if there is a class or attribute that could access the time (hours/minutes) dropdown, this will be really easy. The date drop down seems to be accessed from the data-picker-toggle attribute which is why it was super easy to create a clock button that accesses the date.
Josh Lewis
·
Wednesday, 10 June 2015 07:16
·
0 Likes
·
0 Votes
·
0 Comments
·
Very cool Josh!

I found by adding the following CSS to my template's stylesheet I was able to achieve something similar:





body div#fd.es  .input-group-addon [class^="ies-"]:after,

body div#fd.es  .input-group-addon [class*=" ies-"]:after {

  font-family: easysocial;

  font-weight: normal;

  font-style: normal;

  display: inline-block;

  text-decoration: inherit;

}



body div#fd.es .input-group-addon .ies-calendar-2:after {

  content: "\e06b";

  margin-left: 5px;

  font-size: 115%;

}
Justin
·
Wednesday, 10 June 2015 07:55
·
0 Likes
·
0 Votes
·
0 Comments
·
Now we just need to know how to access the time picker via a class or attribute. If we figure out how to do this, creating a time picker would be a breeze!
Josh Lewis
·
Wednesday, 10 June 2015 08:03
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Justin,

I am sorry for the delay of this reply.

When I switch 'System Environment' from 'Development' to 'Production' in ES System Preferences, the update to the script you mentioned makes no difference. Is there another one I should be looking for?

You need to recompile the js script first before the change could take effect in production mode. I've helped you with the compiling and it should be working fine now.

Josh,

Cool! +1 for this mockup.
Ezrul Fazwan
·
Wednesday, 10 June 2015 17:55
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Justin,

Awesome! Thanks for the share.
Ezrul Fazwan
·
Thursday, 11 June 2015 12:52
·
0 Likes
·
0 Votes
·
0 Comments
·
When attempting to recompile the scripts via this url, I get a error message "0 - No HTTP response from server". I've tried multiple times now.
Josh Lewis
·
Thursday, 11 June 2015 13:07
·
0 Likes
·
0 Votes
·
0 Comments
·
@Josh - Maybe a server setting or a 3rd party SEF issue. When I recompile is runs for quite a while (10-15 seconds on DigitalOcean droplet and at least 30 seconds on local WAMP). Once it finishes it creates an index.php file containing information related to the process.
Justin
·
Friday, 12 June 2015 01:54
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Josh,

I am sorry for the delay of this reply.

Can you go to your /media/foundry/4.0/libraries/closure.php and change the following url constant at line 33:
const URL = 'http://deployer.stackideas.com:1280';

//replace with

const URL = 'http://oauth.stackideas.com/compiler';

After that try to run the recompile url again and see how it goes.
Ezrul Fazwan
·
Friday, 12 June 2015 11:13
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post