Home/ Questions/Q 7172281
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T15:35:05+00:00

I am trying to get the date selected on page load, which is 4

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0