0

So I have the following fiddle: http://jsfiddle.net/bmgh1985/XcScd/

What I need this to do is when I input the date, it goes through this bit of jQuery:

$('#headline').keyup(function () {
    $('#headlinedisp').text($('#headline').val());
});
$('#timestamp').change(function () {
    $('#timestampdisp').text($('#timestamp').val());
});
$('#news').keyup(function () {
    $('#newsdisp').text($('#news').val());
});

and then displays a preview underneath. That was all well and good before I started using the "date" type. Now, when I input something like 23/03/2013, it displays in the form 2013-03-23. That to me is great for when I stick it into my SQL table, but wanting to display it as written in the box in the display in real time by modifying that jQuery slightly.

Also, I will have some backwards people insisting on using IE6,7,8 on this, so they will see a standard text box, which they will input 23/03/2013 into and it will display that as output correctly. I don't want it messing that up either (so basically, if its text then leave it. If its in the date type, alter the output on .change to be the correct formatting).

Nimantha
  • 6,405
  • 6
  • 28
  • 69
bmgh1985
  • 779
  • 1
  • 14
  • 38

1 Answers1

0

The best way I can think of to achieve a consistent output format for your date, regardless of the input type and format, would be to create a javascript Date object from the input and then use an approach like this answer Where can I find documentation on formatting a date in JavaScript? to achieve the desired target format.

Of course this will only work on a completed date. If you want to reformat the date as they are typing it you will probably have to manually parse the input and reorganize it into the format you want.

Community
  • 1
  • 1
asymptoticFault
  • 4,491
  • 2
  • 19
  • 24
  • Thanks for this. Seems like probably the way to go. With the date box in HTML5, it doesnt seem to play well with updating on keyup anyway and I am not THAT bothered about supporting IE 6/7/8 that it has to be instant for them too ;). Will be testing this in the next hour or so then and hopefully it should then work. – bmgh1985 Aug 06 '13 at 07:47
  • OK, I have tweaked it to try and get this working and _thought_ I had it sussed, but seemingly does not want to actually recognise the date as a number and I get NaN/NaN/N when running this version of my fiddle: http://jsfiddle.net/bmgh1985/XcScd/3/ – bmgh1985 Aug 06 '13 at 12:22
  • This line `var d = new Date('#timestamp');` should be `var d = new Date($(this).val());`. – asymptoticFault Aug 06 '13 at 12:59
  • Ah yes. Always forget to consider using this. Have added an exception to it as well to allow for single digit dates/months to be of the form 0x instead of just x. Finished fiddle can be found here (http://jsfiddle.net/bmgh1985/XcScd/) for anyone else with a similar question. Thanks @asymptoticFault – bmgh1985 Aug 06 '13 at 13:38
  • You are very welcome. Glad we were able to find a solution for you :) – asymptoticFault Aug 06 '13 at 13:43