那没办法了 2021-07-30 14:34 采纳率: 100%
浏览 426
已结题

html中使用laydate日期时间选择器,选定时间后文本框可以显示,但是value值却为空

在html中我选择使用laydate.js的时间选择器,css和js都已经引用了。网页中可以正常将时间选择到文本框上显示,如图:

img
但是在提交时间时,我写了一个console.log想将时间的数据打印在后台,却得到:
img

但是我再对文本框输入内容,如多输入一个空格,就可以实现上传。这就很纳闷,百度后都未寻到有效解决方案,于是我贴上我的代码,希望各位帮我一起想想法子!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Insert title here</title>
    <link id="layuicss-laydate" rel="stylesheet" href="theme\default\laydate.css?v=5.3.1" media="all" />
    <script src="js/angular.min.js"></script>
    <script src="js/globe.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/laydate.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <div style="float: left; border-right: 2px dashed #f00; height: 1000px; overflow: hidden">
      <ul>
        <li>
          <a href="#"><span> 主页 </span></a>
        </li>
        <li>
          <a href="#"><span>设备管理 </span></a>
          <ul>
            <li><a href="adminAllDevice.html">设备列表</a></li>
            <li><a href="adminAddDevice.html">增加设备</a></li>
            <li><a href="#">设备定位查询</a></li>
          </ul>
        </li>
        <li>
          <a href="#"><span>用户管理</span></a>
          <ul>
            <li><a href="#">所有用户信息</a></li>
            <li><a href="#">到期用户信息</a></li>
            <li><a href="#">过期用户信息</a></li>
            <li><a href="#">用户与操作记录列表</a></li>
          </ul>
        </li>
      </ul>
    </div>

    <form style="float: left; margin-left: 20px">
      <div class="form-group"><label>设备MAC地址:</label><input type="text" ng-model="macAddress" /></div>
      <div class="form-group"><label>设备类型:</label><input type="text" ng-model="type" /></div>
      <div class="form-group"><label>设备描述:</label><input type="text" ng-model="description" /></div>
      <div class="form-group">
        <label>创建时间:</label
        ><input type="datetime" class="demo-input" id="createTime" ng-model="createTime" placeholder="请选择创建时间" />
      </div>
      <div class="form-group">
        <label>图片:</label><input id="fileUpload" name="picture" size="50" value="" type="file" onchange="change()" />
      </div>
      <div class="form-group"><label>图片预览:</label><img src="" alt="" width="100" id="preview" /></div>
      <div class="form-group">
        <button type="submit" ng-click="addDevice()">确定</button>
      </div>
    </form>

    <script>
      function change() {
        var pic = document.getElementById('preview'),
          file = document.getElementById('fileUpload')
        var ext = file.value.substring(file.value.lastIndexOf('.') + 1).toLowerCase()
        // gif在IE浏览器暂时无法显示
        if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
          alert('图片的格式必须为png或者jpg或者jpeg格式!')
          file.value = ''
          return
        }
        var isIE = navigator.userAgent.match(/MSIE/) != null,
          isIE6 = navigator.userAgent.match(/MSIE 6.0/) != null
        if (isIE) {
          file.select()
          var reallocalpath = document.selection.createRange().text
          // IE6浏览器设置img的src为本地路径可以直接显示图片
          if (isIE6) {
            pic.src = reallocalpath
          } else {
            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现
            pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + '")'
            // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
            pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
          }
        } else {
          html5Reader(file)
        }
      }

      function html5Reader(file) {
        var file = file.files[0]
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (e) {
          var pic = document.getElementById('preview')
          pic.src = this.result
        }
      }
    </script>
    <script>
      //时间选择器
      laydate.render({
        elem: '#createTime',
        type: 'datetime',
        format: 'yyyy-MM-dd HH:mm:ss',
        value: '2020-11-11 04:12:00',
        isInitValue: true,
        theme: '#108ee9',
        done: value => {
          $('#createTime').val(value)
        }
      })
    </script>
  </body>
  <script>
    var app = angular.module('myApp', [])
    //4控制器开始
    app.controller('myCtrl', function ($scope, $http) {
      //3uploadFile方法开始
      $scope.addDevice = function () {
        //2uploadFile方法体开始
        console.log('添加设备')
        var form = new FormData()
        var file = document.getElementById('fileUpload').files[0]
        form.append('head_img', file)
        form.append('macAddress', $scope.macAddress)
        form.append('type', $scope.type)
        form.append('description', $scope.description)
        form.append('createTime', $scope.createTime)
        console.log($scope.createTime)
        // 1http请求开始
        $http({
          method: 'POST',
          url: GlobalConfig.IPSSAddress + 'device/insertDevice',
          data: form,
          headers: {
            'Content-Type': undefined
          },
          transformRequest: angular.identity
        }).then(
          function successCallback(response) {
            console.log(response.data)
            if (response.data.code == 0) {
              alert('设备添加成功')
              window.location.href = 'adminAllDevice.html'
            } else if (response.data.code == -1) {
              alert('设备添加失败,设备已存在')
            }
          },
          function errorCallback(response) {
            alert('请求的格式有误,可能是时间问题')
          }
        ) // //1http请求结束
        //2uploadFile方法体结束
      } //3uploadFile方法结束
    }) //4控制器结束
  </script>
</html>

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-07-30 14:51
    关注

    angular没用过,猜测js设置文本框的值不会触发相关事件修改$scope.createTime的值。因为你的laydeate是用js设置dom的值。

    直接用js获取createTime值试试,有帮助麻烦点个采纳【本回答右上角】,谢谢~~

               $scope.createTime =$('#createTime').val();//或者这样设置createTime的值
                var form = new FormData()
                var file = document.getElementById('fileUpload').files[0]
                form.append('head_img', file)
                form.append('macAddress', $scope.macAddress)
                form.append('type', $scope.type)
                form.append('description', $scope.description)
                form.append('createTime', $('#createTime').val());////改这样获取dom的值
                console.log($scope.createTime)
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 8月7日
  • 已采纳回答 7月30日
  • 创建了问题 7月30日

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?