tfp/src/components/datetime/controller.pc.js

A Web UI framework for TaskBuilder

import {FormInput} from "../controller.js";

/**
 * 日期时间组件
 * @param {[type]} dataModel [description]
 */
export default class DateTime extends FormInput {

  constructor(__tfp, dataModel, parent, inputType) {
    if(inputType) {
      super(__tfp, inputType, dataModel, parent);
    } else {
      super(__tfp, "DateTime", dataModel, parent);
    }
  }

  //属性
  get value() { return this.dataModel.value }
  set value(value) {
    if(value) {
      let date = new Date(value);
      if(this.type=="Date") {
        this.dataModel.value = date.format("yyyy-MM-dd");
      } else {
        if(this.showSecond) {
          this.dataModel.value = date.format("yyyy-MM-dd HH:mm:ss");
        } else {
          this.dataModel.value = date.format("yyyy-MM-dd HH:mm");
        }
      }
    } else {
      this.dataModel.value = "";
    }
    if(this._jqObj) {
      this._jqObj.find("input").val(this.dataModel.value);
    }
    if(!this._tfp.isDesigning) {
      this.valueOnChange();
      if(this.dataModel.onChange) {
        eval(this.dataModel.onChange);
      }
      //this.exeEventHandler("onChange", this.dataModel.value);
    }
  }

  get iconUrl() {
    return this._tfp.rootPath+"/src/components/"+this.type.toLowerCase()
      +"/images/icon-24-"+this._tfp.curPage.contentColorMode+".png";
  }
  set iconUrl(value) {}

  get showIcon() { return this.dataModel.showIcon }
  set showIcon(value) { 
    this.dataModel.showIcon = value ? true : false;
    if(this._jqObj) {
      if(this.dataModel.showIcon) {
        if(this._jqObj.find("img").length==0) {
          this._jqObj.append("<img src=\""+this.iconUrl+"\" />");
        }
      } else {
        this._jqObj.find("img").remove();
      }
      this.resetWidth();
    }
  }

  get showSecond() { return this.dataModel.showSecond }
  set showSecond(value) { 
    this.dataModel.showSecond = value ? true : false;
    if(this._jqObj) {
      this.resetWidth();
      if(this.dataModel.defaultNow && this._tfp.isDesigning) {
        this._jqObj.find("input").val(this.getCurDateTime());
      }
    }
  }

  get defaultNow() { return this.dataModel.defaultNow }
  set defaultNow(value) { 
    this.dataModel.defaultNow = value ? true : false;
    if(this._jqObj) {
      if(this.dataModel.defaultNow && this._tfp.isDesigning) {
        this._jqObj.find("input").val(this.getCurDateTime());
      } else {
        this._jqObj.find("input").val("");
      }
    }
  }

  getIptWidth() {
    let iptWidth = 90;
    if(this.dataModel.type=="DateTime") {
      iptWidth = 130;
      if(this.dataModel.showSecond) iptWidth = 150;
    }
    return iptWidth;
  }

  resetWidth() {
    let iptWidth = this.getIptWidth();
    let cptWidth = iptWidth;
    if(this.showIcon) cptWidth += 30;
    this._jqObj.find("input").css("width", iptWidth+"px");
    this._jqObj.css("width", cptWidth+"px");
    this._jqObj.css("min-width", cptWidth+"px");
    if(!this.dataModel.styles) this.dataModel.styles = {};
    this.dataModel.styles["width"] = cptWidth+"px";
    this.dataModel.styles["min-width"] = cptWidth+"px";
  }

  clear() {
    this.value = "";
    this.closePicker();
  }

  closePicker() {
    $(".tfp-datetime-picker").remove();
    $("body").unbind("click", this.closePicker);
  };

