jQuery: having trouble specifying minDate and maxDate for a datePicker_问答_开发者

jQuery: having trouble specifying minDate and maxDate for a datePicker

开发者 https://www.devze.com 2023-01-13 20:14 出处：网络

I\'m trying to enforce choosing only dates between (today minus a week, today plus a week) but instead getting a datePicker with past dates disabled and unrestricted future dates.

I'm trying to enforce choosing only dates between (today minus a week, today plus a week) but instead getting a datePicker with past dates disabled and unrestricted future dates.

Any idea? (I'm new to jQuery, 2nd day of playing with it...) thanks!

I isolated the code to clearly repro it:

<html>                                                                  
<head>                                                                  
    <title>jquery sample</title>
    <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="date.js"></script>
    <script type="text/javascript" src="jquery.datePicker.js"></script>
    <link href="datePicker.css" rel="stylesheet" type="text/css" />
    <link href="custom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" charset="utf-8">
        $(function () {
            $('.date-pick').datePicker({ minDate: 开发者_如何转开发'-7D', maxDate: '+7D' }).val(new Date().asString()).trigger('change');
        });
    </script>
</head>
<body>                                                                  
    <a href="">Link</a>
    <input name="date1" id="date1" class="date-pick" />
</body>

The options are different for your current plugin, startDate and endDate and they must be strings, like this:

$(function () {
  $('.date-pick').datePicker({ 
     startDate : new Date().addDays(-7).asString(), 
     endDate: new Date().addDays(7).asString()
  }).val(new Date().asString()).trigger('change');
});

You can give it a try here. The documentation you seemed to have pulled from is for a different plugin, the jQuery UI Datepicker found here.

It looks like you're mixing up the same two datepickers that I did, as @Nick pointed out. The datepicker plugin you're using doesn't take minDate and maxDate options: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/documentation.html

But the jQuery UI datepicker does. http://jqueryui.com/demos/datepicker/#option-minDate

Which one did you mean to use? If it's the plugin (not the jQuery UI one), then use the startDate and endDate options (looks like they only accept absolute-date strings [kind of crappy, IMO]):

$(function() {
    var MS_PER_WEEK = 604800000;
        now = new Date().getTime(),
        start = new Date(now - MS_PER_WEEK),
        end = new Date(now + MS_PER_WEEK),
        startStr = start.getDate() + '/' + (start.getMonth() + 1) + '/' + start.getFullYear(),
        endStr = end.getDate() + '/' + (end.getMonth() + 1) + '/' + end.getFullYear()

    $('.date-pick').datePicker({
        startDate: startStr
        endDate: endStr
    }).val(new Date().asString()).trigger('change');
});

~~For the jQuery UI datepicker, try a lowercase d to indicate days:~~

~~$(function() { $('.date-pick').datepicker({ minDate: '-7d', maxDate: '+7d' }).val(new Date().asString()).trigger('change'); });~~

I think you need to use startDate and endDate instead:

$('.date-pick').datePicker({ startDate: '-2D', endDate: '+2D' }).val(new Date().asString()).trigger('change');

That is, assuming you are using the plugin described here: kevinluck.com. This works for me on my local test. I assume you are using this plugin due to the similarity to the examples on Kevin's site.