我被锁定并缩小了日期选择器

发布于 2025-01-10 16:30:56 字数 924 浏览 4 评论 0原文

我实际上试图限制用户在 Datepicker 中选择从今天起 2 年内的日期。 所以现在出现了一个问题,当缩小太多时(缩小我的意思是当我们单击月份名称时,它将缩小到所有月份,并且类似地缩小到所有月份到全年) 这就是我所说的缩小

但是如果我缩小到这样的程度以十年或一个世纪为一组显示日历我无法向后放大,或者我的意思是无法返回到可以选择日期的日历视图。

那么有没有办法限制用户在关卡后缩小呢?或者有办法解决吗?

我的日期选择器版本是 Bootstrap v4.1.1

这是我们正在使用的代码

tz_today 是今天的日期,采用 yyyy-mm-dd 格式。

endDate = new Date(new Date().setFullYear(new Date().getFullYear() + 2)); pickDate = 新日期(pickDate); // 采用 yyyy-mm-dd 格式

$('#Datepicker').datepicker('destroy').datepicker({

        todayHighlight: true,

        beforeShowDay: function (date) {

            $highlight = calendar_highlight_classes(highlight_dates, pickDate, date);

            return $highlight;

        }

    }).datepicker('setStartDate', new Date(tz_today))

        .datepicker('setEndDate', endDate);

I actually tried to restrict users to pick dates within 2 years from today in Datepicker.
So now there is one issue that is coming up that when in zoom out too much (By zooming out I mean when we click on the month name it will zoom out to all months and and similarly all month to all year)
this is the zooming out I am talking about

but if I zoom out to such an extent where it shows the calendar in group of a decade or a century I am not able to zoom in back or I mean not able to go back to the calendar view where I could select dates.

so is there a way to restrict users to zoom out after a level? or is there a way to fix it?

My datepicker version is Bootstrap v4.1.1

This is the code we are using

tz_today Is today's date in yyyy-mm-dd format.

endDate = new Date(new Date().setFullYear(new Date().getFullYear() + 2));
pickDate = new Date(pickDate); // in yyyy-mm-dd format

$('#Datepicker').datepicker('destroy').datepicker({

        todayHighlight: true,

        beforeShowDay: function (date) {

            $highlight = calendar_highlight_classes(highlight_dates, pickDate, date);

            return $highlight;

        }

    }).datepicker('setStartDate', new Date(tz_today))

        .datepicker('setEndDate', endDate);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

指尖凝香 2025-01-17 16:30:56

对我来说 MaxViewMode 很有魅力。默认情况下,它设置为 4,但我们可以根据它进行更改。到我们的偏好

天数(0) ->月(1) ->年(2) ->十年(3) -> century(4)

MaxViewMode: 2 - 限制用户最多可进入年份视图模式

我的代码限制用户只能进入年份

$('#Datepicker').datepicker('destroy').datepicker({
    todayHighlight: true,
    endDate: endDate,
    maxViewMode: 2
});

以下是文档 https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#maxviewmode

Well for me MaxViewMode worked like a charm. By default, it is set as 4 but we can change it acc. to our preference

days(0) -> month(1) -> year(2) -> decade(3) -> century(4)

MaxViewMode: 2 - to limit users to go up to years view mode

my code to limit users to go only till year

$('#Datepicker').datepicker('destroy').datepicker({
    todayHighlight: true,
    endDate: endDate,
    maxViewMode: 2
});

Here is the documentation https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#maxviewmode

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文