forked from Techsystech/web
[11.0][MIG] web_widget_timepicker
Alexandre Díaz
David Alonso
parent
f679cb371b
commit
51c3d56b4a
|
|
@ -1,82 +1,19 @@
|
|||
.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
|
||||
:target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
|
||||
:alt: License: AGPL-3
|
||||
This file is going to be generated by oca-gen-addon-readme.
|
||||
|
||||
===============================
|
||||
Timepicker widget in form views
|
||||
===============================
|
||||
Manual changes will be overwritten.
|
||||
|
||||
This module provides a timepicker widget for float fields.
|
||||
It can be used as a replacement for the standard float_time widget in form views.
|
||||
Please provide content in the readme directory:
|
||||
|
||||
DESCRIPTION.rst (required)
|
||||
INSTALL.rst (optional)
|
||||
CONFIGURE.rst (optional)
|
||||
USAGE.rst (optional, highly recommended)
|
||||
DEVELOP.rst (optional)
|
||||
ROADMAP.rst (optional)
|
||||
HISTORY.rst (optional, recommended)
|
||||
CONTRIBUTORS.rst (optional, highly recommended)
|
||||
CREDITS.rst (optional)
|
||||
|
||||
|picker|
|
||||
Content of this README will also be drawn from the addon manifest, from keys such as name, authors, maintainers, development_status, and license.
|
||||
|
||||
|
||||
The widget has the following default timepicker options:
|
||||
|
||||
* the possible selection is based on 15 minute interval (step: 15)
|
||||
* 24 hour mode in H:i format (timeFormat: 'H:i')
|
||||
* scroll selection starts at current time (scrollDefault: 'now')
|
||||
|
||||
|
||||
|formview|
|
||||
|
||||
|
||||
Usage
|
||||
=====
|
||||
|
||||
In the form view declaration, put widget='timepicker' attribute in the field tag::
|
||||
|
||||
...
|
||||
<field name="arch" type="xml">
|
||||
<form string="View name">
|
||||
...
|
||||
<field name="name"/>
|
||||
<field name="mytimefieldname" widget="timepicker"/>
|
||||
...
|
||||
</form>
|
||||
</field>
|
||||
...
|
||||
|
||||
Additional jquery-timepicker plugin options can be specified by an options attribute::
|
||||
|
||||
...
|
||||
<field name="mytimefieldname" widget="timepicker" options="{'step': '30', 'disableTextInput': false}"/>
|
||||
...
|
||||
|
||||
See the available options at `jquery-timepicker <https://github.com//jonthornton//jquery-timepicker#timepicker-plugin-for-jquery>`_.
|
||||
|
||||
.. |picker| image:: ./images/picker.png
|
||||
.. |formview| image:: ./images/form_view.png
|
||||
|
||||
|
||||
Credits
|
||||
=======
|
||||
|
||||
* The module uses the `jquery-timepicker plugin <https://github.com//jonthornton//jquery-timepicker#timepicker-plugin-for-jquery>`_ by Jon Thornton. This software is made available under the open source MIT License. © 2014 Jon Thornton and contributors
|
||||
|
||||
* Odoo Community Association (OCA)
|
||||
|
||||
|
||||
Contributors
|
||||
------------
|
||||
|
||||
* Michael Fried <Michael.Fried@vividlab.de>
|
||||
* Kaushal Prajapati <kbprajapati@live.com>
|
||||
|
||||
|
||||
Maintainer
|
||||
----------
|
||||
|
||||
.. image:: https://odoo-community.org/logo.png
|
||||
:alt: Odoo Community Association
|
||||
:target: https://odoo-community.org
|
||||
|
||||
This module is maintained by the OCA.
|
||||
|
||||
OCA, or the Odoo Community Association, is a nonprofit organization whose
|
||||
mission is to support the collaborative development of Odoo features and
|
||||
promote its widespread use.
|
||||
|
||||
To contribute to this module, please visit https://odoo-community.org.
|
||||
A good, one sentence summary in the manifest is also highly recommended.
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
|
||||
|
|
|
|||
|
|
@ -1,31 +1,20 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
# © 2016 Vividlab (<http://www.vividlab.de>)
|
||||
# Copyright 2016 Vividlab (<http://www.vividlab.de>)
|
||||
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
|
||||
{
|
||||
"name": "Web Timepicker Widget",
|
||||
"version": "10.0.1.0.0",
|
||||
"version": "11.0.1.0.0",
|
||||
"author": "VividLab, "
|
||||
"Odoo Community Association (OCA), "
|
||||
"Kaushal Prajapati",
|
||||
"Kaushal Prajapati, "
|
||||
"Alexandre Díaz, "
|
||||
"Odoo Community Association (OCA)",
|
||||
"license": "AGPL-3",
|
||||
"category": "Web",
|
||||
"website": "http://www.vividlab.de",
|
||||
"website": "https://github.com/OCA/web/",
|
||||
'installable': True,
|
||||
"depends": [
|
||||
"web",
|
||||
],
|
||||
"css": [
|
||||
"static/src/lib/jquery.timerpicker/jquery.timepicker.css",
|
||||
"static/src/css/web_widget_timepicker.css",
|
||||
],
|
||||
"js": [
|
||||
"static/src/lib/jquery.timerpicker/jquery.timepicker.js",
|
||||
"static/src/js/web_widget_timepicker.js",
|
||||
],
|
||||
"data": [
|
||||
"views/web_widget_timepicker_assets.xml",
|
||||
],
|
||||
"qweb": [
|
||||
"static/src/xml/web_widget_timepicker.xml",
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
* Michael Fried <Michael.Fried@vividlab.de>
|
||||
* Kaushal Prajapati <kbprajapati@live.com>
|
||||
* Alexandre Díaz <dev@redneboa.es>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
* The module uses the `datetime-picker <https://eonasdan.github.io/bootstrap-datetimepicker/Options/>`_. plugin by Jonathan Peterson. This software is made available under the open source MIT License. Copyright (c) 2015 Jonathan Peterson
|
||||
|
||||
* Odoo Community Association (OCA)
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
This module provides a timepicker widget for float fields.
|
||||
It can be used as a replacement for the standard float_time widget in form views.
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
In the form view declaration, put widget='timepicker' attribute in the field tag::
|
||||
|
||||
...
|
||||
<field name="arch" type="xml">
|
||||
<form string="View name">
|
||||
...
|
||||
<field name="name"/>
|
||||
<field name="mytimefieldname" widget="timepicker"/>
|
||||
...
|
||||
</form>
|
||||
</field>
|
||||
...
|
||||
|
||||
Additional bootstrap datetime-picker plugin options can be specified by an options attribute::
|
||||
|
||||
...
|
||||
<field name="mytimefieldname" widget="timepicker" options="{'datepicker': {'stepping': 15}}"/>
|
||||
...
|
||||
|
||||
See the available options at `datetime-picker <https://eonasdan.github.io/bootstrap-datetimepicker/Options/>`_.
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.o_form_editable .o_form_field_time input {
|
||||
width: 6em;
|
||||
}
|
||||
.o_form_field_time{
|
||||
display: -webkit-inline-box !important;
|
||||
}
|
||||
|
|
@ -1,89 +1,96 @@
|
|||
/* Copyright 2016 Vividlab <http://www.vividlab.de>
|
||||
* Copyright 2017 Kaushal Prajapati <kbprajapati@live.com>
|
||||
* Copyright 2019 Alexandre Díaz <dev@redneboa.es>
|
||||
* License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). */
|
||||
odoo.define('web_widget_timepicker', function (require) {
|
||||
"use strict";
|
||||
'use strict';
|
||||
|
||||
var core = require('web.core');
|
||||
var formats = require('web.formats');
|
||||
var common = require('web.form_common');
|
||||
var field_registry = require('web.field_registry');
|
||||
var field_utils = require('web.field_utils');
|
||||
var basic_fields = require('web.basic_fields');
|
||||
var datepicker = require('web.datepicker');
|
||||
var FieldDate = basic_fields.FieldDate;
|
||||
|
||||
var TimePickerField = common.AbstractField.extend(common.ReinitializeFieldMixin, {
|
||||
is_field_number: true,
|
||||
template: "TimePickerField",
|
||||
internal_format: 'float_time',
|
||||
widget_class: 'o_form_field_time',
|
||||
events: {
|
||||
'change input': 'store_dom_value',
|
||||
},
|
||||
init: function (field_manager, node) {
|
||||
this._super(field_manager, node);
|
||||
|
||||
this.internal_set_value(0);
|
||||
var TimeWidget = datepicker.DateWidget.extend({
|
||||
type_of_date: "float_time",
|
||||
|
||||
this.options = _.defaults(this.options, {
|
||||
step: 15,
|
||||
selectOnBlur: true,
|
||||
timeFormat: 'H:i',
|
||||
scrollDefault: 'now',
|
||||
});
|
||||
},
|
||||
initialize_content: function() {
|
||||
if(!this.get("effective_readonly")) {
|
||||
this.$el.find('input').timepicker(this.options);
|
||||
this.setupFocus(this.$('input'));
|
||||
_onShow: function () {
|
||||
if (this.$input.val().length !== 0 && this.isValid()) {
|
||||
var value = this.$input.val();
|
||||
this.picker.date(new moment(value, this.options.format));
|
||||
this.$input.select();
|
||||
}
|
||||
},
|
||||
is_syntax_valid: function() {
|
||||
if (!this.get("effective_readonly") && this.$("input").size() > 0) {
|
||||
try {
|
||||
this.parse_value(this.$('input').val(), '');
|
||||
return true;
|
||||
} catch(e) {
|
||||
return false;
|
||||
|
||||
setValue: function (value) {
|
||||
this.set({'value': value});
|
||||
var formatted_value = value ? this._formatClient(value) : null;
|
||||
this.$input.val(formatted_value);
|
||||
if (this.picker) {
|
||||
var fdate = new moment(formatted_value, this.options.format);
|
||||
this.picker.date(fdate && fdate.isValid()
|
||||
? fdate : new moment());
|
||||
}
|
||||
},
|
||||
|
||||
getValue: function () {
|
||||
var value = this.get('value');
|
||||
return value ? this._formatClient(value) : null;
|
||||
},
|
||||
|
||||
changeDatetime: function () {
|
||||
if (this.isValid()) {
|
||||
var oldValue = this.getValue();
|
||||
this._setValueFromUi();
|
||||
var newValue = this.getValue();
|
||||
if (oldValue && newValue && newValue !== oldValue) {
|
||||
this.trigger("datetime_changed");
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
is_false: function() {
|
||||
return this.get('value') === '' || this._super();
|
||||
},
|
||||
focus: function() {
|
||||
var input = this.$('input:first')[0];
|
||||
return input ? input.focus() : false;
|
||||
},
|
||||
set_dimensions: function (height, width) {
|
||||
this._super(height, width);
|
||||
this.$('input').css({
|
||||
height: height,
|
||||
width: width
|
||||
});
|
||||
},
|
||||
store_dom_value: function () {
|
||||
if (!this.get('effective_readonly')) {
|
||||
this.internal_set_value(
|
||||
this.parse_value(
|
||||
this.$('input').val(), ''));
|
||||
}
|
||||
},
|
||||
parse_value: function(val, def) {
|
||||
return formats.parse_value(val, {"widget": this.internal_format}, def);
|
||||
},
|
||||
format_value: function(val, def) {
|
||||
return formats.format_value(val, {"widget": this.internal_format}, def);
|
||||
},
|
||||
render_value: function() {
|
||||
var show_value = this.format_value(this.get('value'), '');
|
||||
|
||||
if (!this.get("effective_readonly")) {
|
||||
this.$input = this.$el.find('input');
|
||||
this.$input.val(show_value);
|
||||
} else {
|
||||
this.$(".o_form_time_content").text(show_value);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
core.form_widget_registry.add('timepicker', TimePickerField);
|
||||
var FieldTimePicker = FieldDate.extend({
|
||||
supportedFieldTypes: ['float'],
|
||||
floatTimeFormat: "HH:mm",
|
||||
|
||||
init: function () {
|
||||
this._super.apply(this, arguments);
|
||||
var defDate = null;
|
||||
if (this.value) {
|
||||
defDate = new moment(this._formatValue(this.value),
|
||||
this.floatTimeFormat);
|
||||
}
|
||||
// Hard-Coded Format: Field is an float and conversion only accept
|
||||
// HH:mm format
|
||||
this.datepickerOptions = _.extend(this.datepickerOptions, {
|
||||
format: this.floatTimeFormat,
|
||||
defaultDate: defDate && defDate.isValid()
|
||||
? defDate : new moment(),
|
||||
});
|
||||
},
|
||||
|
||||
_isSameValue: function (value) {
|
||||
return value === this.value;
|
||||
},
|
||||
|
||||
_makeDatePicker: function () {
|
||||
return new TimeWidget(this, this.datepickerOptions);
|
||||
},
|
||||
|
||||
_formatValue: function (value) {
|
||||
return field_utils.format.float_time(value);
|
||||
},
|
||||
|
||||
_parseValue: function (value) {
|
||||
return field_utils.parse.float_time(value);
|
||||
},
|
||||
});
|
||||
|
||||
field_registry.add('timepicker', FieldTimePicker);
|
||||
return {
|
||||
TimePickerField: TimePickerField,
|
||||
TimeWidget: TimeWidget,
|
||||
FieldTimePicker: FieldTimePicker,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,72 +0,0 @@
|
|||
.ui-timepicker-wrapper {
|
||||
overflow-y: auto;
|
||||
max-height: 150px;
|
||||
width: 6.5em;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
|
||||
box-shadow:0 5px 10px rgba(0,0,0,0.2);
|
||||
outline: none;
|
||||
z-index: 10001;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui-timepicker-wrapper.ui-timepicker-with-duration {
|
||||
width: 13em;
|
||||
}
|
||||
|
||||
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
|
||||
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
|
||||
width: 11em;
|
||||
}
|
||||
|
||||
.ui-timepicker-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.ui-timepicker-duration {
|
||||
margin-left: 5px; color: #888;
|
||||
}
|
||||
|
||||
.ui-timepicker-list:hover .ui-timepicker-duration {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.ui-timepicker-list li {
|
||||
padding: 3px 0 3px 5px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui-timepicker-list:hover .ui-timepicker-selected {
|
||||
background: #fff; color: #000;
|
||||
}
|
||||
|
||||
li.ui-timepicker-selected,
|
||||
.ui-timepicker-list li:hover,
|
||||
.ui-timepicker-list .ui-timepicker-selected:hover {
|
||||
background: #1980EC; color: #fff;
|
||||
}
|
||||
|
||||
li.ui-timepicker-selected .ui-timepicker-duration,
|
||||
.ui-timepicker-list li:hover .ui-timepicker-duration {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.ui-timepicker-list li.ui-timepicker-disabled,
|
||||
.ui-timepicker-list li.ui-timepicker-disabled:hover,
|
||||
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
|
||||
color: #888;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ui-timepicker-list li.ui-timepicker-disabled:hover,
|
||||
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,21 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<templates id="template" xml:space="preserve">
|
||||
<t t-name="TimePickerField">
|
||||
<span t-att-class="'o_form_field '+widget.widget_class" t-att-style="widget.node.attrs.style">
|
||||
<t t-if="!widget.get('effective_readonly')">
|
||||
<input t-att-type="'text'"
|
||||
class="o_timepicker_input"
|
||||
t-att-id="widget.id_for_label"
|
||||
t-att-tabindex="widget.node.attrs.tabindex"
|
||||
t-att-autofocus="widget.node.attrs.autofocus"
|
||||
t-att-placeholder="widget.node.attrs.placeholder"
|
||||
t-att-maxlength="widget.field.size"/>
|
||||
<span class="fa fa-clock-o o_timepicker_button"/>
|
||||
</t>
|
||||
<t t-if="widget.get('effective_readonly')">
|
||||
<span class="o_form_time_content"/>
|
||||
</t>
|
||||
</span>
|
||||
</t>
|
||||
</templates>
|
||||
|
|
@ -2,17 +2,11 @@
|
|||
|
||||
<odoo>
|
||||
<template id="web_widget_timepicker_assets_backend"
|
||||
name="web_widget_timepicker assets"
|
||||
name="web_widget_timepicker_assets"
|
||||
inherit_id="web.assets_backend">
|
||||
<xpath expr="." position="inside">
|
||||
<script type="text/javascript"
|
||||
src="/web_widget_timepicker/static/src/lib/jquery.timepicker/jquery.timepicker.js"/>
|
||||
<script type="text/javascript"
|
||||
src="/web_widget_timepicker/static/src/js/web_widget_timepicker.js"/>
|
||||
<link rel="stylesheet"
|
||||
href="/web_widget_timepicker/static/src/lib/jquery.timepicker/jquery.timepicker.css"/>
|
||||
<link rel="stylesheet"
|
||||
href="/web_widget_timepicker/static/src/css/web_widget_timepicker.css"/>
|
||||
</xpath>
|
||||
</template>
|
||||
</odoo>
|
||||
|
|
|
|||
Loading…
Reference in New Issue