change data picker

wangzhibo

2021-09-16 30af971b3beedc51ec80a173ed83bf04393db42d

change data picker

 js/function.js

@@ -243,7 +243,17 @@


}
function reLoadLayers(){
  console.log(mars3d.globel_variables.queryDataTStart);
  console.log(mars3d.globel_variables.queryDataType);
  console.log('starting to reload layer .');

}
function refreshWidgets(){
  console.log(mars3d.globel_variables.queryDataTStart);
  console.log(mars3d.globel_variables.queryDataType);
  console.log('starting to reload widget if widget has been opened.');
}




 widgetsTS/dataTime/view.html

@@ -1,149 +1,24 @@


<div class="input-group input-group-lg append_test"  >
  <span style="width: 50px;" class="fa fa-globe input-group-addon dropdown-toggle" data-toggle="dropdown" ><span>&nbsp;&nbsp;</span><span id="current">小时：</span></span>
  <input type='text' class="form-control date" id='appDate' name="appDate"/>
    <ul class="dropdown-menu">
          
      <div class="layui-form">
          <div class="layui-form-item">
            <div class="layui-inline">
              <div class="layui-input-inline">
                <input type="radio" name="datatype" value="hour" title="小时数据" checked>
                <input type="text" class="layui-input" id="datatype_hour" placeholder="yyyy-MM-dd HH">
              </div>
            </div>
            <div class="layui-inline">
              <div class="layui-input-inline">
                <input type="radio" name="datatype" value="day" title="天数据" >
                  <input type="text" class="layui-input" id="datatype_day" placeholder="yyyy-MM-dd">
              </div>
            </div>
<div class="input-group input-group-lg append_test">
  <span style="width: 50px;" class="fa fa-globe input-group-addon dropdown-toggle"
    data-toggle="dropdown"><span>&nbsp;&nbsp;</span><span id="current">小时：</span></span>
  <input type='text' class="form-control date" id='appDate' name="appDate" style="display:none"/>
  <input type='text' class="form-control date" id='appDateHour' name="appDateHour" />
  <ul class="dropdown-menu">
    <div class="layui-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <div class="layui-input-inline">
            <input type="radio" name="datatype" value="hour" title="小时数据" checked>
            <input type="text" class="layui-input" id="datatype_hour" placeholder="yyyy-mm-dd hh">
          </div>
        </div>
    
        <div class="layui-inline">
          <div class="layui-input-inline">
            <input type="radio" name="datatype" value="day" title="天数据">
            <input type="text" class="layui-input" id="datatype_day" placeholder="yyyy-mm-dd">
          </div>
        </div>
      </div>
    </div>
  </ul>
</div>



<!-- <div class="btn-group append_test">
    
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       
        <!-- <span class="fa fa-globe" id="current"> 小时： -->
          <input type='button' class="form-control" id='' name="" value="" />
          
    </button>
    <button type="button" class="btn btn-primary">
      <!-- <input type="text" class="layui-input" id="appDate" placeholder="yyyy-MM-dd"> -->
      <!-- <input type='text' class="form-control date" id='appDate' name="appDate"/> -->
    </button>
    
    
</div> -->

<script>
  $(document).ready(function() {
        initDayHour();
    

        //console.log("i am jquery");
        //var currentHour = getDefaultDateTime();
        //$('#currentHour').text(currentHour);


        $('input[type=radio][name=datatype]').change(function() {
            if (this.value == 'hour') {
                //alert("Allot Thai Gayo Bhai");
                $('#current').text("小时：");
                initDayHour();
            }
            else if (this.value == 'day') {
                //alert("Transfer Thai Gayo");
                $('#current').text("天：");
                initDay();
            }
            reloadTop10();
        });



      

    })

    function initDayHour(){
      try {
        $("#appDate").datetimepicker('remove');
      } catch (error) {
        
      }
      
      $("#appDate").datetimepicker({
            bootcssVer:3,  //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
            format: 'yyyy-mm-dd HH:00:00',
            minView: 'day',//设置时间选择为年月日 去掉时分秒选择
            todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
            clearBtn:true,
            language: 'zh-CN',
            autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
            keyboardNavigation: true, //是否允许通过方向键改变日期。
            forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
            initialDate:new Date(),
            todayHighlight: 1  //如果为true, 高亮当前日期
        }).on("changeDate", function () {
            //設置可选的最后日期為當前日期
            //$("#start_time").datetimepicker("setEndDate", getToday())
            reloadTop10();
        });  

        $("#appDate").datetimepicker("setDate", new Date());
    }

    function initDay(){
      try {
        $("#appDate").datetimepicker('remove');
      } catch (error) {
        
      }
      $("#appDate").datetimepicker({
            bootcssVer:3,  //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
            format: 'yyyy-mm-dd',
            minView: 'month',//设置时间选择为年月日 去掉时分秒选择
            todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
            clearBtn:true,
            language: 'zh-CN',
            autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
            keyboardNavigation: true, //是否允许通过方向键改变日期。
            forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
            initialDate:new Date(),
            todayHighlight: 1  //如果为true, 高亮当前日期
        }).on("changeDate", function () {
            //設置可选的最后日期為當前日期
            //$("#start_time").datetimepicker("setEndDate", getToday())
            reloadTop10();
        });  

        $("#appDate").datetimepicker("setDate", new Date());

    }

    function applyDateType(){
      var dateType = $('input[type=radio][name=datatype]').val();
      return dateType;
    }

    function reloadTop10(){
      var leftAndRight = mars3d.widget.getClass("widgetsTS/widget_Overall/widget.js");
      if(leftAndRight){
        if(leftAndRight.viewWindowLeft){
          leftAndRight.viewWindowLeft.loadTop10();
        }
      }
    }

    function getAppDateTime(){
      return $('#appDate').val();
    }
