components/DaterLarger.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
       <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
-        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateYear" class="input-number" size="small" v-model="date.year" :min="0" @keypress.enter.native.exact="$refs.dateMonth.focus" @keypress.shift.enter.native.exact="$refs.anotherDateSecond.focus" @focus="()=>$refs.dateYear.select()"></el-input-number></el-col><el-col :span="4"><span class="label">年</span></el-col></el-row></el-col>
-        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateMonth" class="input-number" size="small" v-model="date.month" :min="0" :max="11" @keypress.enter.native.exact="$refs.dateDay.focus" @keypress.shift.enter.native.exact="$refs.dateYear.focus" @focus="()=>$refs.dateMonth.select()"></el-input-number></el-col><el-col :span="4"><span class="label">月</span></el-col></el-row></el-col>
-        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateDay" class="input-number" size="small" v-model="date.day" :min="0" :max="30" @keypress.enter.native.exact="$refs.dateHour.focus" @keypress.shift.enter.native.exact="$refs.dateMonth.focus" @focus="()=>$refs.dateDay.select()"></el-input-number></el-col><el-col :span="4"><span class="label">日</span></el-col></el-row></el-col>
+        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateYear" class="input-number" size="small" v-model="date.year"  @keypress.enter.native.exact="$refs.dateMonth.focus" @keypress.shift.enter.native.exact="$refs.anotherDateSecond.focus" @focus="()=>$refs.dateYear.select()"></el-input-number></el-col><el-col :span="4"><span class="label">年</span></el-col></el-row></el-col>
+        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateMonth" class="input-number" size="small" v-model="date.month"   @keypress.enter.native.exact="$refs.dateDay.focus" @keypress.shift.enter.native.exact="$refs.dateYear.focus" @focus="()=>$refs.dateMonth.select()"></el-input-number></el-col><el-col :span="4"><span class="label">月</span></el-col></el-row></el-col>
+        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateDay" class="input-number" size="small" v-model="date.day"   @keypress.enter.native.exact="$refs.dateHour.focus" @keypress.shift.enter.native.exact="$refs.dateMonth.focus" @focus="()=>$refs.dateDay.select()"></el-input-number></el-col><el-col :span="4"><span class="label">日</span></el-col></el-row></el-col>
         <el-col :span="1"><span class="label">-</span></el-col>
-        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateHour" class="input-number" size="small" v-model="date.hour" :min="0" :max="23" @keypress.enter.native.exact="$refs.dateMinute.focus" @keypress.shift.enter.native.exact="$refs.dateDay.focus" @focus="()=>$refs.dateHour.select()"></el-input-number></el-col><el-col :span="4"><span class="label">时</span></el-col></el-row></el-col>
-        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateMinute" class="input-number" size="small" v-model="date.minute" :min="0" :max="59" @keypress.enter.native.exact="$refs.dateSecond.focus" @keypress.shift.enter.native.exact="$refs.dateHour.focus" @focus="()=>$refs.dateMinute.select()"></el-input-number></el-col><el-col :span="4"><span class="label">分</span></el-col></el-row></el-col>
-        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateSecond" class="input-number" size="small" v-model="date.second" :min="0" :max="59" @keypress.enter.native.exact="$refs.option.focus" @keypress.shift.enter.native.exact="$refs.dateMinute.focus" @focus="()=>$refs.dateSecond.select()"></el-input-number></el-col><el-col :span="4"><span class="label">秒</span></el-col></el-row></el-col>
+        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateHour" class="input-number" size="small" v-model="date.hour"   @keypress.enter.native.exact="$refs.dateMinute.focus" @keypress.shift.enter.native.exact="$refs.dateDay.focus" @focus="()=>$refs.dateHour.select()"></el-input-number></el-col><el-col :span="4"><span class="label">时</span></el-col></el-row></el-col>
+        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateMinute" class="input-number" size="small" v-model="date.minute"   @keypress.enter.native.exact="$refs.dateSecond.focus" @keypress.shift.enter.native.exact="$refs.dateHour.focus" @focus="()=>$refs.dateMinute.select()"></el-input-number></el-col><el-col :span="4"><span class="label">分</span></el-col></el-row></el-col>
+        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateSecond" class="input-number" size="small" v-model="date.second"   @keypress.enter.native.exact="$refs.option.focus" @keypress.shift.enter.native.exact="$refs.dateMinute.focus" @focus="()=>$refs.dateSecond.select()"></el-input-number></el-col><el-col :span="4"><span class="label">秒</span></el-col></el-row></el-col>
       </el-row>
       <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
         <el-col :lg="{span:2}" :span="3">
