self._total_output_power = ko.computed(function () {
		var total = 0;
		ko.utils.arrayForEach(self._outputData(), function (output) {
			total += parseFloat(output.outputPower());
		});

		return total;
	}, this, { deferEvaluation: true });// calculate only when access

ko.bindingHandlers.datepickercontrol = {
			init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
				var binding = allBindingsAccessor();
				var options = {
					format: 'yyyy-mm-dd',
					language: "zh-CN",
					autoclose: true,
					todayBtn: 'linked',
					calendarWeeks: true,
					todayHighlight: true
				};

				if (binding.
) {
					options = $.extend(options, binding.datePickerOptions);
				}

				$(element).datepicker(options).on('changeDate', function(ev){
					valueAccessor()(ev.date);// update report_date
				});

				ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
					$(element).datepicker("destroy");
				});
			},
			update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

				// update period model view when switch period "days" / "months" / "years"
				var newPeriodView = parseInt($(element).attr('data-date-min-view-mode'), 10);
				var cachedPeriodView = parseInt($(element).data("dateMinViewMode"), 10);
				// check period view if changed or not
				if(newPeriodView - cachedPeriodView) {
					// update cache data
					$(element).data("dateMinViewMode", newPeriodView);

					$(element).data("datepicker")._process_options({minViewMode: newPeriodView});
					$(element).data("datepicker").showMode(0 - (Math.abs(newPeriodView - cachedPeriodView)));
				}

				$(element).datepicker("update", ko.unwrap(valueAccessor()));
			}
		};

<input data-bind="attr: { 'data-date-min-view-mode' : dateViewMode }, datepickercontrol: report_date" type="text" class="form-control datepickercontrol input-sm" readOnly style="width: 105px;">

function DayPeriod() {
	var self = this;
	self.periodName = "日报表";
	self.periodValue= "date_trend_report";
	self.periodCurrent = "今天";
	self.periodView = 0;
}
function MonthPeriod() {
	var self = this;
	self.periodName = "月报表";
	self.periodValue= "month_trend_report";
	self.periodCurrent = "这个月";
	self.periodView = 1;
}
function YearPeriod() {
	var self = this;
	self.periodName = "年报表";
	self.periodValue= "year_trend_report";
	self.periodCurrent = "今年";
	self.periodView = 2;
}

DayPeriod.prototype.getCurrent = function() {return moment().toDate();};
DayPeriod.prototype.getPrevious = function(reportDate) {return moment(reportDate).subtract(1, 'day').toDate();};
DayPeriod.prototype.getNext = function(reportDate) {return moment(reportDate).add(1, 'day').toDate();};
DayPeriod.prototype.getTitleDate = function(reportDate) {return moment(reportDate).format('YYYY-MM-DD');};

MonthPeriod.prototype.getCurrent = function() {return moment().date(1).toDate();};
MonthPeriod.prototype.getPrevious = function(reportDate) {return moment(reportDate).date(1).subtract(1, 'month').toDate();};
MonthPeriod.prototype.getNext = function(reportDate) {return moment(reportDate).date(1).add(1, 'month').toDate();};
MonthPeriod.prototype.getTitleDate = function(reportDate) {return moment(reportDate).format('YYYY-MM');};

YearPeriod.prototype.getCurrent = function() {return moment().dayOfYear(1).toDate();};
YearPeriod.prototype.getPrevious = function(reportDate) {return moment(reportDate).date(1).month(0).subtract(1, 'year').toDate();};
YearPeriod.prototype.getNext = function(reportDate) {return moment(reportDate).date(1).month(0).add(1, 'year').toDate();};
YearPeriod.prototype.getTitleDate = function(reportDate) {return moment(reportDate).format('YYYY');};

function EnergyChart() {
	var self = this;
	self.modelTitle = ko.observable();

	self.selectedDevice = ko.observable();

	self.Periods = ko.pureComputed(function () {
		if (self.chartType() === 'output_power') {
			return [
				new DayPeriod()
			];
		}

		return [
			new DayPeriod(),
			new MonthPeriod(),
			new YearPeriod()
		];

	});

	self.currentPeriod = ko.observable(DayPeriod.prototype);

	// plugin: datepickercontrol binded
	// the actual report date, when click next or previous button, will change this
	self.report_date = ko.observable(moment().format("YYYY-MM-DD"));

	// plugin: datepickercontrol binded, need refresh datepicker
	// 0: day view, 1: month view, 2: year view
	self.dateViewMode = ko.pureComputed(function() {
		return self.currentPeriod().periodView || 0;
	});

	self.report_type = ko.pureComputed(function() {
		return self.currentPeriod().periodValue || "date_trend_report";
	});

	self.gotoCurrentPeriod = function() {
		self.report_date(self.currentPeriod().getCurrent());
	};
	self.previous_date = function() {
		self.report_date(self.currentPeriod().getPrevious(self.report_date()))
	};
	self.next_date = function() {
		self.report_date(self.currentPeriod().getNext(self.report_date()))
	};

	// periods: Day/Month/Year
	self.selectedPeriod =  function(period) {
		self.currentPeriod(period);

		self.gotoCurrentPeriod();
	};
	self.report_date.subscribe(function(newValue) {
		self.searchReport();
	});