Response title
This is preview!
Move this topic
UK Date format for datepicker in Google Libraries?
in Using jQuery UI
•
3 months ago
I am running a Customer management and follow up system called Infusionsoft.
I can create secure webforms (https connections) for my clients to use that are hosted by that company.
They have a form "Builder" that lets you drag and drop elements onto the form.
One of the elements is an "HTML" element that will let you insert code.
I am trying to implement a "Date Picker" for a date field that is on the form.
I found that I could use this code to get the Date Picker Calendar to appear:
. . . with one exception. It formats the date like this: mm/dd/yy
I need it to display and submit the selection in this format: dd-mm-yy
I was looking here: https://forum.jquery.com/topic/formating-the-date-picker-date
and here: http://api.jqueryui.com/datepicker/#option-dateFormat
. . . but I really am not sure how to integrate that into the above code.
Can someone assist with this, OR, is there an option or reference within the Google Libraries that I can use that will cover this need?
How do I search for it as I am having no luck finding it.
It appears that is MUST come from the Google Libraries or else it will NOT display the Datepicker in the Chrome Browser.
Thanks for the assistance.
I can create secure webforms (https connections) for my clients to use that are hosted by that company.
They have a form "Builder" that lets you drag and drop elements onto the form.
One of the elements is an "HTML" element that will let you insert code.
I am trying to implement a "Date Picker" for a date field that is on the form.
I found that I could use this code to get the Date Picker Calendar to appear:
- <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.
com/ajax/libs/jqueryui/1.8.11/ themes/base/jquery-ui.css" /> - <script src="https://ajax.googleapis.
com/ajax/libs/jqueryui/1.8.11/ jquery-ui.min.js" type="text/javascript"></ script> - <script type="text/javascript">jQuery(
'#inf_custom_ xxxxxxxxxxxxxxxxxx'). datepicker();</script>
. . . with one exception. It formats the date like this: mm/dd/yy
I need it to display and submit the selection in this format: dd-mm-yy
I was looking here: https://forum.jquery.com/topic/formating-the-date-picker-date
and here: http://api.jqueryui.com/datepicker/#option-dateFormat
. . . but I really am not sure how to integrate that into the above code.
Can someone assist with this, OR, is there an option or reference within the Google Libraries that I can use that will cover this need?
How do I search for it as I am having no luck finding it.
It appears that is MUST come from the Google Libraries or else it will NOT display the Datepicker in the Chrome Browser.
Thanks for the assistance.
1
Replies(4)
Hey, I think I figured it out;
but could someone please inspect my discovery to make sure that I am not doing something wrong that could come back and bite me later?
All I did was take the last part of the previous posts code:
And add this (Bolded) code to it and it appears to be working as desired!
Is there anything wrong with what I did there?
Ultimately the whole thing will look like this:
Thanks for the assistance
but could someone please inspect my discovery to make sure that I am not doing something wrong that could come back and bite me later?
All I did was take the last part of the previous posts code:
- <script type="text/javascript">jQuery(
'#inf_custom_ xxxxxxxxxxxxxxxxxx'). datepicker();</script>
And add this (Bolded) code to it and it appears to be working as desired!
- <script type="text/javascript">
jQuery('#inf_custom_xxxxxxxxxxxxxxxxxx').datepicker({dateFormat: 'dd-mm-yy'});
</script>
Is there anything wrong with what I did there?
Ultimately the whole thing will look like this:
- <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.
com/ajax/libs/jqueryui/1.8.11/ themes/base/jquery-ui.css" /> - <script src="https://ajax.googleapis.
com/ajax/libs/jqueryui/1.8.11/ jquery-ui.min.js" type="text/javascript"></ script> - <script type="text/javascript">jQuery(
'#inf_custom_ xxxxxxxxxxxxxxxxxx'). datepicker({dateFormat: 'dd-mm-yy'});</script>
Thanks for the assistance
Leave a comment on tdpsgm's reply
That's the way to do it. Normally you would surround your initialisation code with a document.ready callback to ensure that the DOM is built before you try to access it:
- <script type="text/javascript">
- jQuery(function($) { // Shorthand for jQuery(document).ready(function($) {
- $('#inf_custom_xxxxxxxxxxxxxxxxxx').datepicker({dateFormat: 'dd-mm-yy'});
- });
- </script>
Leave a comment on kbwood.au's reply
Thanks for the reply kbwood.au
... however, I may have mislead you with just how much I know about this code.
I really appreciate the assistance, but I don't have a clue about what it is you just wrote.
Where would I insert the code you just posted?
Would that be pasted in addition to what I already have?
I am not sure what is meant by
Thanks again for the help.
... however, I may have mislead you with just how much I know about this code.
I really appreciate the assistance, but I don't have a clue about what it is you just wrote.
Where would I insert the code you just posted?
Would that be pasted in addition to what I already have?
I am not sure what is meant by
Normally you would surround your initialisation code with a document.ready callback to ensure that the DOM is built before you try to access it
Thanks again for the help.
Leave a comment on tdpsgm's reply
The Document Object Model (DOM) is the JavaScript representation of the elements on the page. This model needs to be built before jQuery can access it properly, so your initialisation code should appear within a $(document).ready(function() { ... }); callback to be invoked when the DOM is fully loaded. The script tag containing your code usually appears within the head of the document, after loading jQuery itself. The code I showed replaces line 3 in your example.
Leave a comment on kbwood.au's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to tdpsgm's question
Statistics
- 4 Replies
- 311 Views
- 0 Followers