@@ -22,13 +22,13 @@
         </el-col>
       </el-row>
       <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
-        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateYear" class="input-number" size="small" v-model="anotherDate.year" :min="0" @keypress.enter.native.exact="$refs.anotherDateMonth.focus" @keypress.shift.enter.native.exact="$refs.dateSecond.focus" @focus="()=>$refs.anotherDateYear.select()"></el-input-number></el-col><el-col :span="4"><span class="label">年</span></el-col></el-row></el-col>
-        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateMonth" class="input-number" size="small" v-model="anotherDate.month" :min="0" :max="11" @keypress.enter.native.exact="$refs.anotherDateDay.focus" @keypress.shift.enter.native.exact="$refs.anotherDateYear.focus" @focus="()=>$refs.anotherDateMonth.select()"></el-input-number></el-col><el-col :span="4"><span class="label">月</span></el-col></el-row></el-col>
-        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateDay" class="input-number" size="small" v-model="anotherDate.day" :min="0" :max="30" @keypress.enter.native.exact="$refs.anotherDateHour.focus" @keypress.shift.enter.native.exact="$refs.anotherDateMonth.focus" @focus="()=>$refs.anotherDateDay.select()"></el-input-number></el-col><el-col :span="4"><span class="label">日</span></el-col></el-row></el-col>
+        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateYear" class="input-number" size="small" v-model="anotherDate.year"  @keypress.enter.native.exact="$refs.anotherDateMonth.focus" @keypress.shift.enter.native.exact="$refs.dateSecond.focus" @focus="()=>$refs.anotherDateYear.select()"></el-input-number></el-col><el-col :span="4"><span class="label">年</span></el-col></el-row></el-col>
+        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateMonth" class="input-number" size="small" v-model="anotherDate.month"   @keypress.enter.native.exact="$refs.anotherDateDay.focus" @keypress.shift.enter.native.exact="$refs.anotherDateYear.focus" @focus="()=>$refs.anotherDateMonth.select()"></el-input-number></el-col><el-col :span="4"><span class="label">月</span></el-col></el-row></el-col>
+        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateDay" class="input-number" size="small" v-model="anotherDate.day"   @keypress.enter.native.exact="$refs.anotherDateHour.focus" @keypress.shift.enter.native.exact="$refs.anotherDateMonth.focus" @focus="()=>$refs.anotherDateDay.select()"></el-input-number></el-col><el-col :span="4"><span class="label">日</span></el-col></el-row></el-col>
         <el-col :span="1"><span class="label">-</span></el-col>
