javascript - jQuery Datepicker 日期范围填充内联日历

Question

我正在尝试获取 jQuery 日期选择器日期范围字段来突出显示内联日历中的选定日期。到目前为止，我已经获得了内联日历来获取所选日期来填充 2 个不同的字段:date1 和 date2。我只需要选定的日期范围来突出显示日历中的选定日期。

我在这里创建了一个 jsfiddle ( Jsfiddle Demo )

我尝试过 jQuery 替代字段方法，但没有成功，任何帮助将不胜感激!

这是我想要完成的任务的图片。

Answer 1

已更新

通过您的额外评论，我更好地了解您想要做什么。

Working JSFiddle .

简要总结:

• onSelect() 是处理日期选择的最佳方法，它会将所选日期作为字符串传递，因此我删除了您的 .on() 处理程序和 getDate() 函数。

• 保存选择的开始/结束日期；

• 当选择开始/结束时，使用 $('#datepicker').datepicker('refresh'); 刷新内联日期选择器，以便您的 beforeShowDay() 被调用并可以使用这些选定的日期重新绘制日历。它也会在内联日期选择器初始化时触发，但由于在该阶段没有选择日期，所以它什么也没做。

• 简化您在 beforeShowDay() 中进行的测试，以将类添加到开始和结束之间的天数(包括开始天和结束天)。我知道您可能想要更多一点(例如，当选择了所有内容时，可能会突出显示开始日期)，但这是演示工作示例的最简单的情况。

• 为您的 .dp-highlight 类添加了基本样式，必须添加更多特异性以确保它覆盖默认的日期选择器样式。

• 为了简单起见，我还删除了一些内容:

  • 内联日期选择器下的额外输入，我意识到您可能需要它们进行下一步，但这与此问题没有直接关系；
  • 内联日期选择器onSelect代码，同样与此问题没有直接关系；