在页面加载和日历点击上填充 jquery datepicker答案

【问题标题】：populate jquery datepicker on both page load and calendar click在页面加载和日历点击上填充 jquery datepicker
【发布时间】：2017-12-03 18:35:57
【问题描述】：

我有一个 jquery ui 表单（模式弹出窗口），其中有 startDate 和 endDate 输入字段。在日历图标上单击它，用户可以选择日期，它将以自定义格式显示日期时间，例如“2017-08-03 01:00:00”但是当表单加载到屏幕上时，我想在 startDate 字段中填充当前日期时间，在 endDate 字段中填充当前日期时间 +1 小时。我的 startDate 输入字段的自定义函数

   $( function() {
    $( "#startDate" ).datepicker({
        dateFormat: 'yy-dd-mm',
        showOn: "button",
        buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
        buttonImageOnly: true,
        buttonText: "Select date",

        onSelect: function(datetext){

            var d = new Date(); // for now

            var h = d.getHours();
            h = (h < 10) ? ("0" + h) : h ;

            var m = d.getMinutes();
            m = (m < 10) ? ("0" + m) : m ;

            var s = d.getSeconds();
            s = (s < 10) ? ("0" + s) : s ;

            datetext = datetext + h + ":" + m + ":" + s;
            strDate = datetext;

            $('#startDate').val(datetext);
        }

    });
} );

但是当我使用 setDate 尝试页面加载功能时，如下所示

$("startDate").datepicker('setDate', 'strDate');

它仅显示当前日期，例如startDate 输入框中的“2017-07-29”而不是“2017-07-29 01:00:00”这样的内容

我也尝试了 $(document).ready 使用相同的功能，但没有成功。如何在页面加载时使用当前日期和时间填充日期输入？

【问题讨论】：

可以像这样触发点击事件：$("#startDate").trigger("click");在$(document).ready函数下。
您的自定义 onSelect 函数仅更改文本框值，而不更改日期选择器。日期选择器无法处理时间。所以你需要在页面加载时运行同样的东西来改变文本框的内容，以及 datepicker 的 setDate 方法。
选项 1（最简单/最快）：stackoverflow.com/a/18979888/3407923。 -------------------------------------------------- 选项 2（最佳/可靠）：stackoverflow.com/a/2155546/3407923.

标签： javascript jquery datetime jquery-ui datepicker

【解决方案1】：

在日期选择器属性中使用{timepicker:false}。像这样：

   $( function() {
    $( "#startDate" ).datepicker({
        dateFormat: 'yy-dd-mm',
        showOn: "button",
        buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
        buttonImageOnly: true,
        buttonText: "Select date",
        timepicker:false,
        onSelect: function(datetext){

            var d = new Date(); // for now

            var h = d.getHours();
            h = (h < 10) ? ("0" + h) : h ;

            var m = d.getMinutes();
            m = (m < 10) ? ("0" + m) : m ;

            var s = d.getSeconds();
            s = (s < 10) ? ("0" + s) : s ;

            datetext = datetext + h + ":" + m + ":" + s;
            strDate = datetext;

            $('#startDate').val(datetext);
        }

    });
} );

【讨论】：