-        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateHour" class="input-number" size="small" v-model="anotherDate.hour" :min="0" :max="23" @keypress.enter.native.exact="$refs.anotherDateMinute.focus" @keypress.shift.enter.native.exact="$refs.anotherDateDay.focus" @focus="()=>$refs.anotherDateHour.select()"></el-input-number></el-col><el-col :span="4"><span class="label">时</span></el-col></el-row></el-col>
-        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateMinute" class="input-number" size="small" v-model="anotherDate.minute" :min="0" :max="59" @keypress.enter.native.exact="$refs.anotherDateSecond.focus" @keypress.shift.enter.native.exact="$refs.anotherDateHour.focus" @focus="()=>$refs.anotherDateMinute.select()"></el-input-number></el-col><el-col :span="4"><span class="label">分</span></el-col></el-row></el-col>
-        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateSecond" class="input-number" size="small" v-model="anotherDate.second" :min="0" :max="59" @keypress.enter.native.exact="calculate" @keypress.shift.enter.native.exact="$refs.anotherDateMinute.focus" @focus="()=>$refs.anotherDateSecond.select()"></el-input-number></el-col><el-col :span="4"><span class="label">秒</span></el-col></el-row></el-col>
+        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateHour" class="input-number" size="small" v-model="anotherDate.hour"   @keypress.enter.native.exact="$refs.anotherDateMinute.focus" @keypress.shift.enter.native.exact="$refs.anotherDateDay.focus" @focus="()=>$refs.anotherDateHour.select()"></el-input-number></el-col><el-col :span="4"><span class="label">时</span></el-col></el-row></el-col>
+        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateMinute" class="input-number" size="small" v-model="anotherDate.minute"   @keypress.enter.native.exact="$refs.anotherDateSecond.focus" @keypress.shift.enter.native.exact="$refs.anotherDateHour.focus" @focus="()=>$refs.anotherDateMinute.select()"></el-input-number></el-col><el-col :span="4"><span class="label">分</span></el-col></el-row></el-col>
+        <el-col :lg="{span:3}" :span="4"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateSecond" class="input-number" size="small" v-model="anotherDate.second"   @keypress.enter.native.exact="calculate" @keypress.shift.enter.native.exact="$refs.anotherDateMinute.focus" @focus="()=>$refs.anotherDateSecond.select()"></el-input-number></el-col><el-col :span="4"><span class="label">秒</span></el-col></el-row></el-col>
       </el-row>
       <el-row class="row" type="flex" :gutter="20" justify="center" align="middle">
         <el-col :span="3" style="text-align: center;">

components/DaterSmaller.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
       <el-row class="row" type="flex" :gutter="10" justify="center" align="middle">
-        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateYear" class="input-number" size="small" v-model="date.year" :min="0" @keypress.enter.native.exact="$refs.dateMonth.focus" @keypress.shift.enter.native.exact="$refs.anotherDateSecond.focus" @focus="()=>$refs.dateYear.select()"></el-input-number></el-col><el-col :span="4"><span class="label">年</span></el-col></el-row></el-col>
-        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateMonth" class="input-number" size="small" v-model="date.month" :min="0" :max="11" @keypress.enter.native.exact="$refs.dateDay.focus" @keypress.shift.enter.native.exact="$refs.dateYear.focus" @focus="()=>$refs.dateMonth.select()"></el-input-number></el-col><el-col :span="4"><span class="label">月</span></el-col></el-row></el-col>
-        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateDay" class="input-number" size="small" v-model="date.day" :min="0" :max="30" @keypress.enter.native.exact="$refs.dateHour.focus" @keypress.shift.enter.native.exact="$refs.dateMonth.focus" @focus="()=>$refs.dateDay.select()"></el-input-number></el-col><el-col :span="4"><span class="label">日</span></el-col></el-row></el-col>
+        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateYear" class="input-number" size="small" v-model="date.year"  @keypress.enter.native.exact="$refs.dateMonth.focus" @keypress.shift.enter.native.exact="$refs.anotherDateSecond.focus" @focus="()=>$refs.dateYear.select()"></el-input-number></el-col><el-col :span="4"><span class="label">年</span></el-col></el-row></el-col>
+        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateMonth" class="input-number" size="small" v-model="date.month"   @keypress.enter.native.exact="$refs.dateDay.focus" @keypress.shift.enter.native.exact="$refs.dateYear.focus" @focus="()=>$refs.dateMonth.select()"></el-input-number></el-col><el-col :span="4"><span class="label">月</span></el-col></el-row></el-col>
+        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateDay" class="input-number" size="small" v-model="date.day"   @keypress.enter.native.exact="$refs.dateHour.focus" @keypress.shift.enter.native.exact="$refs.dateMonth.focus" @focus="()=>$refs.dateDay.select()"></el-input-number></el-col><el-col :span="4"><span class="label">日</span></el-col></el-row></el-col>
       </el-row>
       <el-row class="row" type="flex" :gutter="10" justify="center" align="middle">
