views:

1357

answers:

2

Hi,

is it possible to fill the input field with a date which uses the same format as i would select it with the datepicker? For example i have a value (e.g. new Date()) in my input field before i select a date with the datepicker and i want it to have the same format as i would select it.

thx

kukudas

+1  A: 

Check out the demo site, new Date().asString() is used to select today and it is formated, as one would expect.

$('.date-pick').datePicker().val(new Date().asString()).trigger('change');

EDIT:

You have to make sure, you set the Date.format correctly. Here is a working example for the german date format:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>jQuery datePicker simple datePicker demo</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
 <script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/date.js"&gt;&lt;/script&gt;
 <script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js"&gt;&lt;/script&gt;
 <link rel="stylesheet" type="text/css" media="screen" href="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/datePicker.css"&gt;

 <script type="text/javascript" charset="utf-8">

  Date.format = 'dd.mm.yyyy';

        $(function(){
   $('.date-pick').datePicker()
    .val(new Date().asString()).trigger('change');
        });
 </script>
</head>
<body>
 <label for="date1">Date 1:</label>
 <input name="date1" id="date1" class="date-pick" />
</body>
</html>

Note, the script http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/date.js extends the Date.prototype and sets "Date.format" to 'dd/mm/yyyy'. I'm overriding this with 'dd.mm.yyyy'.

Tim Büthe
i tried that but my input field is empty however .val(new Date()) works but not in the format my datepicker uses.
kukudas
Just added a working example.
Tim Büthe
+1  A: 

I'm not sure I really understand what the problem is?

$(document).ready(function() {
    $('#date_field').datepicker({
        dateFormat: 'yy-mm-dd',
        constrainInput: false});
});

and just have a standard value in the input field you have:

<input name="date_field" id="date_field" value="2008-04-16" />

or you could just set the value in document.ready

$('#date_field').val("2008-04-16");

after you add the datepicker. I'm not sure if that's what you mean?

Ok, after your comment I have a feeling you want something similar to this:

var my_date = new Date(); //This is the Date object that you're getting from external source
$('#date_field').val(my_date.getFullYear()+"/"+my_date.getMonth()+"/"+my_date.getDate());

This should set the value in the field to be 2008/04/26 (or whatever)

Steerpike
the value comes from an external system which is probably formated like this Tue May 12 2009 16:32:05 GMT+0200 but after selecting the format is for example 05/12/09. Basicly i want the value which is populated in my input field have the same formating as i would select it from the datepicker. I'm kinda new to this stuff so i don't know how i could better explain i hope this is more clear.
kukudas
Thanks, is it possible to change this my_date.getFullYear()+"/"+my_date.getMonth()+"/"+my_date.getDate() into calling the same format/parse method which the datapicker would use ?
kukudas
i think i need to use this:var dateFormat = $('.selector').datepicker('option', 'dateFormat');which i read in the documentation to get the format style of my datepicker. and after that i should be able to format and set the value, but somehow i get the code to get the dateFormat dont work.
kukudas
it seems that using var dateFormat = $('.selector').datepicker('option', 'dateFormat'); i get an object which most likly contains the informating i need. I probably could could format the date like this $.datepicker.formatDate(dateformat, new Date(2007, 1 - 1, 26)); however this is not working, i think i need the actual value of the option any suggestions ?
kukudas