  showPicker() {
    let offset = this._jqObj.offset();
    let val = new Date();
    if(this.dataModel.value) val = new Date(this.dataModel.value);
    let width = 240;
    if(this.type=="DateTime") width = this.showSecond ? 393 : 343;
    let top = offset.top+31;
    let left = offset.left;
    let docWidth = document.documentElement.clientWidth;
    let docHeight = document.documentElement.clientHeight;
    //根据页面大小自动调整显示位置
    if((left+width)>docWidth) {
      left = (offset.left + this._jqObj.outerWidth()) - width;
      if(left<0) left = 0;
    }
    if((top+302)>docHeight) {
      top = offset.top - 302;
      if(top<0) top = 0;
    }
    let html = "<div class=\"tfp-datetime-picker\" data-cptid=\""+this.id+"\" data-value=\""
      +val.format("yyyy-MM-dd")+"\" style=\"top: "+top+"px; left:"+left+"px; width: "+width+"px; display:none;\">";
    let imgDir = this._tfp.rootPath+"/src/components/datetime/images/";
    html += "<div style=\"width:100%;height:30px;border-bottom: 1px solid #CCCCCC;\">"
      +"<div class=\"tfp-datetime-picker-header\">"
      +"<div style=\"width:16px; margin-left:5px;\" title=\"上一年\">"
      +"<img src=\""+imgDir+"double-arrow-left-"+this._tfp.curPage.contentColorMode+".png\"></div>"
      +"<div style=\"width:16px;\" title=\"上一月\"><img src=\""+imgDir
        +"arrow-left-"+this._tfp.curPage.contentColorMode+".png\"></div>"
      +"<div style=\"width:166px; text-align:center;\"><span>"+val.getFullYear()
      +"</span> 年 <span>"+(val.getMonth()+1)+"</span> 月</div>"
      +"<div style=\"width:16px;\" title=\"下一月\"><img src=\""+imgDir
        +"arrow-right-"+this._tfp.curPage.contentColorMode+".png\"></div>"
      +"<div style=\"width:16px;\" title=\"下一年\"><img src=\""+imgDir
        +"double-arrow-right-"+this._tfp.curPage.contentColorMode+".png\"></div>"
      +"</div>";
    if(this.type=="DateTime") {
      html += "<div class=\"tfp-datetime-picker-time-value\" "
        +"style=\"width: "+(this.showSecond ? 150 : 100)+"px;\">"
        +this.getTimeValue()+"</div>";
    }
    html += "</div><div style=\"width:100%;height:230px;\">";
    html += "<div class=\"tfp-datetime-picker-grid\">";
    html += "<div class=\"tfp-datetime-picker-grid-header\">";
    html += "<div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div>"
    html += "</div>";
    html += "</div>";
    if(this.type=="DateTime") {
      html += "<div class=\"tfp-datetime-picker-time-list\" "
        +"style=\"width: "+(this.showSecond ? 151 : 101)+"px;\">";
      html += this.getTimePickerHtml();
      html += "</div>";
    }
    html += "</div>";
    html += "<div class=\"tfp-datetime-picker-footer\"><span>清空</span>"
      +"<span style=\"color:#003399;\">今天</span>";
    if(this.type=="DateTime") html += "<input type=\"button\" value=\"确定\" />";
    html += "</div></div>";
    $("body").append(html);
    this.setDatePickerValue(val);
    let datetimePicker = $(".tfp-datetime-picker");
    let that = this;
    $(".tfp-datetime-picker-header").find("img").each(function(index) {
      $(this).click(function() {
        if(index==0) {
          that.toPrevYear();
        } else if(index==1) {
          that.toPrevMonth();
        } else if(index==2) {
          that.toNextMonth();
        } else if(index==3) {
          that.toNextYear();
        }
        event.stopPropagation();
      });
    });
    let footer = datetimePicker.find(".tfp-datetime-picker-footer");
    footer.find("span").eq(0).click(function() {
      that.clear();
    });
    footer.find("span").eq(1).click(function() {
      that.toToday();
    });
    datetimePicker.click(function() {
      event.stopPropagation();
    });
    datetimePicker.fadeIn("slow");
    if(this.type=="DateTime") {
      let timeList = $(".tfp-datetime-picker-time-list").find("ul");
      timeList.each(function() {
        $(this).find("li").each(function() {
          $(this).click(function() {
            $(this).parent().find("li").css("background-color", "");
            $(this).parent().find("li").css("color", "");
            $(this).css("background-color", "#3399FF");
            $(this).css("color", "#FFFFFF");
            $(this).parent().attr("data-value", $(this).html());
            let timeValue = timeList.eq(0).attr("data-value")+":"+timeList.eq(1).attr("data-value");
            if(that.showSecond) timeValue += ":"+timeList.eq(2).attr("data-value");
            $(".tfp-datetime-picker-time-value").html(timeValue);
            event.stopPropagation();
          });
        });
        $(this).get(0).scrollTop = parseInt($(this).attr("data-value"))*25;
      });
      footer.find("input").eq(0).click(function() {
        that.onCheckDateTime();
      });
    }
    $("body").bind("click", this.closePicker);
  }