-        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateHour" class="input-number" size="small" v-model="date.hour" :min="0" :max="23" @keypress.enter.native.exact="$refs.dateMinute.focus" @keypress.shift.enter.native.exact="$refs.dateDay.focus" @focus="()=>$refs.dateHour.select()"></el-input-number></el-col><el-col :span="4"><span class="label">时</span></el-col></el-row></el-col>
-        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateMinute" class="input-number" size="small" v-model="date.minute" :min="0" :max="59" @keypress.enter.native.exact="$refs.dateSecond.focus" @keypress.shift.enter.native.exact="$refs.dateHour.focus" @focus="()=>$refs.dateMinute.select()"></el-input-number></el-col><el-col :span="4"><span class="label">分</span></el-col></el-row></el-col>
-        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateSecond" class="input-number" size="small" v-model="date.second" :min="0" :max="59" @keypress.enter.native.exact="$refs.option.focus" @keypress.shift.enter.native.exact="$refs.dateMinute.focus" @focus="()=>$refs.dateSecond.select()"></el-input-number></el-col><el-col :span="4"><span class="label">秒</span></el-col></el-row></el-col>
+        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateHour" class="input-number" size="small" v-model="date.hour"   @keypress.enter.native.exact="$refs.dateMinute.focus" @keypress.shift.enter.native.exact="$refs.dateDay.focus" @focus="()=>$refs.dateHour.select()"></el-input-number></el-col><el-col :span="4"><span class="label">时</span></el-col></el-row></el-col>
+        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateMinute" class="input-number" size="small" v-model="date.minute"   @keypress.enter.native.exact="$refs.dateSecond.focus" @keypress.shift.enter.native.exact="$refs.dateHour.focus" @focus="()=>$refs.dateMinute.select()"></el-input-number></el-col><el-col :span="4"><span class="label">分</span></el-col></el-row></el-col>
+        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="dateSecond" class="input-number" size="small" v-model="date.second"   @keypress.enter.native.exact="$refs.option.focus" @keypress.shift.enter.native.exact="$refs.dateMinute.focus" @focus="()=>$refs.dateSecond.select()"></el-input-number></el-col><el-col :span="4"><span class="label">秒</span></el-col></el-row></el-col>
       </el-row>
       <el-row class="row" type="flex" :gutter="10" justify="center" align="middle">
         <el-col :span="7">
@@ -23,14 +23,14 @@
         </el-col>
       </el-row>
       <el-row class="row" type="flex" :gutter="10" justify="center" align="middle">
