[IMP] web: update datepicker syntax with the new guidelines

This commit is contained in:
Christophe Matthieu
2017-05-15 16:19:47 +02:00
parent 932e887400
commit 5f13b7f019
3 changed files with 104 additions and 45 deletions
@@ -345,7 +345,7 @@ var FieldDate = InputField.extend({
* @private * @private
*/ */
_doDebouncedAction: function () { _doDebouncedAction: function () {
this.datewidget.change_datetime(); this.datewidget.changeDatetime();
}, },
/** /**
@@ -354,7 +354,7 @@ var FieldDate = InputField.extend({
* @private * @private
*/ */
_getValue: function () { _getValue: function () {
return this.datewidget.get_value(); return this.datewidget.getValue();
}, },
/** /**
* @override * @override
@@ -383,7 +383,7 @@ var FieldDate = InputField.extend({
* @private * @private
*/ */
_renderEdit: function () { _renderEdit: function () {
this.datewidget.set_value(this.value); this.datewidget.setValue(this.value);
this.$input = this.datewidget.$input; this.$input = this.datewidget.$input;
}, },
@@ -412,7 +412,7 @@ var FieldDateTime = FieldDate.extend({
* @private * @private
*/ */
_getValue: function () { _getValue: function () {
var value = this.datewidget.get_value(); var value = this.datewidget.getValue();
return value && value.add(-this.getSession().tzOffset, 'minutes'); return value && value.add(-this.getSession().tzOffset, 'minutes');
}, },
@@ -435,7 +435,7 @@ var FieldDateTime = FieldDate.extend({
*/ */
_renderEdit: function () { _renderEdit: function () {
var value = this.value && this.value.clone().add(this.getSession().tzOffset, 'minutes'); var value = this.value && this.value.clone().add(this.getSession().tzOffset, 'minutes');
this.datewidget.set_value(value); this.datewidget.setValue(value);
this.$input = this.datewidget.$input; this.$input = this.datewidget.$input;
}, },
+97 -38
View File
@@ -12,10 +12,13 @@ var DateWidget = Widget.extend({
template: "web.datepicker", template: "web.datepicker",
type_of_date: "date", type_of_date: "date",
events: { events: {
'dp.change': 'change_datetime', 'dp.change': 'changeDatetime',
'dp.show': 'set_datetime_default', 'dp.show': '_onShow',
'change .o_datepicker_input': 'change_datetime', 'change .o_datepicker_input': 'changeDatetime',
}, },
/**
* @override
*/
init: function(parent, options) { init: function(parent, options) {
this._super.apply(this, arguments); this._super.apply(this, arguments);
@@ -41,6 +44,9 @@ var DateWidget = Widget.extend({
keyBinds: null, keyBinds: null,
}); });
}, },
/**
* @override
*/
start: function() { start: function() {
this.$input = this.$('input.o_datepicker_input'); this.$input = this.$('input.o_datepicker_input');
this.$input.focus(function(e) { this.$input.focus(function(e) {
@@ -49,67 +55,120 @@ var DateWidget = Widget.extend({
this.$input.datetimepicker(this.options); this.$input.datetimepicker(this.options);
this.picker = this.$input.data('DateTimePicker'); this.picker = this.$input.data('DateTimePicker');
this.$input.click(this.picker.toggle.bind(this.picker)); this.$input.click(this.picker.toggle.bind(this.picker));
this.set_readonly(false); this._setReadonly(false);
}, },
set_value: function(value) { /**
this.set({'value': value}); * @override
var formatted_value = value ? this.format_client(value) : null; */
this.$input.val(formatted_value); destroy: function() {
if (this.picker) { this.picker.destroy();
this.picker.date(value || null); this._super.apply(this, arguments);
},
//--------------------------------------------------------------------------
// Public
//--------------------------------------------------------------------------
/**
* set datetime value
*/
changeDatetime: function () {
if(this.isValid()) {
this._setValueFromUi();
this.trigger("datetime_changed");
} }
}, },
get_value: function() { /**
* @returns {Moment|false}
*/
getValue: function () {
var value = this.get('value'); var value = this.get('value');
return value && value.clone(); return value && value.clone();
}, },
set_value_from_ui: function() { /**
var value = this.$input.val() || false; * @returns {boolean}
this.set_value(this.parse_client(value)); */
}, isValid: function () {
set_readonly: function(readonly) {
this.readonly = readonly;
this.$input.prop('readonly', this.readonly);
},
is_valid: function() {
var value = this.$input.val(); var value = this.$input.val();
if(value === "") { if(value === "") {
return true; return true;
} else { } else {
try { try {
this.parse_client(value); this._parseClient(value);
return true; return true;
} catch(e) { } catch(e) {
return false; return false;
} }
} }
}, },
parse_client: function(v) { /**
return field_utils.parse[this.type_of_date](v, null, {timezone: false}); * @param {Moment|false}
*/
setValue: function (value) {
this.set({'value': value});
var formatted_value = value ? this._formatClient(value) : null;
this.$input.val(formatted_value);
if (this.picker) {
this.picker.date(value || null);
}
}, },
format_client: function(v) {
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @private
* @param {Moment}
* @returns {string}
*/
_formatClient: function (v) {
return field_utils.format[this.type_of_date](v, null, {timezone: false}); return field_utils.format[this.type_of_date](v, null, {timezone: false});
}, },
set_datetime_default: function() { /**
* @private
* @param {string|false}
* @returns {Moment}
*/
_parseClient: function (v) {
return field_utils.parse[this.type_of_date](v, null, {timezone: false});
},
/**
* @private
* @param {boolean}
*/
_setReadonly: function (readonly) {
this.readonly = readonly;
this.$input.prop('readonly', this.readonly);
},
/**
* set the value from the input value
*
* @private
*/
_setValueFromUi: function() {
var value = this.$input.val() || false;
this.setValue(this._parseClient(value));
},
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* set the date of the picker by the current date or the today date
*
* @private
*/
_onShow: function () {
//when opening datetimepicker the date and time by default should be the one from //when opening datetimepicker the date and time by default should be the one from
//the input field if any or the current day otherwise //the input field if any or the current day otherwise
var value = moment().second(0); var value = moment().second(0);
if(this.$input.val().length !== 0 && this.is_valid()) { if(this.$input.val().length !== 0 && this.isValid()) {
value = this.parse_client(this.$input.val()); value = this._parseClient(this.$input.val());
} }
this.picker.date(value); this.picker.date(value);
}, },
change_datetime: function() {
if(this.is_valid()) {
this.set_value_from_ui();
this.trigger("datetime_changed");
}
},
destroy: function() {
this.picker.destroy();
this._super.apply(this, arguments);
},
}); });
var DateTimeWidget = DateWidget.extend({ var DateTimeWidget = DateWidget.extend({
@@ -660,9 +660,9 @@ var DomainLeaf = DomainNode.extend({
this.valueWidget = new (selectedField.type === "datetime" ? datepicker.DateTimeWidget : datepicker.DateWidget)(this); this.valueWidget = new (selectedField.type === "datetime" ? datepicker.DateTimeWidget : datepicker.DateWidget)(this);
wDefs.push(this.valueWidget.appendTo("<div/>").then((function () { wDefs.push(this.valueWidget.appendTo("<div/>").then((function () {
this.valueWidget.$el.addClass("o_domain_leaf_value_input"); this.valueWidget.$el.addClass("o_domain_leaf_value_input");
this.valueWidget.set_value(moment(this.value)); this.valueWidget.setValue(moment(this.value));
this.valueWidget.on("datetime_changed", this, function () { this.valueWidget.on("datetime_changed", this, function () {
this._changeValue(this.valueWidget.get_value()); this._changeValue(this.valueWidget.getValue());
}); });
}).bind(this))); }).bind(this)));
} }