Hey Rick,

I'm trying to get HTMLDateTextBox to work with a date property in my vue model and not having much success.

I've tried:

<%= HtmlDateTextBox('dduedate',poBill.dduedate,'v-model="bill.dduedate"',"") %>

and

<%= HtmlDateTextBox('dduedate',poBill.dduedate,'v-bind="bill.dduedate"',"") %>

Both of those work for the initial binding, but changes are not reflected in the model. The same syntax does work with HtmlDropDown.

I've also tried wiring it up manually to any event that might make sense in the mounted event like this:

mounted() {
$("#dduedate").datetimepicker().on("changeDate", ($event) => {
 console.log("changeDate")
 this.bill.dduedate = $('#dduedate').val()
});
$("#dduedate").datetimepicker().on("changed", ($event) => {
  console.log("changed")
  this.bill.dduedate = $('#dduedate').val()
});
$("#dduedate").datetimepicker().on("updated", ($event) => {
  console.log("updated")
  this.bill.dduedate = $('#dduedate').val()
});
$("#dduedate_field").datetimepicker().on("changeDate", ($event) => {
  console.log("changeDate")
  this.bill.dduedate = $('#dduedate_field').val()
});
$("#dduedate_field").datetimepicker().on("changed", ($event) => {
  console.log("changed")
  this.bill.dduedate = $('#dduedate_field').val()
});
$("#dduedate_field").datetimepicker().on("updated", ($event) => {
  console.log("updated")
  this.bill.dduedate = $('#dduedate_field').val()
});
}

And I'm sure this is just my ignorance on vuejs, but in my save method I am trying to just use Jquery to retrieve references to the controls butt neither $('dduedate') nor $('dduedate_field') give me back anything. Since the initial binding works, just be able to do that would meet my needs.

Thanks!

Mike

Have you made sure that the client model is properly set up? The inbound binding works most likely because it's a server binding - the value is initially set from the server. IOW, is bill.dduedate actually valid and does that value actually update when it gets set on the client? You can check by dumping it as a text field into the page {bill.dduedate}.

The other issue here may be that the value is a date and perhaps there's a formatting issue? Not really sure offhand how date binding works vue. Maybe the date needs to be turned into a string first? Then when posting you can fix up the date? Worth a try.

+++ Rick ---

The server just uses a blank record. In the initialize event of the vue element I retrieve a record from the WC backend and assign it to a property of the model. The binding picks up at that point and renders properly. At that point in time, for a brief instant, the date and time are displayed in long date format. Then I call a method that looks like this:

formatDates: function() {
   setTimeout(function() { 
     $("#dinvdate,#dduedate").not("[type=date]").datetimepicker({
       format: "MM/DD/YYYY",
        keyBinds: { "delete": null }
     });
   },400);  
}

If I don't call the formatDates method then the date controls do not have the datetimepicker functionality available to them, but manual edits to the textbox are reflected in the model.

If I do call the formatDates method then the datepicker functionality is available for the textboxes, but choosing a date from it doesn't update the model, even though the control is updated.

Manually editing the date textboxes, always works and updates, the model but if only the date part is displayed, manual edits convert it to a string.

So at any rate, given the way I'm doing the binding, I really don't need HTMLDateTextBox anyway. I just plugged in this component: https://github.com/ankurk91/vue-bootstrap-datetimepicker and it's working fine, so I'll just leave that here for anyone else that runs into this.

Thanks Mike that's helpful...

I've used Vue quite a bit in a few apps but thankfully did not have to deal with date inputs so far...

Ran into similar issue with an Autocomplete control though.

+++ Rick ---