jQuery/javascript/bootstrap - Working with datepicker, combining two scripts, StartDate/EndDate

Mike Miller
Mike Miller used Ask the Experts™
on
I have two sets of code, both which work on their own, but I'm really struggling to combine the two.
What I'm trying to do is control start date / end date entries into respective textboxes with datepicker.
When the start date is selected, the date picker disables dates before that selected date when the other text box is clicked.
Also, only days up until the next Sunday (from the selected start date) can be selected as an end date.

So this code works to disable any previous dates for the endDate textbox.

  var dateFormat = "mm/dd/yy";
  var from = $(".start").datepicker({
    changeMonth: true,
    numberOfMonths: 1

  }).on("change", function () {
    to.datepicker("option", "minDate", getDate(this));
  });

  var to = $(".end").datepicker({
    changeMonth: true,
    numberOfMonths: 1
  }).on("change", function() {
    from.datepicker("option", "maxDate", getDate(this));
  });

  function getDate(element) {
    var date;
    try {
      date = $.datepicker.parseDate(dateFormat, element.value);
    } catch (error) {
      date = null;
    }

    return date;
  }

Open in new window


And this code works to only allow dates selected until the next Sunday:

<script>
var dateFormat = "mm/dd/yy";
$(document).ready(function(){
  var from = $("#StartDate").datepicker({
    changeMonth: true,
    dateFormat: dateFormat,
    numberOfMonths: 1,
    onSelect: function(dt, inst){
      var fromDt = $(this).datepicker("getDate");
      var nextSunday = new Date(fromDt.getTime());
      nextSunday.setDate(nextSunday.getDate() + 7 - fromDt.getDay());
());

      to.datepicker("option", "minDate", dt);
      to.datepicker("option", "maxDate", nextSunday);
    }
  });

  var to = $("#EndDate").datepicker({
    changeMonth: true,
    dateFormat: dateFormat,
    numberOfMonths: 1,
    onSelect: function(dt, inst){
      from.datepicker("option", "maxDate", dt);
    }
  });
});
</script>

Open in new window


I need to combine the two, or have a better way to do it. I just can't seem to get them to play together.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Leonidas Dosas
Distinguished Expert 2017

Commented:
Can you post and the HTML code?
Mike MillerSoftware Engineer

Author

Commented:
It's CHTML. What are you looking for specifically?
Software Engineer
Commented:
I commented everything out of one of the scripts and just started putting it back in piece by piece and this seems to work...

    <script>
var dateFormat = "mm/dd/yy";
$(document).ready(function(){
  var from = $(".start").datepicker({
    changeMonth: true,
   dateFormat: dateFormat,
    numberOfMonths: 1,
    onSelect: function(dt, inst){
      var fromDt = $(this).datepicker("getDate");
      var nextSunday = new Date();
      nextSunday.setDate(fromDt.getDate() + 7 - fromDt.getDay());

      to.datepicker("option", "minDate", dt);
      to.datepicker("option", "maxDate", nextSunday);
    }
  });

  var to = $(".end").datepicker({
    changeMonth: true,
    dateFormat: dateFormat,
    numberOfMonths: 1,
    //onSelect: function(dt, inst){
  //    from.datepicker("option", "maxDate", dt);
    //}
  });
});
    </script>
    <script>
        $(document).ready(function() {
            $('.datepicker').on('change', function () {
                var string1 = $('.start').val();
                var string2 = $('.end').val();
                if (string1 !== "" && string2 !== "") {
                    //do some validation to make sure they are properly formatted dates
                    //then...
                    var dateStart = new Date(string1);
                    var dateEnd = new Date(string2);
                    var days = parseInt((dateEnd - dateStart) / (24 * 3600 * 1000));
                    days = days + 1
                    var hours = days * 8;
                    if (days > 0) {
                        var ddl = $('#mySelect');
                        ddl.empty();
                        for (var i = 1; i <= hours; i++) {
                            var option = new Option(i, i);
                            ddl.append(option);
                        }
                    }
                }
            });
            });
    </script>

Open in new window

Mike MillerSoftware Engineer

Author

Commented:
Mine was the only one provided

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial