Pre populate date into another field on pageload

Question

I am trying to get the date selected on page load, which is 4 days onwards from today date on page load, to auto populate my field which is in the sidebar for the user to be able to see which date is selected for delivery.

I have managed to get the date to populate the field, but only once it has been clicked. When the page loads it automatically highlights the current day which means the user could proceed without selecting a date if they just look at the datepicker as my datepicker is visible at all times like a calendar.

I have pasted my code below, my datepicker is in #calendar and the value is populating #alternate. What I need is #alternate to be auto populated in the same date format on page load, as at the moment it is blank until you click a day.

<script type="text/javascript">
$(function() {
$( "#calendar" ).datepicker({ minDate: +4, maxDate: "+1M +4D", dayNamesMin: ['Mon', 'Tue',        'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], prevText: '<<', nextText: '>>', changeMonth: false, changeYear: false, altField: "#alternate", altFormat: "DD, d MM, yy", gotoCurrent: false, defaultDate: '+4'});}); 
</script>

 <div id="calendar"></div>

 <input type="text" id="alternate" name="delivery-date"/>

Any help would me much appreciated.

EDIT

<script type="text/javascript">
$(function() {
$( "#calendar" ).datepicker({ minDate: +4, maxDate: "+1M +4D", dayNamesMin: ['Mon', 'Tue',    'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], prevText: '<<', nextText: '>>', changeMonth: false, changeYear: false, altField: "#alternate", altFormat: "DD, d MM, yy", gotoCurrent: false,  defaultDate: '+4'});
var today = new Date();
today.setDate(today.getDate()+4);
future =(today.getMonth()+1) + '/' + today.getDate() + '/' + today.getFullYear();

$("#alternate").append($.datepicker.formatDate('D, dd M yy', today));
});
</script>

Your code appears to work fine for me : [jsFiddle](http://jsfiddle.net/GoranMottram/f4JDh/1/) , in both Firefox 9 and IE 9. — Goran Mottram, Jan 26 '12 at 10:42

score 2 · Accepted Answer · edited May 23 '17 at 12:03

2

You can find the answer in a previous stackoverflow question here:

How do I pre-populate a jQuery Datepicker textbox with today's date?

Always worth a quick Google search ;)

Making that code specific to your code would be something like:

var today = new Date();
today.setDate(today.getDate()+4);
future =(today.getMonth()+1) + '/' + today.getDate() + '/' + today.getFullYear();

$("#alternate").val(future);

Here's a jsfiddle live version: http://jsfiddle.net/NXFy2/

EDIT: You could use the datepicker built in formatting to format a new date actually:

$.datepicker.formatDate('yy-mm-dd', new Date(2007, 1 - 1, 26));

See the examples and docs here: http://docs.jquery.com/UI/Datepicker/formatDate

FURTHER EDIT: To use the datepicker formatDate function together with the initial code to get the date today or however many days from today you could do the following:

$( "#calendar" ).datepicker({ minDate: +4, maxDate: "+1M +4D", dayNamesMin: ['Mon', 'Tue',    'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], prevText: '<<', nextText: '>>', changeMonth: false, changeYear: false, altField: "#alternate", altFormat: "DD, d MM, yy", gotoCurrent: false,  defaultDate: '+4'});

var today = new Date();
today.setDate(today.getDate()+4);

$("#alternate").val($.datepicker.formatDate('D, dd M yy', today));

Here is the jsfiddle: http://jsfiddle.net/xX5AM/4/

edited May 23 '17 at 12:03

Community

1
1

answered Jan 26 '12 at 10:48

Steve O

5,224
1
24
26

Thanks thats great, I used that as it was what I found on Google, but it submits the value in a different date format to when you select a date. For example it submits 1/30/2012 rather than Monday, 30 January, 2012. – Ben Jan 26 '12 at 10:56
Ah ok...you could use the datepicker date formatting...see edit. – Steve O Jan 26 '12 at 11:09
Ive got it working, but it displays the date you have input in the code rather than the current date + 4 days. What do I change the new Date(2007, 1 - 1, 26) to list the current day + 4 days? Thanks again – Ben Jan 26 '12 at 14:17
Hi Steve. I have pasted you code into what I had and now it doesnt post anything into #alternate. I have looked at the js fiddle and it all works perfectly there so it definatly something im doing wrong :( I have edited my post above if you wouldn't mind casting your eyes over it :) Thanks again – Ben Jan 26 '12 at 16:37
Apologies @Ben, I had used a div in the example, you'll need to use `val` instead of `append` to insert the date into your input. I've updated the code and the jsfiddle above you. – Steve O Jan 26 '12 at 16:59
Hi Steve. No need to apologise. All working perfectly now, thanks for all your help, really appreciate it! – Ben Jan 26 '12 at 17:44
No problem @Ben. Hope the project goes well. – Steve O Jan 26 '12 at 18:03

Pre populate date into another field on pageload

1 Answers1