0

I have 3 Datepicker fields which I'd like to update. For example: I pick todays Date and in the second field should show up the last day of the month but 3 months earlier.

I did that with JavaScript ID's but now I have to do it with knockout

I got these 3 test fields

<div id="someTest">
  <div>expirationDate
    <div class="input-col input-col-riskdetails input-col-date">
      <input data-bind="value: expirationDate, event: {change: expirationDateChanged}" type="datetime">
    </div>
  </div>

  <div>latestNoticeScheduleDate
    <div class="input-col input-col-riskdetails input-col-date">
      <input data-bind="value: latestNoticeScheduleDate" type="datetime">
    </div>
  </div>

  <div>earlyExchangeDate
    <div class="input-col input-col-riskdetails input-col-date">
      <input data-bind="value: earlyExchangeDate" type="datetime">
    </div>
  </div>
</div>

They are all bound like this.

self.expirationDate = ko.observable("");
self.latestNoticeScheduleDate = ko.observable("");
self.earlyExchangeDate = ko.observable("");

self.expirationDateChanged = function () {
    //do the calculation and put the result in the fields
}

And here is the logic from the old function. How is it possible to transfer that into knockout?

    $("#expirationDateDefault").change(function() {
  // Edit after 10 digits
  if ($("#expirationDateDefault").val().length === 10) {
    // only add date if other fields are empty
    if ($("#latestNoticeScheduleDateDefault").val() === '') {
      var sk = $("#expirationDateDefault").datepicker('getDate');

      // Definition is: Current selection minus 3 months
      // Attention: Datepicker is zerobased
      sk = new Date(sk.getFullYear(), (sk.getMonth() + 1) - 3, 0);
      // Set new date
      $("#latestNoticeScheduleDateDefault").datepicker('update', sk);

      var fa = $("#expirationDateDefault").datepicker('getDate');
      // Definition is: Current selection plus one day
      fa = new Date(fa.getFullYear(), fa.getMonth(), fa.getDate() + 1);
      // Set new date
      $('#earlyExchangeDateDefault').datepicker('update', fa);
    }
  }
});

The Datepicker is bound as the following

// DatePicker Binding
    BindDatePicker($("body"));

// Date-Picker
function BindDatePicker(context) {
    // Datepicker init
    $('input[type=datetime]', $(context)).datepicker({
        format: "dd.mm.yyyy",
        language: "de",
        calendarWeeks: true,
        autoclose: true,
        todayHighlight: true,
        todayBtn: "linked",
        onClose: this,
        orientation: "auto right"
    });

    $('input[type=datetime]', $(context)).attr("autocomplete", "off");
}
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
loonybin
  • 65
  • 1
  • 14
  • You probably want a custom binding handler for the datepickers. If it's Bootstrap datepicker, [see here](https://stackoverflow.com/a/11122688/392102). If it's jQuery UI, [maybe this old answer](https://stackoverflow.com/a/13630307/392102). – Roy J Sep 27 '17 at 16:50
  • I got the first link you postet allready for my birthDate field. Is it possible to have multiple custom bindings for the datepicker? – loonybin Sep 28 '17 at 06:55
  • No. The custom binding should replace your `BindDatePicker`, though. If the handler you have doesn't do what you need it to do, you'll need to write your own, possibly by wrapping the existing one. See [section 3 here](http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html). – Roy J Sep 28 '17 at 10:30

0 Answers0