JavaScript中如何在UI Datepicker中调用其他函数的exp_dt变量？

我现在有个需求：根据选中的日期计算并存储exp_dt变量，这个计算逻辑写在#date的change函数里。但尝试在jQuery UI Datepicker的$("#exp").datepicker()配置里把exp_dt作为maxDate使用时，一直报‘exp_dt is not defined’错误。想请教下怎么才能在Datepicker的配置里访问到这个exp_dt？

我的现有JS代码：

$('#date').change(function() { 
  var dep_dt = $(this).val(); 
  $('#eff').val(dep_dt); 
  var eff_dt = new Date(dep_dt); 
  eff_dt.setDate(eff_dt.getDate() + 364); 
  var month = "0"+(eff_dt.getMonth()+1); 
  var date = "0"+eff_dt.getDate(); 
  month = month.slice(-2); 
  date = date.slice(-2); 
  var exp_dt = month +"/"+date +"/"+eff_dt.getFullYear(); 
}); 

var dateToday = new Date(); 
$( function() { 
  $("#date").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "-100:+0", 
    minDate: dateToday 
  }); 
  $("#eff").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "-100:+0", 
    minDate: dateToday 
  }); 
  $("#exp").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "-100:+0", 
    minDate: dateToday 
  }); 
}); 

对应的HTML结构：

<input type="text" id="date"> 
<input type="text" id="eff"> 
<input type="text" id="exp"> 

我希望能在$("#exp").datepicker({ });里以maxDate的形式访问exp_dt。

嘿，这个问题其实是变量作用域在搞鬼！你现在的exp_dt是定义在#date的change函数内部的局部变量，外部的Datepicker初始化代码根本拿不到它的值。而且就算你把变量提到外面，初始化Datepicker的时候用户还没选日期，exp_dt还是空的，所以得结合动态更新的方式来处理。下面给你两种可行的方案：

方案1：用全局变量快速解决 #

最简单的方式就是把exp_dt的声明移到函数外面，变成全局变量，然后在用户选完日期后，动态更新#exp的Datepicker配置：

// 先在全局作用域声明变量，让所有代码都能访问到
var exp_dt;

$('#date').change(function() { 
  var dep_dt = $(this).val(); 
  $('#eff').val(dep_dt); 
  var eff_dt = new Date(dep_dt); 
  eff_dt.setDate(eff_dt.getDate() + 364); 
  var month = "0"+(eff_dt.getMonth()+1); 
  var date = "0"+eff_dt.getDate(); 
  month = month.slice(-2); 
  date = date.slice(-2); 
  // 给全局变量赋值
  exp_dt = month +"/"+date +"/"+eff_dt.getFullYear(); 
  // 关键一步：更新#exp的Datepicker，把maxDate设为最新的exp_dt
  $("#exp").datepicker("option", "maxDate", exp_dt);
}); 

var dateToday = new Date(); 
$( function() { 
  $("#date").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "-100:+0", 
    minDate: dateToday 
  }); 
  $("#eff").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "-100:+0", 
    minDate: dateToday 
  }); 
  $("#exp").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "-100:+0", 
    minDate: dateToday,
    // 初始可以设为null，等用户选完日期再更新
    maxDate: null
  }); 
}); 

方案2：用闭包避免全局变量污染 #

如果你不想污染全局作用域（毕竟全局变量容易引发冲突），可以把所有逻辑封装在DOM就绪的闭包里，这样exp_dt只在闭包内可见，安全又优雅：

$(function() {
  // 闭包内的变量，不会跑到全局作用域里
  var exp_dt; 
  var dateToday = new Date();

  $('#date').change(function() { 
    var dep_dt = $(this).val(); 
    $('#eff').val(dep_dt); 
    var eff_dt = new Date(dep_dt); 
    eff_dt.setDate(eff_dt.getDate() + 364); 
    var month = "0"+(eff_dt.getMonth()+1); 
    var date = "0"+eff_dt.getDate(); 
    month = month.slice(-2); 
    date = date.slice(-2); 
    exp_dt = month +"/"+date +"/"+eff_dt.getFullYear(); 
    // 同样要动态更新Datepicker配置
    $("#exp").datepicker("option", "maxDate", exp_dt);
  }); 

  $("#date").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "-100:+0", 
    minDate: dateToday 
  }); 
  $("#eff").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "-100:+0", 
    minDate: dateToday 
  }); 
  $("#exp").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "-100:+0", 
    minDate: dateToday,
    maxDate: null
  }); 
});

额外小优化：简化日期格式化 #

你手动拼接月份和日期的代码可以简化，利用jQuery UI Datepicker自带的formatDate方法来生成符合格式的日期字符串，避免手动处理补零的麻烦：

var eff_dt = new Date(dep_dt);
eff_dt.setDate(eff_dt.getDate() + 364);
// 用Datepicker的formatDate方法，格式和你的Datepicker配置一致就行
exp_dt = $.datepicker.formatDate('mm/dd/yy', eff_dt);

内容的提问来源于stack exchange，提问作者Jason