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

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 打赏 评论
  • CSDN专家-sinjack 2021-07-30 14:38

    只有时间标签会这样,其他正常吗?选择时间后检查一下页面元素。

    打赏 评论

相关推荐 更多相似问题