如何动态/响应更改jQuery datepicker的月数 [英] How to change jQuery datepicker number of months dynamically/responsive

问题描述

我问这个问题，因为我找不到另一个问题的答案。如果有请将它链接到我。

I'm asking this question because I couldn't find an answer in another one. If there is please link it to me.

我有一个jQuery Datepicker，我在其上设置参数numberOfMonths：2

I have a jQuery Datepicker on which I set the parameter numberOfMonths: 2

如果screenSize低于某个数字（例如768px），我希望它为1。我试过了：

I want it to be 1 if the screenSize goes below some number (eg 768px). I tried:

$(window).resize(function(){
    if($(window).width() < 768){
        $('#datepicker').datepicker({
            numberOfMonths: 1
        })
    }
}

但由于datepicker已初始化，因此无效。

But since the datepicker is already initialised it does not work.

我该怎么办？

推荐答案

你走在正确的轨道上，但是有足够的东西可以证明对我很有帮助想要发表一个完整的答案。

You are on the right track, but there's enough things that could prove to be helpful that I wanted to post a full answer.

首先，这是一个工作小提琴

这是我建议的代码，其中的注释解释了每个元素：

Here's the code that I propose, with comments explaining each element:

// "No-conflict" jQuery document ready, to ensure doesn't collide with other libraries
jQuery(function($) {
  // The initial datepicker load
  $('#datepicker').datepicker({
    numberOfMonths: 3
  });

  // We're going to "debounce" the resize, to prevent the datePicker
  // from being called a thousand times.  This will help performance
  // and ensure the datepicker change is only called once (ideally)
  // when the resize is OVER
  var debounce;
  // Your window resize function
  $(window).resize(function() {
    // Clear the last timeout we set up.
    clearTimeout(debounce);
    // Your if statement
    if ($(window).width() < 768) {
      // Assign the debounce to a small timeout to "wait" until resize is over
      debounce = setTimeout(function() {
        // Here we're calling with the number of months you want - 1
        debounceDatepicker(1);
      }, 250);
    // Presumably you want it to go BACK to 2 or 3 months if big enough
    // So set up an "else" condition
    } else {
      debounce = setTimeout(function() {
        // Here we're calling with the number of months you want - 3?
        debounceDatepicker(3)
      }, 250);
    }
  // To be sure it's the right size on load, chain a "trigger" to the
  // window resize to cause the above code to run onload
  }).trigger('resize');

  // our function we call to resize the datepicker
  function debounceDatepicker(no) {
    $("#datepicker").datepicker("option", "numberOfMonths", no);
  }

});

如果您不熟悉去抖动的概念，请参阅此文。这个概念是您阻止代码在事件的每个单个实例上运行。在这种情况下，500像素的大小调整可能会触发调整大小事件数百次，如果我们没有去抖动，则会调用datepicker函数数百次。显然我们并不关心对datepicker的所有临时调用，我们真的只关心最后一个调用，它是由最后一个resize事件触发的，它应该反映用户停止的最终大小。

If you're not familiar with the notion of "Debounce", see this article. The concept is that you prevent code from running on every single instance of an event. In this case, a resize of 500 pixels might trigger the "resize" event several hundred times, and if we did not "debounce", the datepicker function would get called several hundred times. Obviously we don't care about all the "interim" calls to datepicker, we really only care about the last one, which is triggered by the last resize event, which should reflect the ultimate size the user stopped at.

这篇关于如何动态/响应更改jQuery datepicker的月数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！