Day27 - 轻前端 Component - jQuery UI DatePicker

这篇要做的：把订单日期改用 jQuery UI DatePicker + vue component !

Case01

建立 jquery-ui-date-picker.js

• 把 jQuery UI DatePicker 放在这个 component 内 !

  const jquery_ui_date_picker = {
        template: `
            <input type="text" 
                v-bind:id="id"
                v-model="dom_value" />
        `,
        props: {
            id: String,
            date_format: String,
            modelValue: String,
        },
        setup(props, {emit}) {
  
            let dom = null;
  
            onMounted(() => {
                dom = $("#"+ props.id);
                dom.datepicker({
                    dateFormat: props.date_format || "yy-mm-dd",
                    onClose : function (dateText, inst) {
                        dom_value.value = dateText;
                    }
                });
            })
  
            const dom_value = computed({
                get: () => {
                    return props.modelValue?.split('T')[0];
                },
                set: (v) => {
                    if (v === "")
                    {
                        v = null;
                    }
  
                    emit('update:modelValue', v);
                },
            });
  
            return {
                dom_value,
            }
        },
    }
  

View

• 引用上述 component

  原本 vue 指定 mount 的地方上面加上 js script 的引用

  </script>
  <script src="/lib/jquery-ui-select-menu.js?20210608001"></script>
  <script src="/lib/jquery-ui-date-picker.js?20210608001"></script>
  <script>
      app.component("jquery-ui-select-menu", jquery_ui_select_menu);
      app.component("jquery-ui-date-picker", jquery_ui_date_picker);
  
      const vm = app.mount('#app');
  </script>
  

• 把订单日期改为以下语法

  <jquery-ui-date-picker
      v-model="vue_model.OrderDate"
      v-bind:id="'OrderDate'"
      v-bind:date_format="'yy-mm-dd'"
  ></jquery-ui-date-picker>
  

• vue

  • update_vue_model()
    • 将给定 vue_model 值的语法放回呼叫 update_vue_model() 的地方
    • 原本对订单日期的处理，就交给 component jquery-ui-date-picker 去处理
    • 删除 update_vue_model()

  const calculate = function () {
      CustomFetch.PostJson(calculate_url, vue_model.value)
                  .then(data => vue_model.value = data);
  }
  
  const submit_form = function() {
      CustomFetch.PostJson(post_url, vue_model.value)
                  .then(data => vue_model.value = data);
  }
  

这篇先到这里，下一篇来看看 下拉选单连动 + jQuery UI Selectmenu !