Trying to only allow date picking to be between 45-90 days from today's date

Question

This is the code I have so far but I am not sure how to alter this function to also check if the selection was made after 90 days. What I have so far is when you click the date picker, it will jump to 45 days from today and not allow user to choose anything from prior, but the problem is that it will allow past 90 days which is what i dont want.

https://jsfiddle.net/dwyvtajg/

    <label id="asterisk">*</label> <label class="description" for="element_2">Event Date:</label><br /><label>Reservations must be made between <b>45-90 days in advance</b> of the event date</label> <br /><input onclick="one()" required="" type="date" oninput="this.className = ''" name="Event-Date" id="datepicker1" min="2019-10-02" />
<script>if ( $('#datepicker1')[0].type != 'date' ) $('#datepicker1').datepicker();</script>


 <script>
    function formatISOLocal(d) {
      let z = n => ('0' + n).slice(-2);
      return d.getFullYear()+'-'+z(d.getMonth()+1) + '-' + z(d.getDate());
    }
    
     function one() {
      let inp = document.querySelector('#datepicker1');
       let d = new Date(new Date().getTime()+(45*24*60*60*1000));
      inp.min = formatISOLocal(d);
      inp.defaultValue = inp.min;
      d.setFullYear(d.getFullYear() , d.getMonth() + 6);
      inp.max = formatISOLocal(d);
      // Debug
      console.log(inp.outerHTML);
    }
    </script>

thanks for the help everyone.... editing this line fixed it!!! d.setFullYear(d.getFullYear() , d.getMonth() , d.getDate() +45);

Does this answer your question? [Add days to JavaScript Date](https://stackoverflow.com/questions/563406/add-days-to-javascript-date) — Matt Raines, Jul 16 '21 at 22:19
Not exactly...how would I go about making this work in my scenario? — Vibe Dynasty, Jul 16 '21 at 22:20

score 1 · Answer 1 · answered Jul 16 '21 at 22:42

1

Definitely take like an hour to review the docs. You're making things so much harder on yourself otherwise.

For instance, setting a min and max date - voila:


$(function() {
    $( "#datepicker1" ).datepicker({
        maxDate:'+90d',
        minDate: '+45d',
        onSelect: function(date) {}
    });
});

answered Jul 16 '21 at 22:42

BenTheHumanMan

327
2
11

another good resource: https://www.geeksforgeeks.org/jquery-ui-date-picker/ – BenTheHumanMan Jul 16 '21 at 22:43
Hi thank you - when I do this, it still allows for dates to be picked before 45 and after 90?? – Vibe Dynasty Jul 17 '21 at 03:12
oh I think I got it? $(function() { $( "#datepicker" ).datepicker({ changeYear: true, minDate: '+45D', maxDate: '+90D', }); }); – Vibe Dynasty Jul 17 '21 at 03:18
I think this line here is what is setting the max date allowed to be picked... but not sure how to configure this to be 90 days instead of 6 months – Vibe Dynasty Jul 17 '21 at 04:11
d.setFullYear(d.getFullYear() , d.getMonth() + 6); – Vibe Dynasty Jul 17 '21 at 04:11
`d.getMonth() + 6` is adding 6 to the `getMonth` method. Change that to `3` and it will add 3 months (~90 days). – BenTheHumanMan Jul 18 '21 at 16:24
also, your fiddle isn't even importing jquery or jquery-ui, so it's never going to work with your current setup. Here is a fiddle actually importing the necessary scripts and using the datepicker as outlined above https://jsfiddle.net/humanman555/r63otygc/2/ – BenTheHumanMan Jul 18 '21 at 16:42

Trying to only allow date picking to be between 45-90 days from today's date

1 Answers1