【问题标题】:Setting min date in jQuery datepicker在 jQuery datepicker 中设置最小日期
【发布时间】:2012-04-25 17:33:56
【问题描述】:

您好,我想在我的 jQuery 日期选择器中将最小日期设置为 (1999-10-25)。所以我尝试了下面的代码它不起作用。

$(function () {
    $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        minDate: new Date(1999, 10 - 1, 25),
        maxDate: '+30Y',
        inline: true
    });
});

如果我将最小年份更改为高于 2002 年,它将正常工作,但如果我指定最小年份小于 2002 年(如上面的示例 1999),它将只显示到 2002 年。
我正在使用jquery-1.7.1.min.jsjquery-ui-1.8.18.custom.min.js

【问题讨论】:

  • 要在初始化后设置,使用$('#datepicker').datepicker( "option", "minDate", new Date( 1999, 10 - 1, 25 ) )

标签: jquery jquery-ui jquery-ui-datepicker


【解决方案1】:
$(function () {
    $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
yearRange: '1999:2012',
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        minDate: new Date(1999, 10 - 1, 25),
        maxDate: '+30Y',
        inline: true
    });
});

刚刚添加了年份范围选项。应该能解决问题

【讨论】:

  • 帮帮我,如何在odoo的后端设置。
  • 如果我有一个“2019-07-12”字符串值怎么办?如何将其设置到 minDate 属性中?
  • 回答费尔南多,是的,您可以使用普通的日期字符串。您可以从下面使用 jsfiddle 进行测试:jsfiddle.net/femy8
【解决方案2】:

问题是“yearRange”的默认选项是10年。

所以2012 - 10 = 2002

因此,将 yearRange 更改为 c-20:c 或仅 1999 (yearRange: '1999:c'),并将其与限制日期(mindate、maxdate)结合使用。

欲了解更多信息:https://jqueryui.com/demos/datepicker/#option-yearRange


查看示例:(JSFiddle)

还有你的代码:

$(function () {
    $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        minDate: new Date(1999, 10 - 1, 25),
        maxDate: '+30Y',
        yearRange: '1999:c',
        inline: true
    });
});

【讨论】:

    【解决方案3】:

    Hiya 工作演示http://jsfiddle.net/femy8/

    现在日历只会转到 1999 年 10 月 25 日的最小值。

    单击图像,即文本框旁边的小图标以显示日历。您可以尝试选择直到 1999 年,但选择的最短日期是 1999 年 10 月 25 日。这是您想要的。

    这会有所帮助,祝你好运! :) 干杯!

    Jquery 代码

    $(".mypicker").datepicker({
        changeYear: true,
        dateFormat: 'yy-mm-dd',
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        showOn: "button",
            buttonImage: "images/calendar.gif",
            buttonImageOnly: true,
            minDate: new Date('1999/10/25'),
            maxDate: '+30Y',
            inline: true
    });
    
    
    ​
    

    【讨论】:

      【解决方案4】:

      以防万一,例如,您需要输入最短日期、最近 3 个月和接下来 3 个月的最长日期

      $('#id_your_date').datepicker({ 
         maxDate: '+3m',
         minDate: '-3m'
       });
      

      【讨论】:

        【解决方案5】:

        只是想为未来的程序员添加这个。

        此代码限制日期的最小值和最大值。 通过将当前年份作为最大年份来完全控制年份。

        希望这对任何人都有帮助。

        这是代码。

        var dateToday = new Date();
        var yrRange = '2014' + ":" + (dateToday.getFullYear());
        
        $(function () {
            $("[id$=txtDate]").datepicker({
                showOn: 'button',
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                buttonImageOnly: true,
                yearRange: yrRange,
                buttonImage: 'calendar3.png',
                buttonImageOnly: true,
                minDate: new Date(2014,1-1,1),
                maxDate: '+50Y',
                inline:true
            });
        });
        

        【讨论】:

          【解决方案6】:

          这样试试

          <script>
          
            $(document).ready(function(){
                    $("#order_ship_date").datepicker({
                     changeMonth:true,
                     changeYear:true,           
                      dateFormat:"yy-mm-dd",
                      minDate: +2,
                  });
            }); 
          
          
          </script>
          

          html代码如下

          <input id="order_ship_date"  type="text" class="input" style="width:80px;"  />
          

          【讨论】:

          • 能否请您详细说明您的答案,添加更多关于您提供的解决方案的描述?
          【解决方案7】:

          基本上,如果您已经指定了年份范围,则无需使用 mindatemaxdate 如果只需要年份

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2018-05-22
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多