how to validate a picker to select date in a particular range

Question

I have these 2 controls:

<div class="control-group">
                                <label class="control-label">Batch Date:</label>
                                <div class="controls with-tooltip">
                                    <asp:TextBox runat="server" CssClass="mydate input-small" ID="BatchDate_txt" />
                                </div>
                            </div>

                            <div class="control-group">
                                <label class="control-label">Claim Month:</label>
                                <div class="controls with-tooltip">
                                    <asp:TextBox runat="server" CssClass="mydatemonth input-small" ID="ClaimMonth_txt" />
                                </div>
                            </div>

what i want to achieve is this: when you pick the batch date,the claim month should allow you to pick only within the next 90days from the claim month. Note: the claim month datepicker displays only month.

I don't know if i was explicit enough but how do i go about this?

[Here is an example](http://jsfiddle.net/bnf3tqhn/) that doesn't include other validation checks you probably need to do on your date `input`. Also, you should (of course) validate this on the server side as well. — wahwahwah, Mar 24 '15 at 15:07

score 0 · Answer 1 · edited May 23 '17 at 11:43

I tried to fully understand your requirements, even though your goal seems a bit strange to me.

Anyway I often use the built-in option beforeShowDay when jquery attach the date to your element:

 $('#ClaimMonth_txt').datepicker({..., beforeShowDay : fnCheckDate });

and the js function can be something like

 var fnCheckDate = function(day) {
     var maxDate = add90Days(convertToDate($('#BatchDate_txt').val()));
     return [day <= maxDate, '', ''];
 }

this function is called for each day that should be displayed, in this way you can disable or enable them one by one as you like, setting true or false as the first value in the returning array.

My doubts are about the statement the claim month datepicker displays only month. Then, is it not simplest to populate a combo with only valid months instead of a datepicker?

Anyway, another solution can be found in a previous question, the solution consists on disabling the month selection arrows when the datepicker is focused. The logic can be the same as the one with beforeshowday.

Sorry if i misunderstood something.

how to validate a picker to select date in a particular range

1 Answers1