  onCheckDateTime() {
    let val = $(".tfp-datetime-picker").attr("data-value");
    if(this.type=="DateTime") {
      let time = $(".tfp-datetime-picker-time-value").html();
      if(!time || time=="") time = "00:00";
      val += " "+time;
    }
    this.value = val;
    this.closePicker();
  }

  setDatePickerValue(date) {
    $(".tfp-datetime-picker").attr("data-value", date.format("yyyy-MM-dd"));
    $(".tfp-datetime-picker-header").find("span").eq(0).text(date.getFullYear());
    $(".tfp-datetime-picker-header").find("span").eq(1).text(date.getMonth()+1);

    let firstDate = new Date(date.format("yyyy-MM-01"));
    let curWeek = firstDate.getDay();
    if(curWeek==0) curWeek = 7;
    curWeek--;
    if(curWeek>0) firstDate.setDate(firstDate.getDate()-curWeek);
    
    let grid = $(".tfp-datetime-picker-grid");
    grid.find(".tfp-datetime-picker-grid-row").remove();
    
    var index = 0;
    for(var i=0;i<6;i++) {
      let rowHtml = "<div class=\"tfp-datetime-picker-grid-row\">";
      for(var j=0;j<7;j++) {
        let dateTmp = new Date(firstDate.format("yyyy-MM-dd"));
        dateTmp.setDate(dateTmp.getDate()+index);
        let style = "";
        if(dateTmp.format("yyyy-MM-dd")==date.format("yyyy-MM-dd")) {
          style = "color:#FFFFFF; background-color:#3366FF;";
        } else if(dateTmp.format("yyyy-MM")!=date.format("yyyy-MM")) {
          style = "color:#999999;";
        }
        rowHtml += "<div data-value=\""+dateTmp.format("yyyy-MM-dd")
          +"\" style=\""+style+"\">"+dateTmp.format("dd")+"</div>";
        index++;
      }
      rowHtml += "</div>";
      grid.append(rowHtml);
    }
    let that = this;
    grid.find(".tfp-datetime-picker-grid-row").each(function(){
      $(this).find("div").click(function() {
        if(that.type=="DateTime") {
          $(".tfp-datetime-picker-grid-row").find("div").each(function() {
            let dateTmp = $(this).attr("data-value");
            let curDate = $(".tfp-datetime-picker").attr("data-value");
            if(dateTmp==curDate) {
              $(this).css("background-color", "");
              if(dateTmp.substr(0, 7)!=curDate.substr(0, 7)) {
                $(this).css("color", "#999999");
              } else {
                $(this).css("color", "");
              }
              return false;
            }
          });
          $(".tfp-datetime-picker").attr("data-value", $(this).attr("data-value"));
          $(this).css("background-color", "#3366FF");
          $(this).css("color", "#FFFFFF");
          event.stopPropagation();
        } else {
          that.value = $(this).attr("data-value");
          that.closePicker();
        }
      });
    });
  }

