this script for load dates in to div onclick, i want show date in the div onload.
this script for load dates in to div onclick, i want show date in the div onload

 <input id="datepicker2">
    <div id="date">
      <div id="day-number">
      </div>
      <div id="day-month">
        <div id="day-name">
        </div>
        <div id="month">
        </div>
      </div>
    </div>    

 var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'nov', 'Dec'];
     $(function() {
       $("#datepicker2").datepicker({
         dateFormat: "dd-mm-yy",
         onSelect: function(dateText) {
           var dateObj = $(this).datepicker('getDate');
           $('#day-name').html(days[dateObj.getDay()]);

           var dayNo = dateObj.getDate();

           if (dayNo.length == 1)
             $('#day-number').html('0' + dayNo);
           else
             $('#day-number').html(dayNo);
           $('#month').html(months[dateObj.getMonth()]);

         }
       }).datepicker("setDate", "0");

       $('#date').on("click", function() {
         $('#datepicker2').datepicker('show');
       });

this script for load dates in to div onclick, i want show date in the div onload.
this script for load dates in to div onclick, i want show date in the div onload

 <input id="datepicker2">
    <div id="date">
      <div id="day-number">
      </div>
      <div id="day-month">
        <div id="day-name">
        </div>
        <div id="month">
        </div>
      </div>
    </div>    

 var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'nov', 'Dec'];
     $(function() {
       $("#datepicker2").datepicker({
         dateFormat: "dd-mm-yy",
         onSelect: function(dateText) {
           var dateObj = $(this).datepicker('getDate');
           $('#day-name').html(days[dateObj.getDay()]);

           var dayNo = dateObj.getDate();

           if (dayNo.length == 1)
             $('#day-number').html('0' + dayNo);
           else
             $('#day-number').html(dayNo);
           $('#month').html(months[dateObj.getMonth()]);

         }
       }).datepicker("setDate", "0");

       $('#date').on("click", function() {
         $('#datepicker2').datepicker('show');
       });

• javascript
• jquery
• jquery-ui-datepicker

Share Improve this question Follow edited Jan 7, 2017 at 20:19 deblocker 7,70522 gold badges2525 silver badges6464 bronze badges asked Jan 5, 2017 at 10:18 Ajesh KolakkadanAjesh Kolakkadan 7122 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Call the function inside document ready.

$(document).ready(function(){
        $('#datepicker2').datepicker('show');
     });

This call would only be triggered after your elements defined in document are loaded. if you want to delay it even further then call it in window.onload

function loadDatePicker() {
            $('#datepicker2').datepicker('show');
        }
        window.onload = loadDatePicker;

Or, if you want to do it by recursion i.e wait until the div is loaded and trigger it, try this :-

jQuery(document).ready(function() {
  checkContainer();
});

function checkContainer () {
  if($('#datepicker2').is(':visible'))){ //if the container is visible on the page
   $('#datepicker2').datepicker('show');
  } else {
    setTimeout(checkContainer, 100); //wait 100 ms, then try again
  }
}

Hope this helps, happy coding :)

You mean, your div shall be straight filled with the date from datepicker?

var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'nov', 'Dec'];

function showDate(value) {
  $('#day-name').html(days[value.getDay()]);
  var dayNo = value.getDate();
  if (dayNo.toString().length == 1)
    $('#day-number').html('0' + dayNo);
  else
    $('#day-number').html(dayNo);
  $('#month').html(months[value.getMonth()]);
}

$("#datepicker2").datepicker({
  dateFormat: "dd-mm-yy",
  onSelect: function(dateText) {
    var dateObj = $("#datepicker2").datepicker('getDate');
    showDate(dateObj);
  }
}).datepicker("setDate", "0");

showDate($("#datepicker2").datepicker('getDate'));

Here is a Fiddle: http://jsfiddle/jd68tg4x/2/ - note JavaScript LOAD TYPE is "onLoad".

You don'even need your onclick handler, it's already handled by the datepicker itself.