精华内容
下载资源
问答
  • ## DatePicker 日期选择器### 该文档不再维护,新版文档地址: [form-create 文档](http://fc.gd8.top)#### [在线预览](https://jsrun.net/HehKp/edit)#### 举例:```js{type: "DatePicker",field: "section_day",title...

    ## DatePicker 日期选择器

    ### 该文档不再维护,新版文档地址: [form-create 文档](http://fc.gd8.top)

    #### [在线预览](https://jsrun.net/HehKp/edit)

    #### 举例:

    ```js

    {

    type: "DatePicker",

    field: "section_day",

    title: "活动日期",

    value: ['2018-02-20', new Date()],

    props: {

    "type": "datetimerange",

    "format": "yyyy-MM-dd HH:mm:ss",

    "placeholder":"请选择活动日期",

    }

    }

    ```

    #### maker快速生成:

    ```js

    $formCreate.maker.date('活动日期','section_day',['2018-02-20', new Date()]).props({

    "type": "datetimerange",

    "placeholder":"请选择活动日期"

    })

    ```

    #### json 生成规则

    ```json

    {

    type: "DatePicker",//必填!

    field: "section_day",//必填!

    title: "活动日期",//必填!

    //input值, type为daterange,datetimerange value为数组 [start_value,end_value]

    value: ['2018-02-20', new Date()],

    props: {

    //显示类型,可选值为 date、daterange、datetime、datetimerange、year、month

    "type": "datetimerange",//必填!

    //展示的日期格式

    "format": "yyyy-MM-dd HH:mm:ss",

    //日期选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end

    "placement": "bottom-start",

    //占位文本

    "placeholder":"请选择获得时间",

    //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭

    "confirm":false,

    //尺寸,可选值为large、small、default或者不设置

    "size":"default",

    //是否禁用选择器

    "disabled":false,

    //是否显示清除按钮

    "clearable":true,

    //完全只读,开启后不会弹出选择器

    "readonly":false,

    //文本框是否可以输入

    "editable":false,

    },

    validate:[],

    }

    ```

    #### 参数说明

    ##### 基本规则 rule:

    | 字段名 | 说明 | 字段类型 | 是否必填 | 默认值 |

    | :--- | :--- | :--- | :--- | :--- |

    | type | 元素类型 | String | true | - |

    | field | 字段名称 | String | true | - |

    | title | 字段别名 | String | true | - |

    | value | 字段值,当props.type设置为daterange,datetimerange时value为数组 \[开始日期,结束日期\] | String,Number,Date,Array | false | - |

    | props | 元素配置 | Object | true | - |

    | event | 元素事件 | Object | false | - |

    | validate | 验证规则 | Array | false | - |

    ##### 元素配置 props:

    | 字段名 | 说明 | 字段类型 | 是否必填 | 默认值 |

    | :--- | :--- | :--- | :--- | :--- |

    | type | 显示类型,可选值为 date、daterange、datetime、datetimerange、year、month | String | true | - |

    | format | 展示的日期格式,例如:yyyy-MM-dd HH:mm:ss | String | false | 'yyyy-MM-dd HH:mm:ss' |

    | placement | 日期选择器出现的位置,可选值为top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end | String | false | - |

    | placeholder | 占位文本 | String | false | - |

    | confirm | 是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭 | Boolean | false | false |

    | size | 尺寸,可选值为large、small、default或者不设置 | String | false | - |

    | clearable | 是否显示清除按钮 | Boolean | false | true |

    | disabled | 是否禁用选择器 | Boolean | false | false |

    | readonly | 完全只读,开启后不会弹出选择器 | Boolean | false | false |

    | editable | 文本框是否可以输入 | Boolean | false | false |

    ##### 事件扩展 event:

    | 事件名称 | 说明 | 字段类型 | 是否必填 | 默认值 |

    | :--- | :--- | :--- | :--- | :--- |

    | change | 日期发生变化时触发,已经格式化后的日期,比如 2018-02-20 | Function | false | - |

    | open-change | 弹出日历和关闭日历时触发 true 或 false | Function | false | - |

    | clear | 在 confirm 模式或 clearable = true 时有效,在清空日期时触发 | Function | false\` | - |

    ---

    展开全文
  • <p>formGroup初始化后date有值1970-09-01 12:00:00,然而[format]="'yyyy-mm-dd'"并没有生效。</p><p>该提问来源于开源项目:ElemeFE/element-angular</p></div>
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...form action="http://www.tmooc.cn"> 用户名:<input type="text"name="username"maxlength="5
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="http://www.tmooc.cn">
        用户名:<input type="text"name="username"maxlength="5"
                   value="abc"
                   readonly="readonly"
                   placeholder="请输入用户名"><br><!--文本框-->
        <!--文本框必须添加name否则数据将无法提交-->
        <!--maxlength控制文本框的最大长度-->
        <!--value是设置默认值-->
        <!--readonly="readonly"只能读取不能修改-->
        <!--占位文本 当文本框没有内容的时候 会显示placeholder里面的内容-->
        密码:<input type="password"name="password"placeholder="请输入密码"><br><!--密码框-->
        性别:<input type="radio"name="gender"value="m" id="r1"><label for="r1"></label>
        <!--<label for="r1"></label>扩大点击的范围 点击文字也可以选中-->
        <!--radio单选框必须写相同的name-->
        性别:<input type="radio"name="gender"value="w" id="r2"checked="checked"
    id="r2"><label for="r2"></label> <!--radio单选框必须写相同的name-->
        <!--如果不加value的话 提交的是on 必须写value指定提交内容-->
        <!--checked="checked"默认选中-->
        <!--单选和多选属性通用-->
        兴趣爱好:<input type="checkbox"name="hobby" value="cy" id="c1"><label for="c1">抽烟</label>
        <input type="checkbox"name="hobby" value="hj"id="c2"><label for="c2" >喝酒</label>
        <input type="checkbox"name="hobby" value="tt" id="c3"><label for="c3">烫头</label> <br>
    
        <!--日期选择器-->
        生日:<input type="date"name="birthday"><br>
    
        <!--文件选择器-->
        靓照:<input type="file"name="pic"><br>
        <!--文本域-->
        自我介绍:<textarea name="intro" placeholder="说点什么"cols="20" rows="3"></textarea><br>
        <!--下拉选 -->
        所在地:<select name="city">
        <option value="bj" >北京</option>
        <option value="sh"selected="selected">上海</option>
        <option value="gz">广州</option>
        <!--重置按钮-->
        <input type="reset">
        <!--自定义按钮-->
        <input type="button"value="按钮">
    
    </select><br>
        <input type="submit"value="注册"><!--submit是提交按钮 value是控制按钮的属性-->
    </form>
    
    </body>
    </html>
    
    展开全文
  • 这个日期/时间选择器插件使用 angular-strap 插件来提供日期选择器或时间选择器接口。 。 此附加组件通过dateOptions, timeOptions and options表单中的dateOptions, timeOptions and options获取选项对象。 更多...
  • 发现现象过程: 标题点击自己所建立的弹窗按钮,触发点击事件,窗口弹出再form...中了解到点击选择器的时候会触发 ‘show.bs.modal’ ‘hide.bs.modal’ 事件 而我在弹窗按钮点击事件中调用了 ‘show.bs.modal’ 并在该

    发现现象过程:

    标题点击自己所建立的弹窗按钮,触发点击事件,窗口弹出再form表单的input中输入内容,点击引用bootstrap-datetimepicker的input时form表单中所有内容全部清空

    发现原因过程:
    上网查询是否存在相同的情况,在该链接https://bbs.csdn.net/topics/392030377
    中了解到点击选择器的时候会触发 ‘show.bs.modal’ ‘hide.bs.modal’ 事件
    而我在弹窗按钮点击事件中调用了 ‘show.bs.modal’ 并在该事件中写入了form表单内容初始化的代码,点击选择器时触发了’show.bs.modal’导致该事件重新运行了一遍我的代码,将form表单中的内容初始化

    解决方式:
    将我写的‘show.bs.modal’事件中的代码提取出来,在该事件外将form表单内容初始化
    解决前代码:
    在这里插入图片描述

    解决后代码:
    在这里插入图片描述

    展开全文
  • Django中forms表单使用日期选择器

    千次阅读 2019-09-15 11:50:54
    最近在学习Django中自带的forms模块,想用forms表单实现一个可以选择日期的输入框 from django import forms class LoginForm(forms.Form): user_name = forms.CharField(label='昵称', max_length=10, widget=...

    最近在学习Django中自带的forms模块,想用forms表单实现一个可以选择日期的输入框

    from django import forms
    
    class LoginForm(forms.Form):
        user_name = forms.CharField(label='昵称', max_length=10, widget=forms.TextInput(attrs={'class':'form-control'}))
        pwd = forms.ChoiceField(label="密码", widget=forms.PasswordInput(attrs={'class':'form-control'}))
    
        date = forms.DateField(label='日期', widget=forms.DateInput(attrs={'type':'date'}))
        #实现可选的日期输入格式
    

    效果如下图:

    展开全文
  • Vue+element ui 表单日期选择器范围控制 1.页面 <el-formref="form":model="form":rules="rules"label-width="80px"> <el-form-itemlabel="开始时间"prop="beginDate"> <el-date-picker v-model...
  • <p>"dependencies": { "-create/iview"...validator的时间选择器已经选择了时间,可value一直是空字符串,麻烦看下 该提问来源于开源项目:xaboy/form-create</p></div>
  • PHP表单生成,快速创建Form表单

    千次阅读 2018-07-21 12:07:05
    PHP表单生成,快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。 github地址 本项目还在不断开发完善中,如...
  • wordpress表单调用Do you need people to pick a date when they fill in a form on your website? 当人们在您的网站上填写表格时,您是否需要挑选日期? Perhaps you want to know a good time to call them, or...
  • 具有数据收集、校验和提交功能的表单生成,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,树型,文件/图片...
  • js 表单生成,根据参数生成form表单

    千次阅读 2018-11-16 13:11:01
    具有数据收集、校验和提交功能的表单生成,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,树型,文件/图片...
  • <code>form.setFieldsValue({ starDate: dayjs('2012-12-12', 'YYYY-MM-DD') }) 点击日期框就会报 date.clone(...).locale(...).weekday is not a function</p><p>该提问来源于开源项目&#...
  • 基于Element的输入框、下拉、级联、日期选择器宽度一致,自适应 <template> <div class="test"> <el-form ref="form" :model="form" label-width="90px"> <el-row> <!-- ...
  • PHP表单生成,快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及省市区三级联动、时间选择、日期选择、颜色选择、树型、文件/图片上传等功能。 详细查看:Github地址|Composer地址 ...
  • 声明:代码只展示关键部分...1.必须使用form表单 <div id="editFrm" class="layui-form" style="padding: 10px;" lay-filter="example"> <div class="layui-form-item"> <label class="layui-...
  • ▲扩展面板 该组件是一个信息栏 当点击展开后 能显示更多信息 原创文章 247获赞 39访问量 212万+ 关注 私信 展开阅读全文 作者:Piconjo_Official
  • <p>I love this jQuery datepicker that I want to implement on a PHP form with other input boxes <a href="http://multidatespickr.sourceforge.net/" rel="nofollow">...
  • DatePicker 日期选择器 TimePicker 时间选择器 Cascader 级联选择器 InputNumber 数字输入框 Rate 评分 Upload 上传 ColorPicker 颜色选择器 使用 在单文件组件中引用 npm i vue-form-maker import VueFormMaker ...
  • 造模者 PHP表单生成器,快速生成现代的表单表单。包含布局,单选框,输入框,拖放选择框等元素以及省市区三级联动,时间...日期选择器 timePicker 率 滑杆 上载 树 帧 安装 使用 : $ composer require xaboy/form
  • form-builderPHP表单生成,快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。表单是使用form-create js表单生成...
  • JS 表单生成 form-create

    千次阅读 2018-08-03 08:21:45
    具有数据收集、校验和提交功能的表单生成,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,文件/图片上传等...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 217
精华内容 86
关键字:

form表单日期选择器