Date/time picker

414 views
Skip to first unread message

Sherry Chaudoin

unread,
Mar 4, 2013, 2:20:06 PM3/4/13
to xmpie...@googlegroups.com
Hello all,

Is there a way to change the default options on the date/time picker? The picker offers whole hours and capital AM or PM. This doesn't match our branding style.

Example: 7 pm versus 7:00 PM

How do I change the display options?

Thanks so much,
Sherry Chaudoin


NOTICE: This e-mail message, including any attachments, is for the sole use of the intended recipient(s) and may contain confidential or privileged information or otherwise be protected by law.  Any unauthorized review, use, disclosure, or distribution is prohibited.  If you are not the intended recipient, please contact the sender by reply e-mail, permanently delete the e-mail from your system, and destroy all copies of the e-mail.  The company has taken reasonable precautions to ensure no viruses are present in this e-mail.  The company disclaims responsibility and liability for any loss or damage arising from the use of this e-mail or attachments.

couch

unread,
Mar 4, 2013, 5:29:36 PM3/4/13
to xmpie...@googlegroups.com
As far as I know, the display of the time (and date for that matter) in the uStore GUI are controlled by the culture settings that you apply to the store.

When you create a store, you assign a "culture" on the appearance tab of uStore admin.

In many cases people think this is just the language, but it also controls other aspects of the GUI.

If you set "English" on your store, you will probably find that the culture is set to en-US. You will find this in the Presets -> Localization. For example to change to dd/mm/yyyy date formats on the invoices etc, I have to change the English localisation to use en-UK culture.

The same should be the case for the time formatting.

Sherry Chaudoin

unread,
Mar 4, 2013, 5:37:45 PM3/4/13
to xmpie...@googlegroups.com
I had actually looked in there but didn't see anything at all relating to dates or time. Looking again.

Thanks for your reply.

--
You received this message because you are subscribed to the Google Groups "XMPie Interest Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to xmpie-users...@googlegroups.com.
To post to this group, send email to xmpie...@googlegroups.com.
Visit this group at http://groups.google.com/group/xmpie-users?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Shalom Pennington

unread,
Mar 19, 2013, 11:32:27 AM3/19/13
to xmpie...@googlegroups.com
By using a Generic HTML input control, we customized the date/time picker to better fit our needs. It looks like this:

Using a jQuery Date/Time Picker that offers a ton of options for formatting, ranges, limits, etc. Here's my setup (source code posted below):

Here's the source code for the Markup box and some notes:

jQuery/jQuery UI libraries - The current versions of jQuery and jQueryUI on uStore are out of date and the date/time picker fails. These are loaded from Google's Hosted Libraries.

jquery-ui-timepicker-addon.js - This is the .js file that you'll need to download and link to appropriately. I've got it stored in our Custom Skin in a /js folder (/uStore/Images/SKIN-NAME-HERE/js/).

getTime - This is name of the Callback function. Using it in the onSelect for the picker and onBlur for the input box insures that all changes to the input get communicated to that function which is updating the dial value.

#DIAL_DISPLAY_NAME# #DIAL_VALUE# - These drop in the name and value for the dial.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script src="/uStore/Images/SKIN-NAME-HERE/js/
jquery-ui-timepicker-addon.js"></script>
<script lang="javascript">
var jQuery_1_9_1 = $.noConflict(true);
$(document).ready(function() {
jQuery_1_9_1('#datetime1').datetimepicker({
onSelect: function(){
getTime(this.value);
},
minDate: 1,
controlType: 'select',
timeFormat: 'HH:mm:ss',
pickerTimeFormat: 'hh:mm tt',
hourMin: 6,
hourMax: 23,
stepMinute: 15
});
});
</script>
<div class="custom-input">
<label>#DIAL_DISPLAY_NAME#</label>
<input type="text" name="datetime1" id="datetime1" value="#DIAL_VALUE#" onBlur="getTime(this.value)" />
</div>

Hopefully this is helpful.

- Shalom
Reply all
Reply to author
Forward
0 new messages