如何将 jquery 日期选择器中的日期显示到 div

Question

此脚本用于将日期加载到 div onclick，我想在 div onload 中显示日期。
此脚本用于将日期加载到 div onclick，我想在 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');
       });

Answer 1

调用文档中的函数就绪。

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

此调用只会在加载文档中定义的元素后触发。如果您想进一步延迟它，请在 window.onload

中调用它

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

或者，如果您想通过递归来完成，即等到 div 加载并触发它，试试这个：-

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

希望这对您有所帮助，编码愉快:)

Answer 2

您的意思是，您的 div 应该直接填入 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'));

这是一个 Fiddle：http://jsfiddle.net/jd68tg4x/2/ - 注意 JavaScript 加载类型是“onLoad”。

您甚至不需要 onclick 处理程序，它已经由 datepicker 本身处理了。

如何将 jquery 日期选择器中的日期显示到 div

how to show jquery datepicker date in onload in to a div

javascript

jquery

jquery-ui-datepicker