-        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateYear" class="input-number" size="small" v-model="anotherDate.year" :min="0" @keypress.enter.native.exact="$refs.anotherDateMonth.focus" @keypress.shift.enter.native.exact="$refs.dateSecond.focus" @focus="()=>$refs.anotherDateYear.select()"></el-input-number></el-col><el-col :span="4"><span class="label">年</span></el-col></el-row></el-col>
-        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateMonth" class="input-number" size="small" v-model="anotherDate.month" :min="0" :max="11" @keypress.enter.native.exact="$refs.anotherDateDay.focus" @keypress.shift.enter.native.exact="$refs.anotherDateYear.focus" @focus="()=>$refs.anotherDateMonth.select()"></el-input-number></el-col><el-col :span="4"><span class="label">月</span></el-col></el-row></el-col>
-        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateDay" class="input-number" size="small" v-model="anotherDate.day" :min="0" :max="30" @keypress.enter.native.exact="$refs.anotherDateHour.focus" @keypress.shift.enter.native.exact="$refs.anotherDateMonth.focus" @focus="()=>$refs.anotherDateDay.select()"></el-input-number></el-col><el-col :span="4"><span class="label">日</span></el-col></el-row></el-col>
+        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateYear" class="input-number" size="small" v-model="anotherDate.year"  @keypress.enter.native.exact="$refs.anotherDateMonth.focus" @keypress.shift.enter.native.exact="$refs.dateSecond.focus" @focus="()=>$refs.anotherDateYear.select()"></el-input-number></el-col><el-col :span="4"><span class="label">年</span></el-col></el-row></el-col>
+        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateMonth" class="input-number" size="small" v-model="anotherDate.month"   @keypress.enter.native.exact="$refs.anotherDateDay.focus" @keypress.shift.enter.native.exact="$refs.anotherDateYear.focus" @focus="()=>$refs.anotherDateMonth.select()"></el-input-number></el-col><el-col :span="4"><span class="label">月</span></el-col></el-row></el-col>
+        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateDay" class="input-number" size="small" v-model="anotherDate.day"   @keypress.enter.native.exact="$refs.anotherDateHour.focus" @keypress.shift.enter.native.exact="$refs.anotherDateMonth.focus" @focus="()=>$refs.anotherDateDay.select()"></el-input-number></el-col><el-col :span="4"><span class="label">日</span></el-col></el-row></el-col>
       </el-row>
       <el-row class="row" type="flex" :gutter="10" justify="center" align="middle">
-        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateHour" class="input-number" size="small" v-model="anotherDate.hour" :min="0" :max="23" @keypress.enter.native.exact="$refs.anotherDateMinute.focus" @keypress.shift.enter.native.exact="$refs.anotherDateDay.focus" @focus="()=>$refs.anotherDateHour.select()"></el-input-number></el-col><el-col :span="4"><span class="label">时</span></el-col></el-row></el-col>
-        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateMinute" class="input-number" size="small" v-model="anotherDate.minute" :min="0" :max="59" @keypress.enter.native.exact="$refs.anotherDateSecond.focus" @keypress.shift.enter.native.exact="$refs.anotherDateHour.focus" @focus="()=>$refs.anotherDateMinute.select()"></el-input-number></el-col><el-col :span="4"><span class="label">分</span></el-col></el-row></el-col>
-        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateSecond" class="input-number" size="small" v-model="anotherDate.second" :min="0" :max="59" @keypress.enter.native.exact="calculate" @keypress.shift.enter.native.exact="$refs.anotherDateMinute.focus" @focus="()=>$refs.anotherDateSecond.select()"></el-input-number></el-col><el-col :span="4"><span class="label">秒</span></el-col></el-row></el-col>
+        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateHour" class="input-number" size="small" v-model="anotherDate.hour"   @keypress.enter.native.exact="$refs.anotherDateMinute.focus" @keypress.shift.enter.native.exact="$refs.anotherDateDay.focus" @focus="()=>$refs.anotherDateHour.select()"></el-input-number></el-col><el-col :span="4"><span class="label">时</span></el-col></el-row></el-col>
+        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateMinute" class="input-number" size="small" v-model="anotherDate.minute"   @keypress.enter.native.exact="$refs.anotherDateSecond.focus" @keypress.shift.enter.native.exact="$refs.anotherDateHour.focus" @focus="()=>$refs.anotherDateMinute.select()"></el-input-number></el-col><el-col :span="4"><span class="label">分</span></el-col></el-row></el-col>
+        <el-col :span="8"><el-row type="flex" align="middle" ><el-col :span="20"><el-input-number ref="anotherDateSecond" class="input-number" size="small" v-model="anotherDate.second"   @keypress.enter.native.exact="calculate" @keypress.shift.enter.native.exact="$refs.anotherDateMinute.focus" @focus="()=>$refs.anotherDateSecond.select()"></el-input-number></el-col><el-col :span="4"><span class="label">秒</span></el-col></el-row></el-col>
       </el-row>
       <el-row class="row" type="flex" :gutter="10" justify="center" align="middle">
         <el-col :span="6" style="text-align: center;">