0

I am using the following date picker on my website for a start and end date selection:

https://bootstrap-datepicker.readthedocs.org/en/latest/index.html

The rules are:

  • start date can be between today and + 30 days, no more
  • end date can be no more than 1 year after the selected start date

So when the form loads, I've set the endDate option to "+1y -1d" which works great. But if the customer picks a start date of +30 days for example, I need the endDate option on the second field to extend to "current start date +1y -1d" again.

I've started the code but really not sure how to acheive this:

<script type="text/javascript">
    $(function() {

        $(".startdate").datepicker({
            format: 'd MM yyyy',
            startDate: '+0d',
            endDate: '+30d',
            autoclose: true,
            startView: 0,
            minViewMode: 0,
            todayHighlight: true,
            orientation: "top"
        });
        $(".enddate").datepicker({
            format: 'd MM yyyy',
            startDate: '+1d',
            endDate: '+1y -1d',
            autoclose: true,
            startView: 0,
            minViewMode: 0,
            todayHighlight: true,
            orientation: "top"
        });

        $("#startdate").change(function() {

            var startdate = new Date (  $("#startdate").val() ) ;
            //alert(startdate);
            var newendatemaximum;

            $(".enddate").datepicker({
                endDate: ???????
            });
        });

    });
</script>

Work In Progress Solution:

$(".startdate").change(function() {
            //alert("start date change");
            var newendatemaximum = new Date (  $(".startdate").val() ) ;
            newendatemaximum.setYear(newendatemaximum.getFullYear() + 1);
            alert(newendatemaximum);
            $(".enddate").datepicker("option", "endDate", newendatemaximum);
        });
James Wilson
  • 809
  • 3
  • 14
  • 25

1 Answers1

0

You don't have to use json to set datepicker options. You can set them directly. Once you have the new max date that you want to use as a javascript date, you can just set that option directly:

    $("#startdate").change(function() {
        var newendatemaximum = new Date (  $("#startdate").val() ) ;
        newendatemaximum.setYear(newendatemaximum.getFullYear() + 1);
        $(".enddate").datepicker("option", "endDate", newendatemaximum);
    });
toddmo
  • 20,682
  • 14
  • 97
  • 107
  • Please provide an explanation to the code you've written. – JRodDynamite Nov 25 '15 at 18:35
  • Thanks for helping. I have tried your code (although replaced # for . on startdate) but it isn't working. See the exact code I am trying in my edit of original question. The alert is as expected. But the enddate field remains 25th November (+1y -1d) as set when the page loads. No matter what start date I try. – James Wilson Nov 26 '15 at 09:58
  • Any ideas after my last comment? I'd definitely like to get this fixed? – James Wilson Dec 07 '15 at 13:25
  • The only idea I would have right now, would be to not ever initialize it initially like you are now, but use the `$(".enddate").datepicker("option", "endDate", newendatemaximum);` line to initialize it. Maybe initializing it the way you do with `+y-d` "sticks" and supersedes any other code. It's possible. – toddmo Dec 07 '15 at 19:34