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

Question

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

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

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

这是我想要完成的图片。

Answer 1

<强>更新

通过额外的评论，我更好地了解您的目的。

Working JSFiddle

摘要：

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

• 保存选择它们的开始/结束日期;

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

• 简化beforeShowDay()中的测试，将课程添加到开始和结束之间的天数（包括首尾两天）。我知道你可能想要比这更多一点（例如，可能会突出显示所有被选中的开始日期），但这是演示一个工作示例的最简单的情况。

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

• 我还删除了一些简单的内容：

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