精华内容
下载资源
问答
  • 这个日期/时间选择器插件使用 angular-strap 插件来提供日期选择器或时间选择器接口。 。 此附加组件通过dateOptions, timeOptions and options表单中的dateOptions, timeOptions and options获取选项对象。 更多...
  • 直接使用Form表单并提交时间会显示时间是Object类型,选择2020-11-30,保存的时候会变成2020-11-29xxx(具体时间后缀),可能是时间组件为英文的原因?转换为中文后日期还是没有转过来,就差了一天…… 解决 保存时...

    问题
    在使用AntD使用Form表单DatePicker时间组件的时候,测试意外测出一个历史bug,很神奇,时间会差一天!直接使用Form表单并提交时间会显示时间是Object类型,选择2020-11-30,保存的时候会变成2020-11-29xxx(具体时间后缀),可能是时间组件为英文的原因?转换为中文后日期还是没有转过来,就差了一天……
    解决
    保存时用方法转一下日期

    if(typeof(item.date) === 'object') {
       item.date= moment(new Date(item.date)).format("YYYY-MM-DD");
    }
    

    为什么要判断日期为object呢?因为第一次时间为object类型,转换完变成了string类型,如果第一次表单中有其他项填写错误,表单会报错,提示重新填写,这个时候再保存会再次触发moment(new Date(item.date)).format("YYYY-MM-DD")函数。但是因为日期已经转换为string类型了,日期也转换正确了,再使用这个函数页面会崩掉,显示空白,提示方法错误,因此需要判断一下初始日期的格式~
    主要代码

    moment(new Date(date)).format("YYYY-MM-DD");
    

    别忘了页面需要引用moment库

    import moment from 'moment';
    
    展开全文
  • Vue+element ui 表单日期选择器范围控制 1.页面 <el-formref="form":model="form":rules="rules"label-width="80px"> <el-form-itemlabel="开始时间"prop="beginDate"> <el-date-picker v-model...

    Vue+element ui 表单中日期选择器范围控制

    1.页面(单个日期)

    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
     <el-form-item label="开始时间" prop="beginDate">
       <el-date-picker
          v-model="form.beginDate"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          :picker-options="beginDateOption"
          :clearable="false"
       ></el-date-picker>
     </el-form-item>
     <el-form-item label="结束时间" prop="endDate">
       <el-date-picker
         v-model="form.endDate"
         type="date"
         placeholder="选择日期"
         value-format="yyyy-MM-dd"
         :picker-options="endDateOption"
         :clearable="false"
        ></el-date-picker>
     </el-form-item>
    </el-form>

    2.js (单个日期)

    <script>
    export default {
      data() {
        return {
          //开始时间限制
          beginDateOption: {
            disabledDate: (time) => {
              if (this.form.endDate) {
                return time.getTime() > new Date(this.form.endDate).getTime();
              }
            },
          }, 
          //结束时间限制
          endDateOption: {
            disabledDate: (time) => {
              if (this.form.beginDate) {
                return (
                  time.getTime() <
                  new Date(this.form.beginDate).getTime() - 24 * 3600 * 1000
                );
              }
            },
          },
        };
      },
    };
    </script>

    3.页面(日期范围)

    <el-date-picker
       v-model="dateRange"
       style="width: 90%"
       value-format="yyyy-MM-dd"
       type="daterange"
       range-separator="-"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
       :picker-options="pickerOptions"
       :clearable="false"
       :editable="false"
    ></el-date-picker>

    4.js(日期范围)

    <script>
    export default {
      data() {
        return {
         pickerOptions: {
            disabledDate(time) {
              return time.getTime() < Date.now() - 8.64e7;//对小于开始日期范围禁用,否则反之即可
            },
          }
        };
      }
    };
    </script>

     

    展开全文
  • <p>"dependencies": { "-create/iview"...validator的时间选择器已经选择时间,可value一直是空字符串,麻烦看下 该提问来源于开源项目:xaboy/form-create</p></div>
  • 包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。表单是使用form-create js表单生成器生成本项目还在不断开发完善中,如有建议或问题请在这里...

    form-builder

    PHP表单生成器,快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。

    表单是使用form-create js表单生成器生成

    本项目还在不断开发完善中,如有建议或问题请在这里提出

    安装

    composer require xaboy/form-builder

    示例

    demo.jpg

    各组件配置属性 点击查看

    请在 config/config.php中配置formSuccessScript属性。设置为form提交成功后的js代码或js地址,重新window.formCreate.formSuccess方法(带

    namespace Test;

    use FormBuilder\Form;

    //input组件

    $input = Form::input('goods_name','商品名称');

    //日期区间选择组件

    $dateRange = Form::dateRange(

    'limit_time',

    '区间日期',

    strtotime('- 10 day'),

    time()

    );

    //省市二级联动组件

    $cityArea = Form::city('address','收货地址',[

    '陕西省','西安市'

    ]);

    $checkbox = Form::checkbox('label','表单',[])->options([

    ['value'=>'1','label'=>'好用','disabled'=>true],

    ['value'=>'2','label'=>'方便','disabled'=>true]

    ]);

    //创建form

    $form = Form::create('/save.php',[

    $input,$dateRange,$cityArea,$checkbox

    ]);

    $html = $form->setMethod('get')->setTitle('编辑商品')->view();

    //输出form页面

    echo $html;

    组件

    namespace \FormBuilder\Form

    Form::cascader 三级联动,value为array类型

    Form::city 省市二级联动,value为array类型

    Form::cityArea 省市区三级联动,value为array类型

    Form::checkbox 复选框

    Form::color 颜色选择

    Form::date 日期选择

    Form::dateRange 日期区间选择,value为array类型

    Form::dateTime 日期+时间选择

    Form::dateTimeRange 日期+时间 区间选择,value为array类型

    Form::year 年份选择

    Form::month 月份选择

    Form::frame frame组件

    Form::frameInputs frame组件,input类型,value为array类型

    Form::frameFiles frame组件,file类型,value为array类型

    Form::frameImages frame组件,image类型,value为array类型

    Form::frameInputOne frame组件,input类型,value为string|number类型

    Form::frameFileOne frame组件,file类型,value为string|number类型

    Form::frameImageOne frame组件,image类型,value为string|number类型

    Form::hidden hidden组件

    Form::number 数字输入框

    Form::input input输入框,其他type: text类型Form::text,password类型Form::password,textarea类型Form::textarea,url类型Form::url,email类型Form::email,date类型Form::idate

    Form::radio 单选框

    Form::rate 评分组件

    Form::select select选择框

    Form::selectMultiple select选择框,多选,value为array类型

    Form::selectOne select选择框,单选

    Form::slider 滑块组件

    Form::sliderRange 滑块组件,区间选择,

    Form::switches 开关组件

    Form::timePicker

    Form::time 时间选择组件

    Form::timeRange 时间区间选择组件,value为array类型

    Form::upload 上传组件

    Form::uploadImages 多图上传组件,value为array类型

    Form::uploadFiles 多文件上传组件,value为array类型

    Form::uploadImageOne 单图上传组件

    Form::uploadFileOne 单文件上传组件

    输出

    namespace \FormBuilder\Json

    Json::succ(msg,data = []) 表单提交成功

    Json::fail(errorMsg,data = []) 表单提交失败

    Json::uploadSucc(filePath,msg) 文件/图片上传成功,上传成功后返回文件地址

    Json::uploadFail(errorMsg) 文件/图片上传失败

    展开全文
  • a-form-item :label="$tc('通行时段')" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-top: 28px;"> <a-range-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-M

    1.引入moment,并在方法中挂载

    import moment from 'moment'
    

    2.绑定 v-decorator

    <a-form-item :label="$tc('通行时段')" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-top: 28px;">
        <a-range-picker :show-time="{ format: 'HH:mm:ss' }" 
        format="YYYY-MM-DD HH:mm:ss" 
        :placeholder="[$tc('开始时间'), $tc('结束时间')]"
        @change="onTimeChange" @ok="onTimeOk" :disabled="isLook" 
        v-decorator="['passTime', validatorRules.passTime]" />
    </a-form-item>
    

    3在编辑的时候定义个对应对象

    passTime的格式是一个包含moment的对象。

    let passTime = [
        moment(record.beginTime || this.visitorTime.beginTime),
        moment(record.endTime || this.visitorTime.endTime)
    ]
    

    4.用form的setFieldsValue()回显

    this.form.setFieldsValue('passTime', passTime))
    

    5.大功告成!

    展开全文
  • 具有动态渲染、数据收集、校验和提交功能的表单生成器,支持双向数据绑定、事件扩展以及自定义组件,可快速生成包含有省市区三级联动、时间选择、日期选择等17种功能组件。 Github | 文档 form-create 是基于 Vue...
  • form-builder ...包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。 Github地址 | Composer地址 | Gitee地址 表单是使用form-create j...
  • PHP表单生成器,快速创建Form表单

    千次阅读 2018-07-21 12:07:05
    包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。 github地址 本项目还在不断开发完善中,如有建议或问题请在这里提出 安装 ...
  • 具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,树型,文件/图片...
  • 动态生成form表单,不在为表单烦恼

    万次阅读 2018-04-23 19:58:39
    具有数据收集、校验和提交功能的表单生成器,包含input、复选框、单选框、输入框、下拉选择框等元素以及省市区三级联动、时间选择、日期选择、颜色选择、文件/图片上传功能,支持事件扩展。 欢迎大家star学习交流...
  • 具有动态渲染、数据收集、校验和提交功能的表单生成器,支持双向数据绑定、事件扩展以及自定义组件,可快速生成包含有省市区三级联动、时间选择、日期选择等17种功能组件。 form-create 是基于 Vue开发的开源项目,...
  • js 表单生成器,根据参数生成form表单

    千次阅读 2018-11-16 13:11:01
    具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,树型,文件/图片...
  • 包含布局,单选框,输入框,拖放选择框等元素以及省市区三级联动,时间选择,日期选择,颜色选择,树型,文件/图片上传等功能。 文件 环境需求 PHP> = 5.4 支持UI 视点 元素UI 功能介绍 内置17种常用的表单组件 ...
  • 具有数据收集、校验和提交功能的表单生成器,包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展。 欢迎大家star学习交流:github地址...
  • 使用Vue动态生成form表单

    千次阅读 2018-04-25 18:23:00
    form-create 表单生成器具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,...
  • 具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,树型,文件/图片...
  • PHP表单生成器,使用PHP快速创建现代化的form表单,包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。 Github地址 | Composer地址 表单使用form-...
  • 包含复选框、单选框、输入框、下拉选择框等元素以及省市区三级联动、时间选择、日期选择、颜色选择、树型、文件/图片上传等功能。 详细查看:Github地址|Composer地址 演示项目:开源的高品质微信商城 本项目还在...
  • 具有动态渲染、数据收集、校验和提交功能的表单生成器,支持双向数据绑定、事件扩展以及自定义组件,可快速生成包含有省市区三级联动、时间选择、日期选择等17种功能组件。 已兼容iview2.和iview3.版本 Github | ...
  • vue 使用ajax传输form表单数据

    千次阅读 2019-10-11 13:16:26
    因为要上传文件,所以选择ajax的方式。后台的最低阅读时间是xxs,但是el-time-picker获得的值,其...现在我需要把日期转化格式后再通过form传到后台。 <div> <label>最低阅读时间</label> &...
  • 建议大家多用重置:即this.$refs[...代码:因为存在form里面,但是如果直接将form置空,就会导致没有form.monitoring_date,从而导致日期选择不能使用 <el-date-picker v-if="isAdd" v-model="form.monitoring_
  • DatePicker 日期选择器 TimePicker 时间选择器 Cascader 级联选择器 InputNumber 数字输入框 Rate 评分 Upload 上传 ColorPicker 颜色选择器 使用 在单文件组件中引用 npm i vue-form-maker import VueFormMaker ...
  • 现有需求 查询条件中 当 开始时间 结束时间选择同一时间时 提示结束时间大于开始时间 期望效果 表单 <el-form :inline="true" :rules="rules"> <el-form-item label="创建时间" prop="createTime" class=...
  • JS 表单生成器 form-create

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

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 173
精华内容 69
关键字:

form表单时间日期选择