使用jQuery Pickatime插件：设置时间时调用JavaScript函数

嘿，作为刚接触JavaScript一个月的jQuery新手，能上手pickadate.js已经超棒啦！我来帮你搞定这个需求——让用户选完时间后自动调用sendTime()函数，设置隐藏域值并提交表单。

你的原始代码回顾 #

先贴一下你提供的HTML和JS代码，方便对照：

HTML代码

<input type="text" name="timepicker" id="timepicker" >
<form id = "order-form" action="confirmation.php" method="POST" >
  <input class = "formitem" type="hidden" id="time" name="time" value="">
  <input class = "formitem" id="next" type="submit" value="Next">
</form>

原始JS代码

function sendTime(){ 
  date = new Date(document.getElementById('timepicker').value); 
  document.getElementById('time').value = date; 
  document.getElementById('next').click(); 
} 

var $timepicker = $('#timepicker').pickatime( { 
  min: [9, 0], 
  max: [19, 30], 
} ); 

问题所在 #

你的代码里已经定义了sendTime()函数，也初始化了pickadate时间选择器，但没有把函数和时间选择完成的事件绑定起来，所以用户选完时间后不会自动触发函数。

修改后的解决方案 #

我们需要利用pickadate.js提供的onSet回调事件——这个事件会在用户确认选择时间后触发。下面是修改后的完整JS代码：

function sendTime(selectedTime) {
  // 这里直接使用pickadate返回的格式化时间字符串，比手动转Date更可靠
  document.getElementById('time').value = selectedTime;
  document.getElementById('next').click();
}

var $timepicker = $('#timepicker').pickatime({
  min: [9, 0],
  max: [19, 30],
  // 绑定时间选择完成的回调事件
  onSet: function(context) {
    // 只在用户确实选择了时间（不是点击取消）时触发
    if (context.select) {
      // 自定义时间格式，比如'YYYY-MM-DD HH:mm'或者'h:i A'（上午/下午格式）
      var formattedTime = this.get('select', 'YYYY-MM-DD HH:mm');
      sendTime(formattedTime);
    }
  }
});

关键说明 #

1. onSet事件的作用：这个回调会在用户选择时间、点击确认后触发，完美契合你的需求。
2. 安全判断context.select：加上这个判断可以避免用户打开picker后直接关闭（没选时间）也触发函数的情况。
3. 使用插件的时间格式化：通过this.get('select', 格式)获取格式化后的时间字符串，比手动从input取值转Date更稳定，因为pickadate内部已经处理了不同浏览器的时间格式兼容问题。

如果你还是想保留原来的Date对象方式，也可以简化成这样：

function sendTime(){ 
  var date = new Date(document.getElementById('timepicker').value); 
  document.getElementById('time').value = date; 
  document.getElementById('next').click(); 
} 

var $timepicker = $('#timepicker').pickatime({ 
  min: [9, 0], 
  max: [19, 30], 
  onSet: function(context) {
    if (context.select) {
      sendTime();
    }
  }
}); 

这样修改后，用户选完时间就会自动触发sendTime()，完成隐藏域赋值和表单提交啦！

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