基于开始和结束日期的进度条

Question

我一直在尝试根据开始日期和结束日期创建一个进度条。 我列出了100个项目，一些项目于2017年中开始，一些项目于2018年开始，一些项目将在未来开始。我的目标是创建一个进度条，并在2018年，2019年，2020年之间进行反映。 如果项目于2017年开始或从2018年1月1日开始，那么它应该从开始开始，否则它应该从一开始就以相对边际开始。 我用html progress标签制作了这个栏。但问题是，如果项目日期是将来的话，我不知道如何从2018年中期开始启动吧，如果日期是2017年或2018年开始，如何从2018年开始启动吧？

欢迎任何建议和替代方案。 谢谢！

<progress value="100" min="{{item.End_x0020_Date -item.Start_x0020_Date}}" 
max="100" style="height: 2rem; margin-top:13px; margin-left: 
{{item.End_x0020_Date -item.Start_x0020_Date +'px'}};margin-right: 
{{item.Start_x0020_Date +'px'}}; width: {{item.End_x0020_Date / 10+'%'}}; 
max-width:100%;"></progress>

Answer 1

我建议您将日期转换为时间戳，这样会更容易。