Question

这是我的问题，日期带有“ @postConstruct”格式，但是我想将其设置为“ <p:dataTable id="patients" rendered="#{viewBills.visible}" editable="true" value="#{viewBills.getPatientBills}" var="patient" style="margin-bottom:20px"> <p:ajax event="rowEdit" Listener="#{viewBills.updateEdited}" update="@form"/> <p:ajax event="rowEditCancel" Listener="#{viewBills.onRowCancel}" update="@form"/> <p:column headerText="Name"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.patName}" /> </f:facet> <f:facet name="input"> <p:inputText id="modelInput" value="#{patient.patName}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Department"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.department}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{patient.department}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Amount"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.amount}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{patient.amount}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Implant"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.implant}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{patient.implant}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Ceramic Lab"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.ceramicLab}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{patient.ceramicLab}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Comments"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.comments}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{patient.comments}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Practical Charges"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.practicalCharges}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{patient.practicalCharges}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Material Charges"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.materialCharges}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{patient.materialCharges}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Fixed Ortho"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.fixedOrtho}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{patient.fixedOrtho}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="MF Kit"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.mfKit}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{patient.mfKit}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Army No"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.armyNo}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{patient.armyNo}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Unit"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.unit}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{patient.unit}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Armed Forces"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{patient.armedForces}" /> </f:facet> <f:facet name="input"> <p:inputText value="#{patient.armedForces}" style="width:100%" /> </f:facet> </p:cellEditor> </p:column> <p:column headerText="Options" style="width:50px"> <p:rowEditor /> </p:column> </p:dataTable>”。但是它以数组的形式出现，并且具有很多字段。我的问题是，如何使用vuejs覆盖值？

@ManagedBean(name = "viewBills")
@ViewScoped
public class ManageViewBIllsBean {

    public String mrNo;

    public boolean visible = false;

    public ArrayList<Patient> getPatientBills = new ArrayList<>();

    public ArrayList<Patient> getAllPatientBills = new ArrayList<>();

    public ArrayList<Patient> search() {
        getPatientBills = DatabaseHandler.searchBillByMrNo(mrNo);
        if (!getPatientBills.isEmpty()) {
            setVisible(true);
            return getPatientBills;
        } else {
            setVisible(false);
            return getPatientBills;
        }
    }

    @PostConstruct
    public void init() {
        getGetPatientBills();
        setVisible(true);
    }

    public ArrayList<Patient> searchAllBills() {
        return DatabaseHandler.searchAllBills();
    }

    public void executeViewAllBills() throws IOException {

        ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext();

        ec.redirect(ec.getRequestContextPath() + "/viewAllBills.xhtml");

    }

    public void executeViewBillsByMRNo() throws IOException {

        ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext();

        ec.redirect(ec.getRequestContextPath() + "/viewBillsByMRNo.xhtml");

    }

    public void updateEdited(RowEditEvent event) {
        System.out.println(" i am in edit");
        FacesMessage msg = new FacesMessage("Car Edited", ((Patient) event.getObject()).getPatName());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void onRowCancel(RowEditEvent event) {
        FacesMessage msg = new FacesMessage("Edit Cancelled", ((Patient) event.getObject()).getPatName());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public String getMrNo() {
        return mrNo;
    }

    public void setMrNo(String mrNo) {
        this.mrNo = mrNo;
    }

    public ArrayList<Patient> getGetPatientBills() {
        return getPatientBills;
    }

    public ArrayList<Patient> getGetAllPatientBills() {
        return getAllPatientBills;
    }

    public boolean isVisible() {
        return visible;
    }

    public void setVisible(boolean visible) {
        this.visible = visible;
    }

}

9999-99-99 00:00:00

我尝试使用计算方法，但是当我手动设置值时，它会调用此方法。然后我尝试了这个，它起作用了。但，这是一种有效的方法吗？

9999-99-99

new Vue({
  el: '#app',
  data: () => ({
    fields: [{
        "id": 1,
        "date": "2019-02-05",
      },
      {
        "id": 2,
        "date": "2018-12-01 00:00:00",

      },
      {
        "id": 3,
        "date": "2017-02-05 00:00:00",

      }
    ]
  }),
});

第二种方法运行两次，因为他必须重新渲染，所以这不是一个好主意。

Answer 1

https://jsfiddle.net/we8o3p7r/2/

function makeCorrectDate(str) {
    return new Date(str).toISOString().split('T')[0]
}

new Vue({
  el: '#app',
  data: () => ({
    fields: [{
        "id": 1,
        "date": makeCorrectDate("2019-02-05"),
      },
      {
        "id": 2,
        "date": makeCorrectDate("2018-12-01 00:00:00"),

      },
      {
        "id": 3,
        "date": makeCorrectDate("2017-02-05 00:00:00"),
      }
    ]
  }),
});

另一种方法：

<div id="app">
  <template>
    <div v-for="field in fields" :key="field.id">
      <input
        :value="makeCorrectDate(field.date)"
        @input="field.date = $event.target.value"
        type="date"
      />
      <div>{{ field.date }}</div>
    </div>
  </template>
</div>

Answer 2

为此，我将过滤器与momentjs一起使用：

new Vue({
  el: '#app',

  data: () => ({
    fields: [{
        "id": 1,
        "date": "2019-02-05"
      },
      {
        "id": 2,
        "date": "2018-12-01 00:00:00"
      },
      {
        "id": 3,
        "date": "2017-02-05 00:00:00"
      }
    ]
  }),

  filters: {
    formatDate(val) {
      return moment(val).format('YYYY-MM-DD');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(value, key) in fields" :key="key">
    <input v-model="fields[key].date" type="date" /> {{value.date | formatDate}}
  </div>
</div>

如何覆盖来自vuejs中v模型的type =“ date”输入的值？

2 个答案: