选项中的 JQuery UI datepicker 外部函数调用不起作用答案

【问题标题】：JQuery UI datepicker external function call in option not working选项中的 JQuery UI datepicker 外部函数调用不起作用
【发布时间】：2012-11-28 17:15:17
【问题描述】：

日期选择器初始化时未调用 getDefault_Date() 函数大佬请解释一下哪里出错了

    $('.dtpExpiryDate').datepicker({
        numberOfMonths: 1,
        showButtonPanel: false,
        dateFormat: 'dd/mm/yy',
        showOn: 'both',
        buttonImage: "images/calender.jpg",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,            
        minDate: 0,
        maxDate: '+20Y',
        defaultDate: getDefault_Date()
    });


    function getDefault_Date() {
        var issueDate = $.trim($('.dtpIssueDate').val());
        console.log(issueDate);
        if (issueDate != '') {
            var dateArray = issueDate.split("/");
            dateArray[2] += 10;
            var defaultDate = "'" + dateArray[0] + "/" + dateArray[1] + "/" + dateArray[2] + "'";
            return defaultDate;
        } else {
            return 0;
        }
    }

【问题讨论】：

你在控制台上收到 issueDate 了吗？你能告诉我们你得到了什么 issueDate ....
控制台没有记录问题日期我认为是因为日期选择器在加载时没有调用该函数
你是否包含了 datepicker.js

标签： jquery function user-interface datepicker

【解决方案1】：

在没有defaultDate 的情况下初始化您的日期选择器。

初始化后，进行计算并设置您的deafultDate。

var ddate="";
var issueDate = $.trim($('.dtpIssueDate').val());
if (issueDate != '') {
    var dateArray = issueDate.split("/");
    dateArray[2] += 10;
    var ddate= "'" + dateArray[0] + "/" + dateArray[1] + "/" + dateArray[2] + "'";

} 
$('.dtpExpiryDate').datepicker( "option", "defaultDate", ddate );

注意：确保您的ddate 使用正确的日期格式，即 dd/mm/yy... 您在初始化 datpicker 时指定的日期格式..

defaultDate 支持由 dateFormat 选项定义的格式的字符串或相对日期。

浏览日期选择器的 API 文档

http://api.jqueryui.com/datepicker/#option-dateFormat

【讨论】：

ok console.log(issueDate) here ... 告诉我你得到了什么......并确保上面的代码在 document.ready 中并且在 datepicker 初始化之后
console.log(issueDate) 没有输出
老兄......你的发行日期有问题......确保选择器正确并尝试删除修剪并检查你是否得到问题日期

【解决方案2】：

函数应该在jquery括号之外，比如

$(document).ready(function(){

$('.dtpExpiryDate').datepicker({
    numberOfMonths: 1,
    showButtonPanel: false,
    dateFormat: 'dd/mm/yy',
    showOn: 'both',
    buttonImage: "images/calender.jpg",
    buttonImageOnly: true,
    changeMonth: true,
    changeYear: true,            
    minDate: 0,
    maxDate: '+20Y',
    defaultDate: getDefault_Date()
});

});

function getDefault_Date() {
    var issueDate = $.trim($('.dtpIssueDate').val());
    console.log(issueDate);
    if (issueDate != '') {
        var dateArray = issueDate.split("/");
        dateArray[2] += 10;
        var defaultDate = "'" + dateArray[0] + "/" + dateArray[1] + "/" + dateArray[2] + "'";
        return defaultDate;
    } else {
        return 0;
    }
}

另外如果不起作用，也可以将功能事项放在defaultDate前面，比如

defaultDate: function(){
             var issueDate = $.trim($('.dtpIssueDate').val());
    console.log(issueDate);
    if (issueDate != '') {
        var dateArray = issueDate.split("/");
        dateArray[2] += 10;
        var defaultDate = "'" + dateArray[0] + "/" + dateArray[1] + "/" + dateArray[2] + "'";
        return defaultDate;
    } else {
        return 0;
    }
}

【讨论】：

jQuery 里面没有人，我试着把它放在 defaultDate 之后

【解决方案3】：

而不是这个声明

 var defaultDate = "'" + dateArray[0] + "/" + dateArray[1] + "/" + dateArray[2] + "'";

这样做

var defaultDate = new Date(dateArray[0], dateArray[1], dateArray[2]);

如果 defaultDate 不是预期日期，您应该尝试按照日期、月份、年份交换这些 dateArray 项目

【讨论】：

谢谢，但问题是如果函数被调用，datepicker 不会调用函数，我将在我的控制台中得到发布
尝试像这样添加 defaultDate: return getDefault_Date()

【解决方案4】：

我发现我在 datepicker 初始化时调用函数，当时 issueate 为空，所以我将函数调用放在 issudate datepicker 的 onclose 事件中，现在一切正常，谢谢大家的回答。

来自 jQuery 文档的脚本

$(function() {
        $( "#from" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onClose: function( selectedDate ) {
                $( "#to" ).datepicker( "option", "minDate", selectedDate );
            }
        });
        $( "#to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onClose: function( selectedDate ) {
                $( "#from" ).datepicker( "option", "maxDate", selectedDate );
            }
        });
    });

【讨论】：