pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] web: datepicker widget

Browse Source 
(backport of enterprise version)

* JS/XML refactoring
* Allow user to override default options for the picker
This commit is contained in:
qsm-odoo
2015-09-24 17:05:28 +02:00
parent 30e2d45ba7
commit 8ebdff6f76
5 changed files with 79 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/css/base.css
+5 -5
View File
@@ -1168,14 +1168,14 @@
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
}
.openerp .oe-search-options .searchview_extended_prop_value .oe_datepicker_main {
.openerp .oe-search-options .searchview_extended_prop_value .o_datepicker {
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
}
.openerp .oe-search-options .searchview_extended_prop_value .oe_datepicker_master {
.openerp .oe-search-options .searchview_extended_prop_value .o_datepicker .o_datepicker_input {
width: 100%;
}
.openerp .oe-search-options .searchview_extended_prop_value .fa-calendar {
.openerp .oe-search-options .searchview_extended_prop_value .o_datepicker .o_datepicker_button {
margin-left: -21px;
cursor: pointer;
}
@@ -2212,10 +2212,10 @@
width: 100% !important;
text-align: right;
}
.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_datetime input.oe_datepicker_master, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_date input.oe_datepicker_master {
.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_datetime input.o_datepicker_input, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_date input.o_datepicker_input {
width: 100% !important;
}
.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_datetime .oe_datepicker_main, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_date .oe_datepicker_main {
.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_datetime .o_datepicker, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_date .o_datepicker {
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
}
addons/web/static/src/css/base.sass
+8 -8
View File
@@ -1058,14 +1058,14 @@ $sheet-padding: 16px
> select, > input
width: -webkit-calc(100% - 20px)
width: calc(100% - 20px)
.oe_datepicker_main
.o_datepicker
width: -webkit-calc(100% - 20px)
width: calc(100% - 20px)
.oe_datepicker_master
width: 100%
.fa-calendar
margin-left: -21px
cursor: pointer
.o_datepicker_input
width: 100%
.o_datepicker_button
margin-left: -21px
cursor: pointer
span.remove-filter
position: absolute
top: 6px
@@ -1900,9 +1900,9 @@ $sheet-padding: 16px
width: 100% !important
text-align: right
&.oe_form_field_datetime,&.oe_form_field_date
input.oe_datepicker_master
input.o_datepicker_input
width: 100% !important
.oe_datepicker_main
.o_datepicker
width: -webkit-calc(100% - 20px)
width: calc(100% - 20px)
&.oe_form_field_reference
addons/web/static/src/js/views/form_widgets.js
+1 -1
View File
@@ -500,7 +500,7 @@ var FieldDatetime = common.AbstractField.extend(common.ReinitializeFieldMixin, {
},
is_syntax_valid: function() {
if (!this.get("effective_readonly") && this.datewidget) {
return this.datewidget.is_valid_();
return this.datewidget.is_valid();
}
return true;
},
addons/web/static/src/js/widgets/date_picker.js
+57 -55
View File
@@ -8,67 +8,66 @@ var Widget = require('web.Widget');
var _t = core._t;
var DateTimeWidget = Widget.extend({
var DateWidget = Widget.extend({
template: "web.datepicker",
type_of_date: "datetime",
type_of_date: "date",
events: {
'dp.change .oe_datepicker_main': 'change_datetime',
'dp.show .oe_datepicker_main': 'set_datetime_default',
'change .oe_datepicker_master': 'change_datetime',
'dp.change': 'change_datetime',
'dp.show': 'set_datetime_default',
'change .o_datepicker_input': 'change_datetime',
},
init: function(parent) {
this._super(parent);
this.name = parent.name;
},
start: function() {
init: function(parent, options) {
this._super.apply(this, arguments);
var l10n = _t.database.parameters;
var options = {
pickTime: true,
useSeconds: true,
this.name = parent.name;
this.options = _.defaults(options || {}, {
pickTime: this.type_of_date === 'datetime',
useSeconds: this.type_of_date === 'datetime',
startDate: moment({ y: 1900 }),
endDate: moment().add(200, "y"),
calendarWeeks: true,
icons : {
icons: {
time: 'fa fa-clock-o',
date: 'fa fa-calendar',
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down'
},
},
language : moment.locale(),
format : time.strftime_to_moment_format(l10n.date_format +' '+ l10n.time_format),
};
this.$input = this.$el.find('input.oe_datepicker_master');
if (this.type_of_date === 'date') {
options.pickTime = false;
options.useSeconds = false;
options.format = time.strftime_to_moment_format(l10n.date_format);
}
this.picker = this.$('.oe_datepicker_main').datetimepicker(options);
this.set_readonly(false);
this.set({'value': false});
format : time.strftime_to_moment_format((this.type_of_date === 'datetime')? (l10n.date_format + ' ' + l10n.time_format) : l10n.date_format),
});
},
set_value: function(value_) {
this.set({'value': value_});
this.$input.val(value_ ? this.format_client(value_) : '');
start: function() {
this.$input = this.$('input.o_datepicker_input');
this.$el.datetimepicker(this.options);
this.picker = this.$el.data('DateTimePicker');
this.set_readonly(false);
this.set_value(false);
},
set_value: function(value) {
this.set({'value': value});
this.$input.val((value)? this.format_client(value) : '');
this.picker.setValue(value);
},
get_value: function() {
return this.get('value');
},
set_value_from_ui_: function() {
var value_ = this.$input.val() || false;
this.set_value(this.parse_client(value_));
set_value_from_ui: function() {
var value = this.$input.val() || false;
this.set_value(this.parse_client(value));
},
set_readonly: function(readonly) {
this.readonly = readonly;
this.$input.prop('readonly', this.readonly);
},
is_valid_: function() {
var value_ = this.$input.val();
if (value_ === "") {
is_valid: function() {
var value = this.$input.val();
if(value === "") {
return true;
} else {
try {
this.parse_client(value_);
this.parse_client(value);
return true;
} catch(e) {
return false;
@@ -81,40 +80,43 @@ var DateTimeWidget = Widget.extend({
format_client: function(v) {
return formats.format_value(v, {"widget": this.type_of_date});
},
set_datetime_default: function(){
set_datetime_default: function() {
//when opening datetimepicker the date and time by default should be the one from
//the input field if any or the current day otherwise
if (_.contains(['datetime', 'date'], this.type_of_date)) {
var value = moment().second(0);
if (this.$input.val().length !== 0 && this.is_valid_()){
value = this.$input.val();
}
var dt = this.$('.oe_datepicker_main').data('DateTimePicker');
// temporarily set pickTime to true to bypass datetimepicker hiding on setValue
// see https://github.com/Eonasdan/bootstrap-datetimepicker/issues/603
var saved_picktime = dt.options.pickTime;
dt.options.pickTime = true;
dt.setValue(value);
dt.options.pickTime = saved_picktime;
var value = moment().second(0);
if(this.$input.val().length !== 0 && this.is_valid()) {
value = this.$input.val();
}
// temporarily set pickTime to true to bypass datetimepicker hiding on setValue
// see https://github.com/Eonasdan/bootstrap-datetimepicker/issues/603
var saved_picktime = this.picker.options.pickTime;
this.picker.options.pickTime = true;
this.picker.setValue(value);
this.picker.options.pickTime = saved_picktime;
},
change_datetime: function(e) {
if ((e.type !== "keypress" || e.which === 13) && this.is_valid_()) {
this.set_value_from_ui_();
if(this.is_valid()) {
this.set_value_from_ui();
this.trigger("datetime_changed");
}
},
commit_value: function () {
commit_value: function() {
this.change_datetime();
},
destroy: function() {
this.picker.destroy();
this._super.apply(this, arguments);
},
});
var DateWidget = DateTimeWidget.extend({
type_of_date: "date"
var DateTimeWidget = DateWidget.extend({
type_of_date: "datetime"
});
return {
DateTimeWidget: DateTimeWidget,
DateWidget: DateWidget,
DateTimeWidget: DateTimeWidget,
};
});
addons/web/static/src/xml/base.xml
+8 -10
View File
@@ -715,16 +715,14 @@
</div>
</t>
<t t-name="web.datepicker">
<span>
<t t-set="placeholder" t-value="widget.getParent().node and widget.getParent().node.attrs.placeholder"/>
<div class="oe_datepicker_main input-group">
<input type="text"
t-att-name="widget.name"
t-att-placeholder="placeholder"
class="oe_datepicker_master"
/><span class="fa fa-calendar datepickerbutton"/>
</div>
</span>
<t t-set="placeholder" t-value="widget.getParent().node and widget.getParent().node.attrs.placeholder"/>
<div class="o_datepicker">
<input type="text"
class="o_datepicker_input"
t-att-name="widget.name"
t-att-placeholder="placeholder"/>
<span class="fa fa-calendar o_datepicker_button"/>
</div>
</t>
<t t-name="FieldDate">
<span class="oe_form_field oe_datepicker_root oe_form_field_date" t-att-style="widget.node.attrs.style"/>