时间戳

首页 > 解决方案 > 如何使 Lightpick 日历的日期格式响应窗口大小

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

问题描述

我正在向仪表板 ( Lightpick )添加一个预构建的 JS 日历，并希望根据窗口的大小更改日期格式。因此，例如，当用户减小尺寸 < 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 的 innerHTML 和值，但也没有运气。还尝试使用诸如“picker.format = ...”之类的运算符命令来重新分配值。

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

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

标签： javascript

解决方案

可能这对你有用。

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

推荐阅读