精华内容
下载资源
问答
  • <input type="text" placeholder="请选择开始日期" id="startDate"> <script src="static/layui/layui.js"></script> layui.use('laydate', function(){ var laydate = layui.laydate; //时间选择器 ...

    先上效果图:

     

    咱们这里 就用本地html演示,在项目里的话,导入正确路径即可

    本地构建目录:

    第一步:

    使用lyaui当然需要下载layui组件

    官网下载即可,点击这里

    下载完成后,只需要layui文件夹即可,放到自己的项目中。

    第二步:

    下载layDate控件

    点击这里,官网下载

    完成后,只需要laydate文件夹即可。

    第三步:index.html(演示)

    按照文件目录 建立好项目目录。自己的项目话,引用对文件路径就ok了。

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>layDate日期与时间组件的使用</title>
      
        <link rel="stylesheet" href="static/laydate/theme/default/laydate.css" media="all">
    	<link rel="stylesheet" href="static/layui/layui.css">
    </head>
    <body>
    <input type="text" placeholder="请选择开始日期" id="startDate">
    
    
    <script src="static/layui/layui.js"></script>
    <script>
        layui.use('laydate', function(){
            var laydate = layui.laydate;
    
    
            //时间选择器
            laydate.render({
                elem: '#startDate'
                ,type: 'datetime'
            });
    
        });
    </script>
    
    
        <script type="text/javascript" src="static/laydate/laydate.js"></script>
        <script type="text/javascript" src="static/jquery.js"></script>
    </body>
    </html>

    完成后,双击打开index.

    最终效果:

    快加入自己的项目中使用吧!!!                          

                                                                                                                                                                       (小白笔记,不喜勿喷)

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • Input输入框日期控件

    千次阅读 2019-10-03 03:41:26
    案例 https://pan.baidu.com/s/1i6BNLcT 密码:p77m 转载于:https://www.cnblogs.com/chenlove/p/8424155.html

    案例

    https://pan.baidu.com/s/1i6BNLcT   密码:p77m

    转载于:https://www.cnblogs.com/chenlove/p/8424155.html

    展开全文
  • Input 输入框

    2020-06-25 05:24:13
    Input 输入框基础用法禁用状态可清空带 icon 的输入框 官方原文地址:Element Input 输入框 通过鼠标或键盘输入字符 基础用法 <el-input v-model="input" placeholder="请输入内容"></el-input> <...


    官方原文地址: Element Input 输入框

    通过鼠标或键盘输入字符

    基础用法

    在这里插入图片描述

    <el-input v-model="input" placeholder="请输入内容"></el-input>
    
    <script>
    export default {
      data() {
        return {
          input: ''
        }
      }
    }
    </script>
    

    禁用状态

    在这里插入图片描述

    通过disabled属性指定是否禁用input组件
    
    <el-input
      placeholder="请输入内容"
      v-model="input1"
      :disabled="true">
    </el-input>
    
    <script>
    export default {
      data() {
        return {
          input1: ''
        }
      }
    }
    </script>
    

    可清空

    在这里插入图片描述

    使用clearable属性即可得到一个可清空的输入框

    <el-input
      placeholder="请输入内容"
      v-model="input10"
      clearable>
    </el-input>
    
    <script>
      export default {
        data() {
          return {
            input10: ''
          }
        }
      }
    </script>
    

    带 icon 的输入框

    带有图标标记输入类型
    在这里插入图片描述
    可以通过 prefix-iconsuffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。

    <div class="demo-input-suffix">
      属性方式:
      <el-input
        placeholder="请选择日期"
        suffix-icon="el-icon-date"
        v-model="input2">
      </el-input>
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="input21">
      </el-input>
    </div>
    <div class="demo-input-suffix">
      slot 方式:
      <el-input
        placeholder="请选择日期"
        v-model="input22">
        <i slot="suffix" class="el-input__icon el-icon-date"></i>
      </el-input>
      <el-input
        placeholder="请输入内容"
        v-model="input23">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    
    <script>
    export default {
      data() {
        return {
          input2: '',
          input21: '',
          input22: '',
          input23: ''
        }
      }
    }
    </script>
    

    文本域

    用于输入多行文本信息,通过将type属性的值指定为textarea
    在这里插入图片描述
    文本域高度可通过 rows 属性控制

    <el-input
      type="textarea"
      :rows="2"
      placeholder="请输入内容"
      v-model="textarea">
    </el-input>
    
    <script>
    export default {
      data() {
        return {
          textarea: ''
        }
      }
    }
    </script>
    

    可自适应文本高度的文本域

    通过设置autosize属性可以使得文本域的高度能够根据文本内容自动进行调整,并且autosize还可以设定为一个对象,指定最小行数和最大行数。
    在这里插入图片描述

    <el-input
      type="textarea"
      autosize
      placeholder="请输入内容"
      v-model="textarea1">
    </el-input>
    <div style="margin: 20px 0;"></div>
    <el-input
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 4}"
      placeholder="请输入内容"
      v-model="textarea2">
    </el-input>
    
    <script>
    export default {
      data() {
        return {
          textarea1: '',
          textarea2: ''
        }
      }
    }
    </script>
    

    复合型输入框

    可前置或后置元素,一般为标签或按钮
    在这里插入图片描述

    可通过slot来指定在input中前置或后置内容
    
    <div>
      <el-input placeholder="请输入内容" v-model="input3">
        <template slot="prepend">Http://</template>
      </el-input>
    </div>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input4">
        <template slot="append">.com</template>
      </el-input>
    </div>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <style>
      .el-select .el-input {
        width: 130px;
      }
      .input-with-select .el-input-group__prepend {
        background-color: #fff;
      }
    </style>
    <script>
    export default {
      data() {
        return {
          input3: '',
          input4: '',
          input5: '',
          select: ''
        }
      }
    }
    </script>
    

    尺寸

    在这里插入图片描述

    可通过 **size** 属性指定输入框的尺寸,除了默认的大小外,还提供了 large、small 和 mini 三种尺寸。
    
    <div class="demo-input-size">
      <el-input
        placeholder="请输入内容"
        suffix-icon="el-icon-date"
        v-model="input6">
      </el-input>
      <el-input
        size="medium"
        placeholder="请输入内容"
        suffix-icon="el-icon-date"
        v-model="input7">
      </el-input>
      <el-input
        size="small"
        placeholder="请输入内容"
        suffix-icon="el-icon-date"
        v-model="input8">
      </el-input>
      <el-input
        size="mini"
        placeholder="请输入内容"
        suffix-icon="el-icon-date"
        v-model="input9">
      </el-input>
    </div>
    
    <script>
    export default {
      data() {
        return {
          input6: '',
          input7: '',
          input8: '',
          input9: ''
        }
      }
    }
    </script>
    

    带输入建议

    根据输入内容提供对应的输入建议
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    autocomplete 是一个可带输入建议的输入框组件,fetch-suggestions 是一个返回输入建议的方法属性,如 querySearch(queryString, cb),在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

    <el-row class="demo-autocomplete">
      <el-col :span="12">
        <div class="sub-title">激活即列出输入建议</div>
        <el-autocomplete
          class="inline-input"
          v-model="state1"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        ></el-autocomplete>
      </el-col>
      <el-col :span="12">
        <div class="sub-title">输入后匹配输入建议</div>
        <el-autocomplete
          class="inline-input"
          v-model="state2"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
      </el-col>
    </el-row>
    <script>
      export default {
        data() {
          return {
            restaurants: [],
            state1: '',
            state2: ''
          };
        },
        methods: {
          querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          },
          createFilter(queryString) {
            return (restaurant) => {
              return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
          },
          loadAll() {
            return [
              { "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },
              { "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },
              { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
              { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
              { "value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
              { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
              { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
              { "value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号" },
              { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
              { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
              { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
              { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
              { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F" },
              { "value": "浮生若茶(凌空soho店)", "address": "上海长宁区金钟路968号9号楼地下一层" },
              { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
              { "value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路" },
              { "value": "快乐柠檬(神州智慧店)", "address": "上海市长宁区天山西路567号1层R117号店铺" },
              { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
              { "value": "猫山王(西郊百联店)", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
              { "value": "枪会山", "address": "上海市普陀区棕榈路" },
              { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
              { "value": "钱记", "address": "上海市长宁区天山西路" },
              { "value": "壹杯加", "address": "上海市长宁区通协路" },
              { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元" },
              { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
              { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
              { "value": "鲜果榨汁(金沙江路和美广店)", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
              { "value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号" },
              { "value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号" },
              { "value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号" },
              { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
              { "value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号" },
              { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
              { "value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1" },
              { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
              { "value": "饭典*新简餐(凌空SOHO店)", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
              { "value": "焦耳·川式快餐(金钟路店)", "address": "上海市金钟路633号地下一层甲部" },
              { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
              { "value": "浏阳蒸菜", "address": "天山西路430号" },
              { "value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路" },
              { "value": "樱花食堂(凌空店)", "address": "上海市长宁区金钟路968号15楼15-105室" },
              { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
              { "value": "福荣祥烧腊(平溪路店)", "address": "上海市长宁区协和路福泉路255弄57-73号" },
              { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
              { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
              { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
              { "value": "阳阳麻辣烫", "address": "天山西路389号" },
              { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
            ];
          },
          handleSelect(item) {
            console.log(item);
          }
        },
        mounted() {
          this.restaurants = this.loadAll();
        }
      }
    </script>
    

    自定义模板

    可自定义输入建议的显示
    在这里插入图片描述

    使用scoped slot自定义输入建议的模板。该 scope 的参数为item,表示当前输入建议对象。

    <el-autocomplete
      popper-class="my-autocomplete"
      v-model="state3"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect">
      <i
        class="el-icon-edit el-input__icon"
        slot="suffix"
        @click="handleIconClick">
      </i>
      <template slot-scope="props">
        <div class="name">{{ props.item.value }}</div>
        <span class="addr">{{ props.item.address }}</span>
      </template>
    </el-autocomplete>
    
    <style>
    .my-autocomplete {
      li {
        line-height: normal;
        padding: 7px;
    
        .name {
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .addr {
          font-size: 12px;
          color: #b4b4b4;
        }
    
        .highlighted .addr {
          color: #ddd;
        }
      }
    }
    </style>
    
    <script>
      export default {
        data() {
          return {
            restaurants: [],
            state3: ''
          };
        },
        methods: {
          querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          },
          createFilter(queryString) {
            return (restaurant) => {
              return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
          },
          loadAll() {
            return [
              { "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },
              { "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },
              { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
              { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
              { "value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
              { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
              { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
              { "value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号" },
              { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
              { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
              { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
              { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
              { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F" },
              { "value": "浮生若茶(凌空soho店)", "address": "上海长宁区金钟路968号9号楼地下一层" },
              { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
              { "value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路" },
              { "value": "快乐柠檬(神州智慧店)", "address": "上海市长宁区天山西路567号1层R117号店铺" },
              { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
              { "value": "猫山王(西郊百联店)", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
              { "value": "枪会山", "address": "上海市普陀区棕榈路" },
              { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
              { "value": "钱记", "address": "上海市长宁区天山西路" },
              { "value": "壹杯加", "address": "上海市长宁区通协路" },
              { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元" },
              { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
              { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
              { "value": "鲜果榨汁(金沙江路和美广店)", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
              { "value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号" },
              { "value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号" },
              { "value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号" },
              { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
              { "value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号" },
              { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
              { "value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1" },
              { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
              { "value": "饭典*新简餐(凌空SOHO店)", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
              { "value": "焦耳·川式快餐(金钟路店)", "address": "上海市金钟路633号地下一层甲部" },
              { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
              { "value": "浏阳蒸菜", "address": "天山西路430号" },
              { "value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路" },
              { "value": "樱花食堂(凌空店)", "address": "上海市长宁区金钟路968号15楼15-105室" },
              { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
              { "value": "福荣祥烧腊(平溪路店)", "address": "上海市长宁区协和路福泉路255弄57-73号" },
              { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
              { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
              { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
              { "value": "阳阳麻辣烫", "address": "天山西路389号" },
              { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
            ];
          },
          handleSelect(item) {
            console.log(item);
          },
          handleIconClick(ev) {
            console.log(ev);
          }
        },
        mounted() {
          this.restaurants = this.loadAll();
        }
      }
    </script>
    

    远程搜索

    从服务端搜索数据
    在这里插入图片描述

    <el-autocomplete
      v-model="state4"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
    <script>
      export default {
        data() {
          return {
            restaurants: [],
            state4: '',
            timeout:  null
          };
        },
        methods: {
          loadAll() {
            return [
              { "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },
              { "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },
              { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
              { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
              { "value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
              { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
              { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
              { "value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号" },
              { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
              { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
              { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
              { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
              { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F" },
              { "value": "浮生若茶(凌空soho店)", "address": "上海长宁区金钟路968号9号楼地下一层" },
              { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
              { "value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路" },
              { "value": "快乐柠檬(神州智慧店)", "address": "上海市长宁区天山西路567号1层R117号店铺" },
              { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
              { "value": "猫山王(西郊百联店)", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
              { "value": "枪会山", "address": "上海市普陀区棕榈路" },
              { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
              { "value": "钱记", "address": "上海市长宁区天山西路" },
              { "value": "壹杯加", "address": "上海市长宁区通协路" },
              { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元" },
              { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
              { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
              { "value": "鲜果榨汁(金沙江路和美广店)", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
              { "value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号" },
              { "value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号" },
              { "value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号" },
              { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
              { "value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号" },
              { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
              { "value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1" },
              { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
              { "value": "饭典*新简餐(凌空SOHO店)", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
              { "value": "焦耳·川式快餐(金钟路店)", "address": "上海市金钟路633号地下一层甲部" },
              { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
              { "value": "浏阳蒸菜", "address": "天山西路430号" },
              { "value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路" },
              { "value": "樱花食堂(凌空店)", "address": "上海市长宁区金钟路968号15楼15-105室" },
              { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
              { "value": "福荣祥烧腊(平溪路店)", "address": "上海市长宁区协和路福泉路255弄57-73号" },
              { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
              { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
              { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
              { "value": "阳阳麻辣烫", "address": "天山西路389号" },
              { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
            ];
          },
          querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
    
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
              cb(results);
            }, 3000 * Math.random());
          },
          createStateFilter(queryString) {
            return (state) => {
              return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
          },
          handleSelect(item) {
            console.log(item);
          }
        },
        mounted() {
          this.restaurants = this.loadAll();
        }
      };
    </script>
    

    Input Attributes

    参数说明类型可选值默认值
    type类型stringtext/textareatext
    value绑定值string/number
    maxlength最大输入长度number
    minlength最小输入长度number
    placeholder输入框占位文本string
    clearable是否可清空booleanfalse
    disabled禁用booleanfalse
    size输入框尺寸,只在type!="textarea"时有效stringmedium/small/mini
    prefix-icon输入框头部图标string
    suffix-icon输入框头部图标string
    rows输入框行数,只在type!="textarea"时有效number2
    autosize自适应内容高度,只对 type=“textarea” 有效,可传入对象,如,{ minRows: 2, maxRows: 6 }boolean / objectfalse
    auto-complete原生属性,自动补全stringon,offoff
    name原生属性string
    readonly原生属性,是否只读booleanfalse
    max原生属性,设置最大值
    min原生属性,设置最小值
    step原生属性,设置输入字段的合法数字间隔
    resize控制能否能被用户缩放stringnone,both,horizontal,vertical
    autofocus原生属性,自动获取焦点booleantrue,falsefalse
    form原生属性string
    label输入框关联的label文字string
    tabindex输入框的tabindexstring

    Input slots

    name说明
    prefix输入框头部内容,只对type=”text“有效
    suffix输入框尾部内容,只对type="text"有效
    prepend输入框前置内容,只对type="text"有效
    append输入框后置内容,只对type="text"有效

    Input Events

    事件名称说明回调函数
    blur在Input失去焦点时触发(event:Event)
    focus在Input获得焦点时触发(event:Event)
    change在Input值改变时触发(value:string | number)

    Input Methods

    方法名说明参数
    focus使input获取焦点-

    Autocomplete Attributes

    参数说明类型可选值默认值
    placeholder输入框占位文本string
    disabled禁用boolwNfalse
    valueKey输入建议对象中用于显示的键名stringfalse
    value必填值,输入绑定值string
    debounce获取输入建议的去抖延时number300
    fetch-suggestions返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它Function(queryString, callback)
    popper-classAutocomplete 下拉列表的类名string
    trigger-on-focus是否在输入框focus时显示建议列表booleantrue
    name原生属性string
    select-when-unmatched在输入没有任何匹配建议的情况下,按下回车是否触发select事件booleanfalse
    label输入框关联的label文字string
    prefix-icon输入框头部图标string
    suffix-icon输入框尾部图标string

    Autocomplete slots

    name说明
    prefix输入框头部内容
    suffix输入框尾部内容
    prepend输入框前置内容
    append输入框后置内容

    Autocomplete Events

    事件名称说明回调参数
    select点击选中建议项时触发选中建议项
    展开全文
  • 如何获取到input输入框 中date的当前日期 开发工具与关键技术:Visual Studio 2015 作者:徐晶旗 撰写时间:2019年 6月 8日 首先input是表单中的一种元素,所以接下来先给大家讲一下表单的含义。 表单是网页与用户...

    如何获取到input输入框 中date的当前日期

    开发工具与关键技术:Visual Studio 2015
    作者:徐晶旗
    撰写时间:2019年6月8日 
    

    首先input是表单中的一种元素,所以接下来先给大家讲一下表单的含义。
    表单是网页与用户的交互工具,表单 由表单元素组成。封装其他任何数量的表单控件,还有其他任何元素里可用的标签,常用的表单元素有以下几种标记:输入域标记 、选择域标记 和 、文字域标记等。表单元素有哪些呢?它包含了如下的这些元素,输入文本框,按钮,定义下拉菜单,,文本区等等。
    上面呢简单的介绍了一下表单元素,那现在就切入主题讲一下标签有哪些作用。
    在很多页面和web应用中都有输入日期和时间的地方, 标签用于创建交互式控件,这类控件是基于web表单的,它可以接收用户的数据、信息。 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。当然也可以把它的类型设置为”date”,就把这个input标签变为了一个日期选择器。
    然而我要做的项目也涉及到了日期事件,来看一下我写的代码
    以下为html样式,此时可以把日历input隐藏起来,当点击自定义的input时,对data类型的input模拟点击,使其弹出手机自带的日历框,选中日期之后,把选中的日期值赋值到自己自定义的input输入框中,不过以下代码我还用到了栅格布局,让排版看上去整齐一点?

     <div class="col-lg-1 col-md-1 text-center p-2"><b>从</b></div>
       <div class="sly col-lg-3 col-md-3"><input type="date" class="form-control" id="lucky"> </div>
       <div class="col-lg-1 col-md-1 text-center p-2"><b>到</b></div>
       <div class="sly col-lg-3 col-md-3"><input type="date" class="form-control" id="luckly"> </div>
    

    在这里插入图片描述
    点击日期选择器可以选中某个日期
    在这里插入图片描述

    在js中设置自定义时间到date控件的方法; 注:以下代码来源于网上查找

       $(function () {
                //创建一个当前日期对象
                var now = new Date();
                //格式化日,如果小于9,前面补0
                var day = ("0" + now.getDate()).slice(-2);
                //格式化月,如果小于9,前面补0
                var month = ("0" + (now.getMonth() + 1)).slice(-2);
                //拼装完整日期格式
                var today = now.getFullYear() + "-" + (month) + "-" + (day);
                //完成赋值
                $("#lucky").val(today);
                $("#luckly").val(today);
    
    

    执行代码,刷新页面,就获取到了当前日期

    在这里插入图片描述

    展开全文
  • input输入框日期显示格式化

    千次阅读 2018-05-23 15:47:00
    在对input框进行属性设置 <input type="text" name="createtime" value="<fmt:formatDate value='${user.createtime }' pattern='yyyy-MM-dd HH:mm:ss'/>" > 转载于:https://www.cnblogs.com/ism...
  • 日期控件(input输入框)

    2019-04-07 14:16:04
    用于页面的日期选择,里面的插件涉及js和css,而这两个都是基于jquery的,所以资源中还包含了jquery.显示的日期格式可以设定.
  • 日期选择框值的变化进行监听,当日期值不满足限定的范围时弹出提示: <div> <label>起始日期<span class="red">*</span></label> <div style="width: 185px"> <...
  • input输入框格式化日期(formatDate)

    万次阅读 2018-03-19 17:14:28
    input type="text" class="form-control" readonly value="&lt;fmt:formatDate value="${ore.from}" pattern="yyyy-MM-dd HH:mm:ss" /&gt;" &gt;
  • 效果展示 情况说明 在项目开发的时候,因为显示效果需要使用通过重置按钮来...因为是属于非表单,所以无法通过表单的属性来操作Input输入框跟RangePicker日期范围选择。所以重置清空值,则需要要求输入的值跟 ...
  • 最近使用了angular日期选择器,不过需要把选中的日期输出到input输入框中,如果按照默认情况,显示的是时间戳形式的时间,不符合要求,需要把格式变成特定格式,但是input上ng-model上又不能直接使用filter,因此...
  • 主要为大家详细介绍了bootstrap布局中input输入框右侧图标点击功能实现的相关代码,感兴趣的小伙伴们可以参考一下
  • 本文来源于Element官方文档: ...基础用法 ...请选择日期 suffix-icon=el-icon-date v-model=input2> 请输入内容 prefix-icon=el-icon-search v-model=input21> 带图标的输入框(slot方式)
  • 今天遇到的问题是日期控件,在js中监听当前input的change事件时无效,其实很简单就解决了 只需要在input输入框中加上箭头所指东西,至此,问题解决
  • JS 判断input输入框日期时间格式是否符合YY-MM-DD HH:MM:SS和是否符合实际日期规范方法以及SQL时间日期格式转化存储 先获取input文本框内输入值 <p>日 &nbsp &nbsp &nbsp 期:&nbsp;<...
  • HTML5中input输入框的种类

    千次阅读 2017-03-09 23:47:51
    1、问题背景 input输入框从HTML5版本开始,有多少种类型2、实现源码 input输入框类型 input{ width: 200px; font-family: "微软雅黑"; font-size: 14px; }
  • input输入框去除历史记录 input输入框的历史记录很烦人,都是一些测试用的值,但是清除cookie都去不掉 找了好久,发现社区大多数都是添加一个属性值来禁止输入框的出现,从而达到想要的效果,但是有些人是想保留记录...
  • ElementUI时间选择器,传入时间赋值后之后无法改变 // ElementUI的表格组件 <el-date-picker size="mini" style="width: 180px" default-value @change="limit_search
  •  <input type=date />在360浏览器不兼容问题 ” 在360浏览器不兼容问题 nguage="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE ...
  • 问题描述:最近做项目过程中遇到一个问题,就是某个input输入框绑定了一个时间选择器后,发现在设备上测试的时候,每次选择时间的时候,不仅时间选择器会弹出来,设备的输入法也会弹出来,后来通过查找资料找到了...
  • input输入框type参数

    千次阅读 2019-07-27 16:41:53
    今日闲来无事,把所有的输入框type属性都试了一遍。 一共呢,是有23个参数。 <form action=""> <input type="text" placeholder="1">//纯文本输入框 <input type="button" placeholder="2">//转换...
  • element 日期选择器date-picker 设置默认月份(当年1月到当前月),结束月份大于开始月份,开始月份小于结束月份 1. 初始月份设置 先放效果图 月份选择器 <el-date-picker v-model="checkFieldFormData....
  • input输入框的change事件

    千次阅读 2016-03-21 14:40:17
    input输入框的change事件,要在input失去焦点的时候才会触发 $('input[name=myInput]').change(function() { ... });在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发 用下面的方法会...
  • input输入框的各种用法 1.邮箱:提交时,验证有没有@,以及@后面有没有内容 <input type="email" name="email"> 2.搜索类型:自带快速清除功能 <input type="search" name="search"> 3.url类型:...
  • 1.通过keydown事件,将input的键盘输入事件阻止,使它无法输入 2.通过mousedown事件监听鼠标事件, 当鼠标点击为右键时: 通过contextmenu事件阻止右键默认菜单,阻止复制 $(".datetimepicker").on('keydown'...
  • Form-input输入框

    2019-01-04 00:07:09
    1、基本使用 v-model:绑定的值,string / number size:指定输入框的尺寸,除了默认的medium大小外,还提供了 large、small 和 mini 三种尺寸。输入框尺寸,只在type!="...el-input style=...
  • input 输入框清除事件

    2021-06-05 11:50:50
    $(function () { $('#autocomplete-ajax').bind('input propertychange', function () { stcd = "" }); })

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,015
精华内容 9,606
关键字:

input输入框选择日期