Date 日期

日期输入框

基本用法

<template>
    <dn-page>      
      <dn-form ref="formRef" v-bind="formOptions"></dn-form>            
    </dn-page>   
  </template>
  
<script lang="jsx">
import {ref,defineComponent} from "vue";
import {   useForm } from "@sdevnet/devnet-form";

const formRef = ref();
const formOptions = ref();
function createFormOptions() {
  const { buildFormOptions } = useForm();
  return buildFormOptions({
    columns: {
        fn5:{
        title:'日期',
        type:'date',
        form:{
          rules:[{required:true,message:'日期必填'}],
          col:{span:24},          
          props:{
            value:'@_currentdate'
          }          
        }
      },
      fn6:{
        title:'时间',
        type:'datetime',
        form:{
          col:{span:24},
          component:{
            editable:false
          },
          tooltip:'禁止输入',
          props:{
             value:'@_currentdatetime'
          }
        }
      },
      fn7:{
        title:'日期范围',
        type:'daterange',
        form:{
          col:{span:24},
          props:{
            value: ['@_currentmonthbegdate','@_currentmonthenddate'],           
            events:{
              onChange:(value)=>{
                console.log('outchange',value);
              }
            }
          }
        }
      },
      fn8:{
        title:'时间范围',
        type:'datetimerange',
        form:{
          col:{span:24}         
        }
      },
      fn9:{
        title:'年',
        type:'year',
        form:{
          col:{span:24}          
        }
      },
      fn10:{
        title:'月',
        type:'month',
        form:{
          col:{span:24}         
        }
      },
      fn11:{
        title:'星期',
        type:'week',
        form:{
          col:{span:24},
          component:{
            format:'YYYY-ww[周]',
            valueFormat:'YYYY-MM-DD', //这个只能是日期格式
          },
          props:{
            value:'@_currentdate'           
          }
        }
      },
      fn12:{
        title:'时间',
        type:'time',
        form:{
          col:{span:24},          
          props:{  
            value:'12:30:30'
          }
        }
      },
      fn13:{
        title:'月范围',
        type:'monthrange',
        form:{
          col:{span:24},          
          props:{ 
            value:['@_CURRENTYEARBEGMONTH','@_CURRENTYEARENDMONTH']
          }
        }
      }
    },
    form: {
        labelWidth: "120px"
    }
  });
}

function initFormOptions() { 
  formOptions.value = createFormOptions();
  formOptions.value.initData = { fid:1};
  return {
    formOptions,   
    formRef
  };
}

export default defineComponent({
  setup() {
    return {
      ...initFormOptions()
    };
  }
});
</script>

Date API

PropsName	Description	Type	Default
key	字段名称子组件column配置	json
└ title	标题	string
└ type	date datetime daterange datetimerange year month week time monthrange	string
└ form	表单栏位配置	json
└└ rules	验证规则，参考原生el配置	array
└└ col	el-col配置，参考原生组件	json
└└ component	原生组件属性	json
└└└ key	参考原生el组件
└└ props	组件属性	json
└└└ events	组件事件	json
└└└└ onChange	值change触发
└└└ slots	组件槽位，	json
└└└└ key	组件槽位，参考原生槽位
└└ tooltip	输入提示内容	string
└└ order	排序	number
└└ show	是否显示	boolean
└└ blank	是否空占位	boolean
└└ prefixRender	组件左边render
└└ suffixRender	组件右边render

Date 事件

Name	Description
原生事件	component下写事件，参考原生组件事件

Date Slots

Name	Description
key_[原生组件槽位名称]	原生槽位

Date Exposes

Name	Description
ctlRef	原生组件引用