jQuery Datepicker日期范围填充嵌入式日历

Question

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

我在这里创建了一个jsfiddle（ Jsfiddle Demo ）

我尝试了jQuery备用字段方法，但没有成功，任何帮助将不胜感激！

这是我要完成的事情的图片。

Answer 1

更新

通过您的额外评论，我可以更好地理解您要做什么。

工作中的JSFiddle 。

简要摘要：

• onSelect()是处理日期选择的最佳方法，它以字符串形式传递所选日期，因此我删除了.on()处理函数和getDate()函数。

• 选择开始/结束日期时保存它们；

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

• 简化在beforeShowDay()进行的测试，以在开始和结束之间（包括首尾两天）之间添加一个类。 我了解您可能还需要更多（例如，选择所有内容时突出显示开始日期），但这是最简单的示例，它演示了一个有效的示例。

• 为.dp-highlight类添加了基本样式，必须添加更多的特殊性以确保它覆盖默认的datepicker样式。

• 为了简化起见，我还删除了一些内容：

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