</script>
</div>

 widgetsTS/dataTime/widget.js

@@ -1,5 +1,30 @@
'use script' //开发环境建议开启严格模式
;(function (window, mars3d) {
'use script'; //开发环境建议开启严格模式

function getDefaultDateTime() {
  var date = new Date;
  date.setHours(date.getHours() - 2);
  var year = date.getFullYear();//年
  var month = date.getMonth();//月
  var day = date.getDate();//日
  var hours = date.getHours();//时
  return year + "-" +
    ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + "-" +
    (day > 9 ? day : ("0" + day)) + " " +
    (hours > 9 ? hours : ("0" + hours)) + ":00:00";
}
function getDefaultDate() {
  var date = new Date;
  date.setDate(date.getDate() - 1);
  var year = date.getFullYear();//年
  var month = date.getMonth();//月
  var day = date.getDate();//日
  var hours = date.getHours();//时
  return year + "-" +
    ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + "-" +
    (day > 9 ? day : ("0" + day)) + " 00:00:00";
}

(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //外部资源配置
@@ -11,22 +36,102 @@
      return {
        type: 'append',
        url: 'view.html',
        parent: "#centerDiv"
      }
    }

    //初始化[仅执行1次]
    create() {}
    create() {
      this.defaultDate = getDefaultDate();
      this.defaultDateTime = getDefaultDateTime();
      // 初始化 参数
      let request = haoutil.system.getRequest();
      if (window.top) {
        request = $.extend(request, haoutil.system.getRequest(window.top));
      }
      mars3d.globel_variables = { userid: request.userid || 2, queryDataType: 'hour' };
      mars3d.globel_variables.queryDataTStart = this.defaultDateTime;
      mars3d.globel_variables.queryDataTEnd = this.defaultDateTime;
    }

   

    //每个窗口创建完成后调用
    winCreateOK(opt, result) {
      //此处可以绑定页面dom事件
      $('input[type=radio][name=datatype]').change(function () {
        let value = $("input[type=radio][name=datatype]:checked").val()
        if (value == 'hour') {
          $('#current').text("小时：");
          $('#appDate').hide()
          $('#appDateHour').show()
        }
        else if (value == 'day') {
          $('#current').text("天：");
          $('#appDate').show()
          $('#appDateHour').hide()
        }
        mars3d.globel_variables.queryDataType = value;
      });

      $("#appDate").datetimepicker({
        bootcssVer: 3,  //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
        format: 'yyyy-mm-dd',
        minView: 'month',//设置时间选择为年月日 去掉时分秒选择
        todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
        clearBtn: true,
        language: 'zh-CN',
        autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
        keyboardNavigation: true, //是否允许通过方向键改变日期。
        forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
        initialDate: new Date(),
        todayHighlight: 1  //如果为true, 高亮当前日期
      }).on("changeDate", function () {

        mars3d.globel_variables.queryDataTStart = $('#appDate').val() + " 00:00:00";
        console.log(mars3d.globel_variables.queryDataTStart);

        // 在 function.js 中定义的 function
        reLoadLayers();
        refreshWidgets();

      });
      $("#appDate").datetimepicker("setDate", new Date(this.defaultDate));
      $("#appDate").datetimepicker("setEndDate", new Date(this.defaultDate));

      $("#appDateHour").datetimepicker({
        bootcssVer: 3,  //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
        format: 'yyyy-mm-dd hh:00:00',
        minView: 'day',//设置时间选择为年月日 去掉时分秒选择
        todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
        clearBtn: true,
        language: 'zh-CN',
        autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
        keyboardNavigation: true, //是否允许通过方向键改变日期。
        forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
        initialDate: new Date(),
        todayHighlight: 1  //如果为true, 高亮当前日期
      }).on("changeDate", function () {

        mars3d.globel_variables.queryDataTStart = $('#appDateHour').val();
        console.log(mars3d.globel_variables.queryDataTStart);
        // 在 function.js 中定义的 function
        reLoadLayers();
        refreshWidgets();
      });
      $("#appDateHour").datetimepicker("setDate", new Date(this.defaultDateTime));
      $('#appDateHour').datetimepicker('setEndDate', new Date(this.defaultDateTime));

    }
    
    //激活插件
    activate() {
      toastr.info('激活插件_example_append')
     
    }

    //释放插件
    disable() {
      toastr.info('释放插件_example_append')
      //toastr.info('释放插件_example_append')
    }
  }