close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Datepicker advice on how to best handle date AND time?

Thread began 6/24/2015 12:21 pm by Nathon Jones Web Design | Last modified 9/01/2015 12:30 pm by Ray Borduin | 1274 views | 13 replies |

Nathon Jones Web Design

Datepicker advice on how to best handle date AND time?

I need to add a facility to an HTML5 form that allows users to select a date AND time which then inserts into a MySQL DATE field.

Previously I had been asking people to first enter a date, by physically typing it in (loads of user errors would occur!) and then in two seperate select menus choosing the start hour and start date. I would then feed this from one form page to another form page and then it arrived at the second form page I combined to the form fields results to product a date and time for insertion.

Basically, that sucks ass big time and I just want the user to be able to select a date AND time from one simple datepicker tool. Is this possible with the Datepicket extension?

If not, how best would you advise approaching this?
Thank you.
NJ

Sign in to reply to this post

Ray BorduinWebAssist

You can use the jquery DatePicker for the date field that we have included with Data Bridge. The jquery Datepicker doesn't include a time, so time you would either still have to do with select lists, or you could implement another jquery solution.

It looks like this guy has added a timepicker right into the datepicker... it sounds like that might be what you are looking for: http://trentrichardson.com/examples/timepicker/

Sign in to reply to this post

Nathon Jones Web Design

I've looked at Trent's solution and it's just what I'm looking for, but I just can't get it to work.
I've never understood why stuff like this is made so complicated.

I've managed to completely strip down Trent Richardson's page to the attached index.html example - and it works! - but when I try to implement this on my Bootstrap 3 page, also attached (add-event.php) with the code added that I've stripped from Trent's example it doesn't.

This will be, no doubt, be down to something conflicting with the code in Trent's example but I've tried every damn combination of removing stuff, retesting, adding it back, removing something else. Why doesn't this stuff just talk to each other and say "hey, you can't use that when you're using this" on a page?

Anyway - hoping someone can point out the obvious conflict. Thank you.
NJ

Attached Files
add-event.php
index.html
jquery-ui-sliderAccess.js
jquery-ui-timepicker-addon.css
jquery-ui-timepicker-addon.js
Sign in to reply to this post

Nathon Jones Web Design

Ray, how do I change this...

<script type="text/javascript">		
$(function(){

$('.example-container > pre').each(function(i){
eval($(this).text());
});
});
</script>



So that it doesn't appear under my form field, as in Trent's example which is like this:

<div class="example-container">
<input type="text" class="form-control" name="basic_example_1" id="basic_example_1" value="" />

<pre>
$('#basic_example_1').datetimepicker();
</pre>
</div>



In the example you've highlighted the first function uses whatever's in the <pre> tags within the .example-container class - for demo purposes on Trent's site, but if I could remove that then I think I might have cracked it (see attached add-event.php - you'll need the files from the previous post though).

Thank you, or anyone else that could help with this.
NJ

Attached Files
add-event.php
Sign in to reply to this post

Nathon Jones Web Design

Aha...

<script type="text/javascript">
$(function(){
$('#basic_example_1').datetimepicker();
});
</script>



Only problem now is...it's displayed in the wrong date format although it IS the correct date format for the MySQL DATE field. :(
I feel like I've been wrestling with date problems my entire web design career.

Any advice on the date format? Thank you.
NJ

Sign in to reply to this post

Ray BorduinWebAssist

Usually you can pass the format as an argument when creating the datepicker like:



<script type="text/javascript">
$(function(){
$('#basic_example_1').datetimepicker({
dateFormat: 'mm/dd/yy'
}
);
});
</script>
Sign in to reply to this post

Nathon Jones Web Design

Originally Said By: Ray Borduin
  Usually you can pass the format as an argument when creating the datepicker like:

<script type="text/javascript">
$(function(){
$('#basic_example_1').datetimepicker({
dateFormat: 'mm/dd/yy'
}
);
});
</script>
  



I've changed my format to UK:
dateFormat: 'dd/mm/yy'

...and that's displaying the date in the correct format now, in the field when you've chosen from the picker.

Ray, will that cause problems inserting into the MySQL DATE field now though considering that I'm now trying to insert:
dd/mm/yyyy hh:mm

I don't want problems to arise where someone might, for example, insert (UK format - 10th of January 2016) 10/01/2016 but the database assumes the MySQL format (1st October 2016). How do I avoid this?

Also why, after all this time (ho ho), has there not been a definitive answer to this problem? I remember wrestling with this in Classic ASP 15 years ago!

Appreciate the help, thank you.
NJ

Sign in to reply to this post

Ray BorduinWebAssist

Use dashes instead of slashes:

dd-mm-yyyy hh:mm

Then php will recognize it as UK syntax.

Sign in to reply to this post

iain331081

Hi Nathon - I had a similar use this sort of thing a while ago, and found this:

https://github.com/xdan/datetimepicker

I managed to get it all working nicely, plus its nice and clean looking - might be worth a look?

Although I know its a pain sometimes when there are a few options, and a lot of them seem to do 80% of what you would like.

Sign in to reply to this post

Nathon Jones Web Design

Hi Iain,

I've actually got the example Ray listed working pretty nicely however I have concerns about trying to insert UK date formats into my MySQL DATE field, as described above.

My MySQL database is hosted in Europe but I know that it prefers you to enter the format as mm/dd/yy so will inserting the other way around cause problems or does the MySQL database work out the format from the dateFormat specification?

Thank you.
NJ

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...