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

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/

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

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

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

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>

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

Use dashes instead of slashes:

dd-mm-yyyy hh:mm

Then php will recognize it as UK syntax.

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.

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