  getTimeValue() {
    let date;
    if(!this.dataModel.value) {
      date = new Date();
      if(this.showSecond) {
        return date.format("HH:mm:ss");
      } else {
        return date.format("HH:mm");
      }
    }
    if(this.showSecond) {
      date = new Date(this.dataModel.value);
      return date.format("HH:mm:ss");
    } else {
      date = new Date(this.dataModel.value+":00");
      return date.format("HH:mm");
    }
  }

  getTimePickerHtml() {
    let html = "";
    let vals = this.getTimeValue().split(":");
    html += "<ul data-value=\""+(vals.length>0 ? vals[0] : "00")+"\" style=\"height:230px;\">";
    for(var i=0;i<24;i++) {
      let hour = i<10 ? "0"+i : i+"";
      html += "<li";
      if(vals.length>0 && hour==vals[0]) html += " style=\"background-color: #3399FF;color: #FFFFFF;\"";
      html += ">"+hour+"</li>";
    }
    html += "</ul>";
    html += "<ul data-value=\""+(vals.length>1 ? vals[1] : "00")+"\" style=\"height:230px;\">";
    for(var i=0;i<60;i++) {
      let minute = i<10 ? "0"+i : i+"";
      html += "<li";
      if(vals.length>1 && minute==vals[1]) html += " style=\"background-color: #3399FF;color: #FFFFFF;\"";
      html += ">"+minute+"</li>";
    }
    html += "</ul>";
    if(this.showSecond) {
      html += "<ul data-value=\""+(vals.length>2 ? vals[2] : "00")+"\" style=\"height:230px;\">";
      for(var i=0;i<60;i++) {
        let second = i<10 ? "0"+i : i+"";
        html += "<li";
        if(vals.length>2 && second==vals[2]) html += " style=\"background-color: #3399FF;color: #FFFFFF;\"";
        html += ">"+second+"</li>";
      }
      html += "</ul>"; 
    }
    return html;
  }

  toToday() {
    let now = new Date();
    this.setDatePickerValue(now);
    if(this.type=="Date") {
      this.value = now.format("yyyy-MM-dd");
      this.closePicker();
    }
    event.stopPropagation();
  }

  toPrevYear() {
    let date = new Date($(".tfp-datetime-picker").attr("data-value"));
    date.setYear(date.getFullYear()-1);
    this.setDatePickerValue(date);
  }

  toPrevMonth() {
    let date = new Date($(".tfp-datetime-picker").attr("data-value"));
    date.setMonth(date.getMonth()-1);
    this.setDatePickerValue(date);
  }

  toNextYear() {
    let date = new Date($(".tfp-datetime-picker").attr("data-value"));
    date.setYear(date.getFullYear()+1);
    this.setDatePickerValue(date);
  }

  toNextMonth() {
    let date = new Date($(".tfp-datetime-picker").attr("data-value"));
    date.setMonth(date.getMonth()+1);
    this.setDatePickerValue(date);
  }

  getCurDateTime() {
    if(this.type=="Date") return (new Date()).format("yyyy-MM-dd");
    if(this.type=="DateTime") {
      if(this.showSecond) {
        return (new Date()).format("yyyy-MM-dd HH:mm:ss");
      } else {
        return (new Date()).format("yyyy-MM-dd HH:mm");
      }
    }
  }

  initRuntime() {
    let that = this;
    this._jqObj.click(function(){
      if(that.dataModel.readonly || that.dataModel.disabled) return;
      if($(".tfp-datetime-picker").length>0) {
        let cptId = $(".tfp-datetime-picker").attr("data-cptid");
        if(cptId==that.id) return;
        that.closePicker();
      }
      that.showPicker();
      event.stopPropagation();
    });
    if(this.dataModel.defaultNow && !this.dataModel.value) {
      this.dataModel.value = this.getCurDateTime();
      this._jqObj.find("input").val(this.dataModel.value);
    }
  }
}