如何使 Lightpick 日历的日期格式响应窗口大小

Question

我正在将一个预先构建的JS日历添加到仪表板(Lightpick)，并希望根据窗口的大小更改日期格式。因此，例如，当用户将大小减小<1000 像素时，格式将从"DD MMM YYYY"更改为"DD/MM/YY"。问题是 - 我的解决方案仅在加载时更新格式！

默认情况下，Lightpick 将格式设置为"DD/MM/YYYY"。我尝试创建一个名为myDynamicFormat的变量并在屏幕上更新其大小 - 但没有运气。代码似乎在页面加载时运行一次，除非刷新，否则不会再次更新。这是我创建的调整大小函数，尝试在宽度低于/超过 1000 像素时更新格式：

window.onresize = function() {
if (screen.width < 1000) {
myDynamicFormat = 'DD/MM/YY';
} else {
myDynamicFormat = 'DD MMM YYYY';
}
};

这是根据Lickpick文档创建的选择器变量中的格式部分：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="lightpick-master/lightpick.js"></script>
var picker = new Lightpick({
format: myDynamicFormat,
...etc...
});

我也尝试将其设置为隐藏在 HTML 中的 DIV 的内部 HTML 和值，但也没有运气。还尝试使用运算符命令，例如"picker.format = ..."以重新分配值。

我希望选择器变量中的 myDynamicFormat 字段在页面加载后侦听变量 - 能够随页面更新。

感谢您对此的帮助 - 我是 JS 的新手，这被证明是一种学习经历！

Answer 1

也许这对你有用。

window.onresize = function() {
var getWidth = $(window).width();
if (getWidth < 1000) {
myDynamicFormat = 'DD/MM/YY';
} else {
myDynamicFormat = 'DD MMM YYYY';
};
};