RisvanaCybro
1 year ago
80 changed files with 1841 additions and 0 deletions
@ -0,0 +1,46 @@ |
|||
.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg |
|||
:target: https://www.gnu.org/licenses/agpl-3.0-standalone.html |
|||
:alt: License: AGPL-3 |
|||
|
|||
Field Time Picker |
|||
================= |
|||
Time picker for fields, using Wickedpicker. |
|||
|
|||
Configuration |
|||
============================ |
|||
After installing the module, you can use character fields for reading time input with the help of a time picker. |
|||
When you define the fields in xml, use 'widget="timepicker"' for those fields which you need to use as time fields. |
|||
|
|||
Company |
|||
------- |
|||
* `Cybrosys Techno Solutions <https://cybrosys.com/>`__ |
|||
|
|||
License |
|||
------- |
|||
General Public License, Version 3 (AGPL v3). |
|||
(https://www.gnu.org/licenses/agpl-3.0-standalone.html) |
|||
|
|||
Credits |
|||
------- |
|||
* Developer: (V17) Mruthul Raj, Contact: odoo@cybrosys.com |
|||
|
|||
Contacts |
|||
-------- |
|||
* Mail Contact : odoo@cybrosys.com |
|||
* Website : https://cybrosys.com |
|||
|
|||
Bug Tracker |
|||
----------- |
|||
Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. |
|||
|
|||
Maintainer |
|||
========== |
|||
.. image:: https://cybrosys.com/images/logo.png |
|||
:target: https://cybrosys.com |
|||
|
|||
This module is maintained by Cybrosys Technologies. |
|||
For support and more information, please visit `Our Website <https://cybrosys.com/>`__ |
|||
|
|||
Further information |
|||
=================== |
|||
HTML Description: `<static/description/index.html>`__ |
|||
@ -0,0 +1,21 @@ |
|||
# -*- coding: utf-8 -*- |
|||
################################################################################ |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies (<https://www.cybrosys.com>) |
|||
# Author: Mruthul Raj(<https://www.cybrosys.com>) |
|||
# |
|||
# This program is free software: you can modify |
|||
# it under the terms of the GNU Affero General Public License (AGPL) as |
|||
# published by the Free Software Foundation, either version 3 of the |
|||
# License, or (at your option) any later version. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU Affero General Public License for more details. |
|||
# |
|||
# You should have received a copy of the GNU Affero General Public License |
|||
# along with this program. If not, see <https://www.gnu.org/licenses/>. |
|||
# |
|||
################################################################################ |
|||
@ -0,0 +1,47 @@ |
|||
# -*- coding: utf-8 -*- |
|||
################################################################################ |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies (<https://www.cybrosys.com>). |
|||
# Author: Mruthul Raj(<https://www.cybrosys.com>) |
|||
# |
|||
# This program is free software: you can modify |
|||
# it under the terms of the GNU Affero General Public License (AGPL) as |
|||
# published by the Free Software Foundation, either version 3 of the |
|||
# License, or (at your option) any later version. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU Affero General Public License for more details. |
|||
# |
|||
# You should have received a copy of the GNU Affero General Public License |
|||
# along with this program. If not, see <https://www.gnu.org/licenses/>. |
|||
# |
|||
################################################################################ |
|||
{ |
|||
'name': 'Field Time Picker', |
|||
'version': '17.0.1.0.0', |
|||
'category': 'Extra Tools', |
|||
'summary': 'Time Picker Widget Using Wickedpicker', |
|||
'description': 'Field Time Picker enhances the time input functionality in ' |
|||
'Odoo', |
|||
'author': 'Cybrosys Techno Solutions', |
|||
'company': 'Cybrosys Techno Solutions', |
|||
'maintainer': 'Cybrosys Techno Solutions', |
|||
'website': 'https://www.cybrosys.com/', |
|||
'depends': ['web'], |
|||
"assets": { |
|||
'web.assets_backend': [ |
|||
'field_timepicker/static/wickedpicker/dist/wickedpicker.min.css', |
|||
'field_timepicker/static/wickedpicker/dist/wickedpicker.min.js', |
|||
'field_timepicker/static/src/xml/timepicker_templates.xml', |
|||
'field_timepicker/static/src/js/time_widget.js', |
|||
], |
|||
}, |
|||
'images': ['static/description/banner.jpg'], |
|||
'license': 'AGPL-3', |
|||
'installable': True, |
|||
'auto_install': False, |
|||
'application': False, |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
## Module <field_timepicker> |
|||
|
|||
#### 04.01.2024 |
|||
#### Version 17.0.1.0.0 |
|||
#### ADD |
|||
- Initial Commit for Field Time Picker |
|||
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 310 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 576 B |
|
After Width: | Height: | Size: 733 B |
|
After Width: | Height: | Size: 911 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 673 B |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 878 B |
|
After Width: | Height: | Size: 653 B |
|
After Width: | Height: | Size: 905 B |
|
After Width: | Height: | Size: 839 B |
|
After Width: | Height: | Size: 427 B |
|
After Width: | Height: | Size: 627 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 589 B |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 565 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 967 B |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 912 KiB |
|
After Width: | Height: | Size: 228 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 355 KiB |
|
After Width: | Height: | Size: 203 KiB |
|
After Width: | Height: | Size: 194 KiB |
|
After Width: | Height: | Size: 183 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,668 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>Odoo App 3 Index</title> |
|||
<!-- Bootstrap CSS --> |
|||
<link rel="stylesheet" |
|||
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" |
|||
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" |
|||
crossorigin="anonymous"> |
|||
<link rel="stylesheet" |
|||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"> |
|||
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" |
|||
rel="stylesheet"> |
|||
</head> |
|||
<body> |
|||
<section> |
|||
<div class="container" |
|||
style="font-family: 'Inter', sans-serif !important;background-color: #fff !important;"> |
|||
<div class="row"> |
|||
<div class="col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between flex-wrap align-items-sm-center" |
|||
style="border-bottom:1px solid rgba(0, 0, 0, 0.22)"> |
|||
<div class="my-3"> |
|||
<img src="assets/misc/Cybrosys R.png" |
|||
style="width:auto !important; height:40px !important"> |
|||
</div> |
|||
<div class="my-3 d-flex align-items-center"> |
|||
<div class="text-center" |
|||
style="background-color:#017E84 !important;font-size: 0.8rem !important; color:#fff !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width: 120px !important;"> |
|||
Community |
|||
</div> |
|||
<div class="text-center" |
|||
style="background-color:#875A7B !important; color:#fff !important;font-size: 0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important;min-width: 120px !important;"> |
|||
Enterprise |
|||
</div> |
|||
<div class="text-center" |
|||
style="background-color:#7C7BAD !important; color:#fff !important;font-size: 0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width: 120px !important;"> |
|||
Odoo.sh |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-sm-12 col-md-12 col-lg-12 text-center d-flex align-items-center flex-column" |
|||
style="margin: 80px 0px !important;"> |
|||
<h1 style="font-size: 2.8rem;font-weight: 700; color: |
|||
#1A202C;"> |
|||
Field Time Picker</h1> |
|||
<p class="my-3 mb-4" |
|||
style="max-width: 80%; font-weight: 400 !important; line-height: 32px; color: #718096;"> |
|||
Add Time Picker Widget That Can Be Used With Character Type |
|||
Fields In Odoo. |
|||
</p> |
|||
<div style="width: 80%; margin-top: 3rem;"> |
|||
<img src="assets/screenshots/hero.gif" |
|||
class="img-responsive" width="100%" height="auto"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="container mt-5 mb-5"> |
|||
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4"> |
|||
<p class="m-0" |
|||
style="font-weight: 600; font-size: 24px; color:#714b67 !important"> |
|||
Key Highlights |
|||
</p> |
|||
</div> |
|||
<div class="row py-4"> |
|||
<div class="col-md-6 col-sm-12 p-3"> |
|||
<div class="d-flex h-100" style="padding: 30px;border-radius: 12px; |
|||
background: #FFF; |
|||
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); "> |
|||
<div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67; |
|||
display: flex; justify-content: center; align-items: center; |
|||
margin-right: 10px; flex-shrink: 0;"> |
|||
<i class="fa-solid fa-star " |
|||
style="color: #fff;font-size:14px;"></i> |
|||
</div> |
|||
<div> |
|||
<p style="color: #1A202C;font-weight: 600; |
|||
font-size: 1.2rem; margin-bottom: 2px;"> |
|||
More convenient to input time values using a picker.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6 col-sm-12 p-3"> |
|||
<div class="d-flex h-100" style="padding: 30px;border-radius: 12px; |
|||
background: #FFF; |
|||
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); "> |
|||
<div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67; |
|||
display: flex; justify-content: center; align-items: center; |
|||
margin-right: 10px; flex-shrink: 0;"> |
|||
<i class="fa-solid fa-star " |
|||
style="color: #fff;font-size:14px;"></i> |
|||
</div> |
|||
<div> |
|||
<p style="color: #1A202C;font-weight: 600; |
|||
font-size: 1.2rem; margin-bottom: 2px;"> |
|||
Users can select time values accurately from the picker.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="container rounded"> |
|||
<ul class="nav nav-tabs d-flex" |
|||
style="width: fit-content;margin: 0 auto;gap: 1rem;"> |
|||
<li class="col text-center py-2 text-nowrap " |
|||
style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;"> |
|||
<a |
|||
class="active show" data-toggle="tab" href="#tab1" |
|||
style="color: #fff;font-weight: 500; background-color: #714B67; text-decoration: none;"> |
|||
<i class="fa-regular fa-image pr-2" |
|||
style="color: #fff;"></i> |
|||
Screenshots</a></li> |
|||
<li class="col text-center py-2 text-nowrap " |
|||
style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;"> |
|||
<a |
|||
data-toggle="tab" href="#tab2" |
|||
style="color: #fff;font-weight: 500; text-decoration: none;"><i |
|||
class="fa-solid fa-star pr-2" |
|||
style="color: #fff;"></i>Features</a></li> |
|||
<li class="col text-center py-2 text-nowrap " |
|||
style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;"> |
|||
<a |
|||
data-toggle="tab" href="#tab3" |
|||
style="color: #fff;font-weight: 500; text-decoration: none; background-color: #714B67;"><i |
|||
class="fa-solid fa-book-open pr-2" |
|||
style="color: #fff;"></i>Released Notes</a></li> |
|||
</ul> |
|||
<div class="tab-content" |
|||
style="background-color: rgba(121, 113, 119, 0.04);"> |
|||
<div id="tab1" class="tab-pane fade in active show"> |
|||
<div class="col-lg-12 py-2" |
|||
style="padding: 1rem 4rem !important;"> |
|||
<div |
|||
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);"> |
|||
<div class="row justify-content-center p-3 w-100 m-0"> |
|||
<img src="assets/screenshots/1.png" |
|||
class="img-responsive" width="100%" |
|||
height="auto"> |
|||
</div> |
|||
<div class="px-3"> |
|||
<h4 class="mt-2" |
|||
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important"> |
|||
Just add widget='timepicker' to character |
|||
field.</h4> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-12 py-2" |
|||
style="padding: 1rem 4rem !important;"> |
|||
<div |
|||
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);"> |
|||
<div class="row justify-content-center p-3 w-100 m-0"> |
|||
<img src="assets/screenshots/2.png" |
|||
class="img-responsive" width="100%" |
|||
height="auto"> |
|||
</div> |
|||
<div class="px-3"> |
|||
<h4 class="mt-2" |
|||
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important"> |
|||
You will get time picker like this.</h4> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-12 py-2" |
|||
style="padding: 1rem 4rem !important;"> |
|||
<div |
|||
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);"> |
|||
<div class="row justify-content-center p-3 w-100 m-0"> |
|||
<img src="assets/screenshots/3.png" |
|||
class="img-responsive" width="100%" |
|||
height="auto"> |
|||
</div> |
|||
<div class="px-3"> |
|||
<h4 class="mt-2" |
|||
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important"> |
|||
If its not Char field this Popup will |
|||
appear.</h4> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div id="tab2" class="tab-pane fade"> |
|||
<div class="col-mg-12" style="padding: 1rem 4rem;"> |
|||
<ul style="list-style: none; padding: 1rem 0;font-weight: 500;"> |
|||
<li class="py-3" |
|||
style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);"> |
|||
<span style="margin-right: 12px;"><img |
|||
src="assets/misc/star (1) 2.svg" |
|||
alt="" |
|||
width="16px"></span> You will get a |
|||
timepicker for the character fields in odoo.. |
|||
</li> |
|||
<li class="py-3" |
|||
style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);"> |
|||
<span style="margin-right: 12px;"><img |
|||
src="assets/misc/star (1) 2.svg" |
|||
alt="" |
|||
width="16px"></span>Time picker is |
|||
in 24-hour format, and also you will get |
|||
seconds. |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div id="tab3" class="tab-pane fade"> |
|||
<div class="col-mg-12 active" style="padding: 1rem 4rem;"> |
|||
<div class="py-3" |
|||
style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);"> |
|||
<div class="d-flex mb-3" |
|||
style="font-size: 0.8rem; font-weight: 500;"><span>Version |
|||
17.0.1.0.0</span><span |
|||
class="px-2">|</span><span |
|||
style="color: #714B67;font-weight: 600;">Released on:4th Jan 2024</span> |
|||
</div> |
|||
<p class="m-0" |
|||
style=" color:#718096!important; font-size:1rem !important;line-height: 28px;"> |
|||
Initial Commit for Field Time Picker.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="container mt-5"> |
|||
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-5"> |
|||
<p class="m-0" |
|||
style="font-weight: 600; font-size: 24px; color:#000 !important"> |
|||
Related Products</p> |
|||
</div> |
|||
</div> |
|||
<div id="myCarousel" class="carousel slide py-3" data-ride="carousel"> |
|||
<div class="carousel-inner"> |
|||
<div class="carousel-item active"> |
|||
<div class="row p-4"> |
|||
<div class="col"> |
|||
<div class="p-3"> |
|||
<a href="https://apps.odoo.com/apps/modules/17.0/base_accounting_kit/" |
|||
style="color: #000; text-decoration: none;"> |
|||
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;"> |
|||
<div style="width: 300px; "> |
|||
<img src="assets/modules/1.gif" |
|||
alt="" width="100%" |
|||
height="auto"> |
|||
|
|||
</div> |
|||
<p class="text-center pt-2 text-black font-weight-bold"> |
|||
Odoo 17 Full Accounting Kit</p> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="col"> |
|||
<div class="p-3"> |
|||
<a href="https://apps.odoo.com/apps/modules/17.0/invoice_format_editor/" |
|||
style="color: #000; text-decoration: none;"> |
|||
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;"> |
|||
<div style="width: 300px; "> |
|||
<img src="assets/modules/2.png" |
|||
alt="" width="100%" |
|||
height="auto"> |
|||
|
|||
</div> |
|||
<p class="text-center pt-2 text-black font-weight-bold"> |
|||
Invoice Format Editor</p> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="col"> |
|||
<div class="p-3"> |
|||
<a href="https://apps.odoo.com/apps/modules/17.0/inventory_barcode_scanning/" |
|||
style="color: #000; text-decoration: none;"> |
|||
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;"> |
|||
<div style="width: 300px; "> |
|||
<img src="assets/modules/3.png" |
|||
alt="" width="100%" |
|||
height="auto"> |
|||
|
|||
</div> |
|||
<p class="text-center pt-2 text-black font-weight-bold"> |
|||
Barcode scanning in Inventory</p> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="carousel-item"> |
|||
<div class="row p-4"> |
|||
<div class="col"> |
|||
<div class="p-3"> |
|||
<a href="https://apps.odoo.com/apps/modules/17.0/whatsapp_redirect/" |
|||
style="color: #000; text-decoration: none;"> |
|||
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;"> |
|||
<div style="width: 300px; "> |
|||
<img src="assets/modules/4.jpg" |
|||
alt="" width="100%" |
|||
height="auto"> |
|||
|
|||
</div> |
|||
<p class="text-center pt-2 text-black font-weight-bold"> |
|||
Send Whatsapp Message</p> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="col"> |
|||
<div class="p-3"> |
|||
<a href="https://apps.odoo.com/apps/modules/17.0/base_account_budget/" |
|||
style="color: #000; text-decoration: none;"> |
|||
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;"> |
|||
<div style="width: 300px;"> |
|||
<img src="assets/modules/5.jpg" |
|||
alt="" width="100%" |
|||
height="auto"> |
|||
|
|||
</div> |
|||
<p class="text-center pt-2 text-black font-weight-bold"> |
|||
Budget Management</p> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="col"> |
|||
<div class="p-3"> |
|||
<a href="https://apps.odoo.com/apps/modules/17.0/product_barcode/" |
|||
style="color: #000; text-decoration: none;"> |
|||
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;"> |
|||
<div style="width: 300px;"> |
|||
<img src="assets/modules/6.png" |
|||
alt="" width="100%" |
|||
height="auto"> |
|||
</div> |
|||
<p class="text-center pt-2 text-black font-weight-bold"> |
|||
Product Barcode Generator</p> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<a class="carousel-control-prev" href="#myCarousel" |
|||
data-slide="prev" style="width: 35px; color: #000;"> |
|||
<span class="carousel-control-prev-icon"> |
|||
<i class="fa fa-chevron-left" |
|||
style="font-size: 24px;"></i> |
|||
</span> |
|||
</a> |
|||
<a class="carousel-control-next" href="#myCarousel" |
|||
data-slide="next" style="width: 35px; color: #000;"> |
|||
<span class="carousel-control-next-icon"> |
|||
<i class="fa fa-chevron-right" |
|||
style="font-size: 24px;"></i> |
|||
</span> |
|||
</a> |
|||
</div> |
|||
<div class="container mt-5"> |
|||
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4"> |
|||
<p class="m-0" |
|||
style="font-weight: 600; font-size: 24px; color:#000 !important"> |
|||
Our Services</p> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="container my-5"> |
|||
<div class="row py-3"> |
|||
<div class="col-md-4 col-sm-6 px-4 py-4"> |
|||
<div |
|||
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;"> |
|||
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);"> |
|||
<div style="background-color:#13EA36 ; border-radius: 50%; padding: 15px; width: 68px; |
|||
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);"> |
|||
<img src="assets/icons/cogs.png" |
|||
alt="service-icon" width="38px" |
|||
height="auto"> |
|||
</div> |
|||
</div> |
|||
<p style="margin-top: 20px; font-weight: bold;">Odoo |
|||
Customization</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4 col-sm-6 px-4 py-4"> |
|||
<div |
|||
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;"> |
|||
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);"> |
|||
<div style="background-color:#DBC711; border-radius: 50%; padding: 15px; width: 68px; |
|||
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);"> |
|||
<img src="assets/icons/wrench.png" |
|||
alt="service-icon" width="38px" |
|||
height="auto"> |
|||
</div> |
|||
</div> |
|||
<p style="margin-top: 20px; font-weight: bold;">Odoo |
|||
Implementation</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4 col-sm-6 px-4 py-4"> |
|||
<div |
|||
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;"> |
|||
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);"> |
|||
<div style="background-color:#FF6B6B ; border-radius: 50%; padding: 15px; width: 68px; |
|||
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);"> |
|||
<img src="assets/icons/lifebuoy.png" |
|||
alt="service-icon" width="38px" |
|||
height="auto"> |
|||
</div> |
|||
</div> |
|||
<p style="margin-top: 20px; font-weight: bold;">Odoo |
|||
Support</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4 col-sm-6 px-4 py-4"> |
|||
<div |
|||
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;"> |
|||
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);"> |
|||
<div style="background-color:#FFA801 ; border-radius: 50%; padding: 15px; width: 68px; |
|||
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);"> |
|||
<img src="assets/icons/user.png" |
|||
alt="service-icon" width="38px" |
|||
height="auto"> |
|||
</div> |
|||
</div> |
|||
<p style="margin-top: 20px; font-weight: bold;">Hire |
|||
Odoo Developer</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4 col-sm-6 px-4 py-4"> |
|||
<div |
|||
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;"> |
|||
|
|||
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);"> |
|||
<div style="background-color:#54A0FF; border-radius: 50%; padding: 15px; width: 68px; |
|||
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);"> |
|||
<img src="assets/icons/puzzle.png" |
|||
alt="service-icon" width="38px" |
|||
height="auto"> |
|||
</div> |
|||
</div> |
|||
<p style="margin-top: 20px; font-weight: bold;">Odoo |
|||
Integration</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4 col-sm-6 px-4 py-4"> |
|||
<div |
|||
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;"> |
|||
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);"> |
|||
<div style="background-color:#6D7680 ; border-radius: 50%; padding: 15px; width: 68px; |
|||
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);"> |
|||
<img src="assets/icons/update.png" |
|||
alt="service-icon" width="38px" |
|||
height="auto"> |
|||
</div> |
|||
</div> |
|||
<p style="margin-top: 20px; font-weight: bold;">Odoo |
|||
Migration</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4 col-sm-6 px-4 py-4"> |
|||
<div |
|||
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;"> |
|||
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);"> |
|||
<div style="background-color:#786FA6 ; border-radius: 50%; padding: 15px; width: 68px; |
|||
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);"> |
|||
<img src="assets/icons/consultation.png" |
|||
alt="service-icon" width="38px" |
|||
height="auto"> |
|||
</div> |
|||
</div> |
|||
<p style="margin-top: 20px; font-weight: bold;">Odoo |
|||
Consultancy</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4 col-sm-6 px-4 py-4"> |
|||
<div |
|||
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;position: relative;border-radius: 4px;"> |
|||
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);"> |
|||
<div style="background-color:#F8A5C2 ; border-radius: 50%; padding: 15px; width: 68px; |
|||
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);"> |
|||
<img src="assets/icons/training.png" |
|||
alt="service-icon" width="38px" |
|||
height="auto"> |
|||
</div> |
|||
</div> |
|||
<p style="margin-top: 20px; font-weight: bold;">Odoo |
|||
Implementation</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4 col-sm-6 px-4 py-4"> |
|||
<div |
|||
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;"> |
|||
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);"> |
|||
<div style="background-color:#E6BE26; border-radius: 50%; padding: 15px; width: 68px; |
|||
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);"> |
|||
<img src="assets/icons/license.png" |
|||
alt="service-icon" width="38px" |
|||
height="auto"> |
|||
</div> |
|||
</div> |
|||
<p style="margin-top: 20px; font-weight: bold;">Odoo |
|||
Licensing Consultancy</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="container mt-5"> |
|||
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4"> |
|||
<p class="m-0" |
|||
style="font-weight: 600; font-size: 24px; color:#000 !important"> |
|||
Our Industries</p> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="container"> |
|||
<div class="row my-5 py-4"> |
|||
<div class="col-md-3 col-sm-6 p-0"> |
|||
<div class="d-flex flex-column h-100 " |
|||
style="border-right: 1px solid rgb(209, 209, 209); border-bottom: 1px solid rgb(209, 209, 209); padding: 30px; box-shadow: 6px 0 10px rgba(228, 227, 227, 0.373);"> |
|||
<img src="assets/icons/trading-black.png" width="42px" |
|||
height="auto" alt=""> |
|||
<p style="color: #714B67;font-weight: 600; margin-top: 10px; |
|||
font-size: 1.2rem; margin-bottom: 2px;">Trading</p> |
|||
<p>Easily procure and sell your products</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-3 col-sm-6 p-0"> |
|||
<div class="d-flex flex-column h-100" |
|||
style="border-right: 1px solid rgb(209, 209, 209);border-bottom: 1px solid rgb(209, 209, 209); padding: 30px;"> |
|||
<img src="assets/icons/pos-black.png" width="42px" |
|||
height="auto" alt=""> |
|||
<p style="color: #714B67;font-weight: 600; margin-top: 10px; |
|||
font-size: 1.2rem; margin-bottom: 2px;">POS</p> |
|||
<p>Easy configuration and convivial experience</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-3 col-sm-6 p-0"> |
|||
<div class="d-flex flex-column h-100" |
|||
style="border-right: 1px solid rgb(209, 209, 209);border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: 30px; box-shadow: 0 5px 10px rgba(228, 227, 227, 0.373)"> |
|||
<img src="assets/icons/education-black.png" width="42px" |
|||
height="auto" alt=""> |
|||
<p style="color: #714B67;font-weight: 600; margin-top: 10px; |
|||
font-size: 1.2rem; margin-bottom: 2px;"> |
|||
Education</p> |
|||
<p>A platform for educational management</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-3 col-sm-6 p-0"> |
|||
<div class="d-flex flex-column h-100" |
|||
style="border-bottom: 1px solid rgb(209, 209, 209); padding: 30px; "> |
|||
<img src="assets/icons/manufacturing-black.png" |
|||
width="42px" height="auto" alt=""> |
|||
<p style="color: #714B67;font-weight: 600; margin-top: 10px; |
|||
font-size: 1.2rem; margin-bottom: 2px;"> |
|||
Manufacturing</p> |
|||
<p>Plan, track and schedule your operations</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-3 col-sm-6 p-0"> |
|||
<div class="d-flex flex-column h-100" |
|||
style="border-right: 1px solid rgb(209, 209, 209); padding: 30px;"> |
|||
<img src="assets/icons/ecom-black.png" width="42px" |
|||
height="auto" alt=""> |
|||
<p style="color: #714B67;font-weight: 600; margin-top: 10px; |
|||
font-size: 1.2rem; margin-bottom: 2px;">E-commerce & |
|||
Website</p> |
|||
<p>Mobile friendly, awe-inspiring product pages</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-3 col-sm-6 p-0"> |
|||
<div class="d-flex flex-column h-100" |
|||
style="border-right: 1px solid rgb(209, 209, 209); padding: 30px;box-shadow: 0 -5px 10px rgba(228, 227, 227, 0.373);"> |
|||
<img src="assets/icons/service-black.png" width="42px" |
|||
height="auto" alt=""> |
|||
<p style="color: #714B67;font-weight: 600; margin-top: 10px; |
|||
font-size: 1.2rem; margin-bottom: 2px;">Service |
|||
Management</p> |
|||
<p>Keep track of services and invoice</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-3 col-sm-6 p-0"> |
|||
<div class="d-flex flex-column h-100" |
|||
style="border-right: 1px solid rgb(209, 209, 209); padding: 30px; "> |
|||
<img src="assets/icons/restaurant-black.png" |
|||
width="42px" height="auto" alt=""> |
|||
<p style="color: #714B67;font-weight: 600; margin-top: 10px; |
|||
font-size: 1.2rem; margin-bottom: 2px;"> |
|||
Restaurant</p> |
|||
<p>Run your bar or restaurant methodically</p> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-3 col-sm-6 p-0"> |
|||
<div class="d-flex flex-column h-100" |
|||
style=" padding: 30px;box-shadow: -5px 0 10px rgba(228, 227, 227, 0.373);"> |
|||
<img src="assets/icons/hotel-black.png" width="42px" |
|||
height="auto" alt=""> |
|||
<p style="color: #714B67;font-weight: 600; margin-top: 10px; |
|||
font-size: 1.2rem; margin-bottom: 2px;">Hotel |
|||
Management</p> |
|||
<p>An all-inclusive hotel management application</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="container mt-5"> |
|||
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-5"> |
|||
<p class="m-0" |
|||
style="font-weight: 600; font-size: 24px; color:#000 !important"> |
|||
Support</p> |
|||
</div> |
|||
</div> |
|||
<div class="container my-5"> |
|||
<div class="row" style="background-color: #FFFAFE;"> |
|||
<div class="col-md-6 pb-4 d-flex align-items-center justify-content-center" |
|||
style="border-right: 1px solid #D9D9D9;"> |
|||
<div style="padding: 30px;"> |
|||
<div class="d-flex align-items-center"> |
|||
<img src="assets/misc/support (1) 1.svg" alt="" |
|||
width="60px" style="margin-right: 12px;"> |
|||
<div style="padding: 0px 8px;"> |
|||
<span |
|||
style="color: #714B67;font-size: 24px;font-weight: 600;padding-bottom: 1rem;">Need |
|||
Help?</span> |
|||
<p class="m-0" style="color:#718096;">Got |
|||
questions or need help? Get in touch.</p> |
|||
<div style="font-weight: 400;"><span><img |
|||
src="assets/misc/support-email.svg" |
|||
alt="" |
|||
width="18px" |
|||
style="filter: invert(1);margin-right: 0.8rem;"></span>odoo@cybrosys.com |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6 pb-4 d-flex align-items-center justify-content-center"> |
|||
<div style="padding: 30px;"> |
|||
<div class="d-flex align-items-center"> |
|||
<img src="assets/misc/whatsapp 1.svg" alt="" |
|||
width="60px" style="margin-right: 12px;"> |
|||
<div> |
|||
<span style="color: #714B67;font-size: 24px;font-weight: 600;">WhatsApp</span> |
|||
<p class="m-0" style="color:#718096;">Say hi to |
|||
us on WhatsApp!</p> |
|||
<div style="font-weight: 400; font-size: 16px;"><span><img |
|||
src="assets/misc/phone.svg" |
|||
alt="" width="14px" |
|||
style="filter: invert(1); margin-right: 0.8rem;"></span>+91 |
|||
99456767686 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
<!-- Optional JavaScript --> |
|||
<!-- jQuery first, then Popper.js, then Bootstrap JS --> |
|||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
|||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,49 @@ |
|||
/** @odoo-module **/ |
|||
import { registry } from "@web/core/registry"; |
|||
import { useInputField } from "@web/views/fields/input_field_hook"; |
|||
const { Component, useRef } = owl; |
|||
import { standardFieldProps } from "@web/views/fields/standard_field_props"; |
|||
import { AlertDialog } from "@web/core/confirmation_dialog/confirmation_dialog"; |
|||
import { _t } from "@web/core/l10n/translation"; |
|||
/** |
|||
* We define this module for the function of creating a time picker widget |
|||
*/ |
|||
export class FieldTimePicker extends Component { |
|||
static template = 'FieldTimePicker'; |
|||
setup() { |
|||
this.input = useRef('input_time'); |
|||
useInputField({ |
|||
getValue: () => this.props.record.data[this.props.name] || "", |
|||
refName: "input_time" |
|||
}); |
|||
} |
|||
/** |
|||
* Click function to validate weather its a char field if yes it will show |
|||
the timepicker else show a waring |
|||
*/ |
|||
_onClickTimeField(ev) { |
|||
var self = this; |
|||
if (this.props.record.fields[this.props.name].type == "char") { |
|||
var $input = $(ev.currentTarget); |
|||
this.props.record.update({[this.props.name]: this.input.el.value}) |
|||
$input.wickedpicker({ |
|||
twentyFour: true, |
|||
title: 'Select Time', |
|||
showSeconds: true, |
|||
}); |
|||
$input.wickedpicker('open'); |
|||
}else{ |
|||
this.env.model.dialog.add(AlertDialog, { |
|||
body: _t("This widget can only be added to 'Char' field"), |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
FieldTimePicker.props = { |
|||
...standardFieldProps, |
|||
} |
|||
export const TimePickerField = { |
|||
component: FieldTimePicker, |
|||
supportedTypes: ["char"], |
|||
}; |
|||
registry.category("fields").add("timepicker", TimePickerField); |
|||
@ -0,0 +1,17 @@ |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
<templates xml:space="preserve"> |
|||
<t t-name="FieldTimePicker"> |
|||
<!-- FieldTimePicker template to add input field--> |
|||
<div class="input-group timepicker-component"> |
|||
<input type="text" |
|||
t-ref="input_time" |
|||
t-att-id="props.id" |
|||
t-on-click="(ev) => this._onClickTimeField(ev)" |
|||
class="timepickerg form-control o_input" |
|||
/> |
|||
<span class="input-group-addon" style="display:none;"> |
|||
<i class="fa fa-user-o me-1"/> |
|||
</span> |
|||
</div> |
|||
</t> |
|||
</templates> |
|||
@ -0,0 +1,11 @@ |
|||
.sass-cache |
|||
*.html |
|||
jquery-1.11.3.min.js |
|||
.idea |
|||
sass |
|||
jasmine |
|||
spec |
|||
node_modules |
|||
node_module/* |
|||
gulpfile.js |
|||
package.json |
|||
@ -0,0 +1,21 @@ |
|||
The MIT License |
|||
|
|||
Copyright (c) 2015-2016 Eric Gagnon http://ericjgagnon.github.io/wickedpicker/ |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy |
|||
of this software and associated documentation files (the "Software"), to deal |
|||
in the Software without restriction, including without limitation the rights |
|||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|||
copies of the Software, and to permit persons to whom the Software is |
|||
furnished to do so, subject to the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be included in |
|||
all copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
|||
THE SOFTWARE. |
|||
@ -0,0 +1,79 @@ |
|||
# Wickedpicker |
|||
|
|||
## wickedpicker.js - A simple jQuery timepicker |
|||
|
|||
## Requirements |
|||
|
|||
* [jQuery](http://jquery.com/download/) (>= 1.9) |
|||
|
|||
## Installation |
|||
```shell |
|||
$ bower install wickedpicker |
|||
``` |
|||
|
|||
## Usage |
|||
|
|||
#### In your HTML |
|||
```html |
|||
<body> |
|||
.... |
|||
<input type="text" name="timepicker" class="timepicker"/> |
|||
.... |
|||
<script type="text/javascript" src="jquery-1.11.3.min.js"></script> |
|||
<script type="text/javascript" src="wickedpicker.js"></script> |
|||
</body> |
|||
``` |
|||
|
|||
#### In your JavaScript file |
|||
```javascript |
|||
$('.timepicker').wickedpicker(); |
|||
``` |
|||
|
|||
#### Options |
|||
```javascript |
|||
var options = { |
|||
now: "12:35", //hh:mm 24 hour format only, defaults to current time |
|||
twentyFour: false, //Display 24 hour format, defaults to false |
|||
upArrow: 'wickedpicker__controls__control-up', //The up arrow class selector to use, for custom CSS |
|||
downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS |
|||
close: 'wickedpicker__close', //The close class selector to use, for custom CSS |
|||
hoverState: 'hover-state', //The hover state class to use, for custom CSS |
|||
title: 'Timepicker', //The Wickedpicker's title, |
|||
showSeconds: false, //Whether or not to show seconds, |
|||
timeSeparator: ' : ', // The string to put in between hours and minutes (and seconds) |
|||
secondsInterval: 1, //Change interval for seconds, defaults to 1, |
|||
minutesInterval: 1, //Change interval for minutes, defaults to 1 |
|||
beforeShow: null, //A function to be called before the Wickedpicker is shown |
|||
afterShow: null, //A function to be called after the Wickedpicker is closed/hidden |
|||
show: null, //A function to be called when the Wickedpicker is shown |
|||
clearable: false, //Make the picker's input clearable (has clickable "x") |
|||
}; |
|||
$('.timepicker').wickedpicker(options); |
|||
``` |
|||
|
|||
#### Methods |
|||
|
|||
'time' get the current time inside of the input element that has a wickedpicker attached to it. |
|||
```javascript |
|||
$('.timepicker').wickedpicker('time'); |
|||
``` |
|||
|
|||
If multiple input fields have the same class and instantiate a wickedpicker then pass the index of the timepicker |
|||
you'd like to select |
|||
```javascript |
|||
$('.timepicker').wickedpicker('time', 0); |
|||
``` |
|||
|
|||
#### Functionality |
|||
The Wickedpicker opens when the bound input is clicked, or focused on (try tabbing), and it can be closed by either |
|||
clicking the X, by clicking outside of it, or by pressing esc. The arrows icons increase or decrease their |
|||
associated time values or toggle the meridiem. The values can also be changed using the up and down keys when |
|||
focused on. To move to the next value just press the left or right arrow key. |
|||
|
|||
For more checkout |
|||
[Wickedpicker gh-pages](http://ericjgagnon.github.io/wickedpicker/) |
|||
|
|||
## License |
|||
|
|||
Copyright (c) 2015-2016 Eric Gagnon Licensed under the MIT license. |
|||
|
|||
@ -0,0 +1,29 @@ |
|||
{ |
|||
"name": "wickedpicker", |
|||
"version": "0.0.4", |
|||
"description": "A simple jQuery timepicker plugin.", |
|||
"main": [ |
|||
"./dist/wickedpicker.min.js", |
|||
"./dist/wickedpicker.min.css" |
|||
], |
|||
"authors": [ |
|||
"Eric Gagnon", |
|||
"Ruben Seyferth" |
|||
], |
|||
"moduleType": "globals", |
|||
"license": "MIT", |
|||
"keywords": [ |
|||
"jQuery", |
|||
"timepicker", |
|||
"wickedpicker" |
|||
], |
|||
"homepage": "http://ericjgagnon.github.io/wickedpicker/", |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git://github.com/ericjgagnon/wickedpicker.git" |
|||
}, |
|||
"dependencies": { |
|||
"jquery": ">= 1.9.0" |
|||
}, |
|||
"private": false |
|||
} |
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,624 @@ |
|||
/** |
|||
* wickedpicker v0.4.1 - A simple jQuery timepicker. |
|||
* Copyright (c) 2015-2016 Eric Gagnon - http://github.com/wickedRidge/wickedpicker
|
|||
* License: MIT |
|||
*/ |
|||
|
|||
(function ($, window, document) { |
|||
|
|||
"use strict"; |
|||
|
|||
if (typeof String.prototype.endsWith != 'function') { |
|||
/* |
|||
* Checks if this string end ends with another string |
|||
* |
|||
* @param {string} the string to be checked |
|||
* |
|||
* @return {bool} |
|||
*/ |
|||
String.prototype.endsWith = function (string) { |
|||
return string.length > 0 && this.substring(this.length - string.length, this.length) === string; |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Returns if the user agent is mobile |
|||
* |
|||
* @return {bool} |
|||
*/ |
|||
var isMobile = function () { |
|||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); |
|||
}; |
|||
|
|||
var today = new Date(); |
|||
|
|||
var pluginName = "wickedpicker", |
|||
defaults = { |
|||
now: today.getHours() + ':' + today.getMinutes(), |
|||
twentyFour: false, |
|||
upArrow: 'wickedpicker__controls__control-up', |
|||
downArrow: 'wickedpicker__controls__control-down', |
|||
close: 'wickedpicker__close', |
|||
hoverState: 'hover-state', |
|||
title: 'Timepicker', |
|||
showSeconds: false, |
|||
timeSeparator: ' : ', |
|||
secondsInterval: 1, |
|||
minutesInterval: 1, |
|||
beforeShow: null, |
|||
afterShow: null, |
|||
show: null, |
|||
clearable: false, |
|||
closeOnClickOutside: true, |
|||
onClickOutside: function() {}, |
|||
}; |
|||
|
|||
/* |
|||
* @param {object} The input object the timepicker is attached to. |
|||
* @param {object} The object containing options |
|||
*/ |
|||
function Wickedpicker(element, options) { |
|||
this.element = $(element); |
|||
this.options = $.extend({}, defaults, options); |
|||
|
|||
this.element.addClass('hasWickedpicker'); |
|||
this.element.attr('onkeypress', 'return false;'); |
|||
this.element.attr('aria-showingpicker', 'false'); |
|||
this.createPicker(); |
|||
this.timepicker = $('.wickedpicker'); |
|||
this.up = $('.' + this.options.upArrow.split(/\s+/).join('.')); |
|||
this.down = $('.' + this.options.downArrow.split(/\s+/).join('.')); |
|||
this.separator = $('.wickedpicker__controls__control--separator'); |
|||
this.hoursElem = $('.wickedpicker__controls__control--hours'); |
|||
this.minutesElem = $('.wickedpicker__controls__control--minutes'); |
|||
this.secondsElem = $('.wickedpicker__controls__control--seconds'); |
|||
this.meridiemElem = $('.wickedpicker__controls__control--meridiem'); |
|||
this.close = $('.' + this.options.close.split(/\s+/).join('.')); |
|||
|
|||
//Create a new Date object based on the default or passing in now value
|
|||
var time = this.timeArrayFromString(this.options.now); |
|||
this.options.now = new Date(today.getFullYear(), today.getMonth(), today.getDate(), time[0], time[1], time[2]); |
|||
this.selectedHour = this.parseHours(this.options.now.getHours()); |
|||
this.selectedMin = this.parseSecMin(this.options.now.getMinutes()); |
|||
this.selectedSec = this.parseSecMin(this.options.now.getSeconds()); |
|||
this.selectedMeridiem = this.parseMeridiem(this.options.now.getHours()); |
|||
this.setHoverState(); |
|||
this.attach(element); |
|||
this.setText(element); |
|||
} |
|||
|
|||
$.extend(Wickedpicker.prototype, { |
|||
|
|||
/* |
|||
* Show given input's timepicker |
|||
* |
|||
* @param {object} The input being clicked |
|||
*/ |
|||
showPicker: function (element) { |
|||
//If there is a beforeShow function, then call it with the input calling the timepicker and the
|
|||
// timepicker itself
|
|||
if (typeof this.options.beforeShow === 'function') { |
|||
this.options.beforeShow(element, this.timepicker); |
|||
} |
|||
var timepickerPos = $(element).offset(); |
|||
|
|||
$(element).attr({'aria-showingpicker': 'true', 'tabindex': -1}); |
|||
this.setText(element); |
|||
this.showHideMeridiemControl(); |
|||
if (this.getText(element) !== this.getTime()) { |
|||
|
|||
// Check meridiem
|
|||
var text = this.getText(element); |
|||
var re = /\s[ap]m$/i; |
|||
var meridiem = re.test(text) ? text.substr(-2, 2) : null; |
|||
var inputTime = text.replace(re, '').split(this.options.timeSeparator); |
|||
var newTime = {}; |
|||
newTime.hours = inputTime[0]; |
|||
newTime.minutes = inputTime[1]; |
|||
newTime.meridiem = meridiem; |
|||
if (this.options.showSeconds) { |
|||
newTime.seconds = inputTime[2]; |
|||
} |
|||
this.setTime(newTime); |
|||
} |
|||
this.timepicker.css({ |
|||
'z-index': this.element.css('z-index') + 1, |
|||
position: 'absolute', |
|||
left: timepickerPos.left, |
|||
top: timepickerPos.top + $(element)[0].offsetHeight |
|||
}).show(); |
|||
//If there is a show function, then call it with the input calling the timepicker and the
|
|||
// timepicker itself
|
|||
if (typeof this.options.show === 'function') { |
|||
this.options.show(element, this.timepicker); |
|||
} |
|||
|
|||
this.handleTimeAdjustments(element); |
|||
}, |
|||
|
|||
/* |
|||
* Hides the timepicker that is currently shown if it is not part of the timepicker |
|||
* |
|||
* @param {Object} The DOM object being clicked on the page |
|||
* |
|||
* BeinnLora: added trigger function to call on closing/hiding timepicker. |
|||
*/ |
|||
hideTimepicker: function (element) { |
|||
this.timepicker.hide(); |
|||
if (typeof this.options.afterShow === 'function') { |
|||
this.options.afterShow(element, this.timepicker); |
|||
} |
|||
var pickerHidden = { |
|||
start: function () { |
|||
var setShowPickerFalse = $.Deferred(); |
|||
$('[aria-showingpicker="true"]').attr('aria-showingpicker', 'false'); |
|||
return setShowPickerFalse.promise(); |
|||
} |
|||
}; |
|||
|
|||
function setTabIndex(index) { |
|||
setTimeout(function () { |
|||
$('[aria-showingpicker="false"]').attr('tabindex', index); |
|||
}, 400); |
|||
} |
|||
|
|||
pickerHidden.start().then(setTabIndex(0)); |
|||
}, |
|||
|
|||
/* |
|||
* Create a new timepicker. A single timepicker per page |
|||
*/ |
|||
createPicker: function () { |
|||
if ($('.wickedpicker').length === 0) { |
|||
var picker = '<div class="wickedpicker"><p class="wickedpicker__title">' + this.options.title + '<span class="wickedpicker__close"></span></p><ul class="wickedpicker__controls"><li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--hours" tabindex="-1">00</span><span class="' + this.options.downArrow + '"></span></li><li class="wickedpicker__controls__control--separator"><span class="wickedpicker__controls__control--separator-inner">:</span></li><li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--minutes" tabindex="-1">00</span><span class="' + this.options.downArrow + '"></span></li>'; |
|||
if (this.options.showSeconds) { |
|||
picker += '<li class="wickedpicker__controls__control--separator"><span class="wickedpicker__controls__control--separator-inner">:</span></li><li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--seconds" tabindex="-1">00</span><span class="' + this.options.downArrow + '"></span> </li>'; |
|||
} |
|||
picker += '<li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--meridiem" tabindex="-1">AM</span><span class="' + this.options.downArrow + '"></span></li></ul></div>'; |
|||
$('body').append(picker); |
|||
this.attachKeyboardEvents(); |
|||
} |
|||
}, |
|||
|
|||
/* |
|||
* Hides the meridiem control if this timepicker is a 24 hour clock |
|||
*/ |
|||
showHideMeridiemControl: function () { |
|||
if (this.options.twentyFour === false) { |
|||
$(this.meridiemElem).parent().show(); |
|||
} |
|||
else { |
|||
$(this.meridiemElem).parent().hide(); |
|||
} |
|||
}, |
|||
|
|||
/* |
|||
* Hides the seconds control if this timepicker has showSeconds set to true |
|||
*/ |
|||
showHideSecondsControl: function () { |
|||
if (this.options.showSeconds) { |
|||
$(this.secondsElem).parent().show(); |
|||
} |
|||
else { |
|||
$(this.secondsElem).parent().hide(); |
|||
} |
|||
}, |
|||
|
|||
/* |
|||
* Bind the click events to the input |
|||
* |
|||
* @param {object} The input element |
|||
*/ |
|||
attach: function (element) { |
|||
var self = this; |
|||
|
|||
if (this.options.clearable) { |
|||
self.makePickerInputClearable(element); |
|||
} |
|||
|
|||
$(element).attr('tabindex', 0); |
|||
$(element).on('click focus', function (event) { |
|||
//Prevent multiple firings
|
|||
if ($(self.timepicker).is(':hidden')) { |
|||
self.showPicker($(this)); |
|||
window.lastTimePickerControl = $(this); //Put the reference on this timepicker into global scope for unsing that in afterShow function
|
|||
$(self.hoursElem).focus(); |
|||
} |
|||
}); |
|||
|
|||
|
|||
//Handle click events for closing Wickedpicker
|
|||
var clickHandler = function (event) { //TODO: Fix double firing
|
|||
//Only fire the hide event when you have to
|
|||
if ($(self.timepicker).is(':visible')) { |
|||
//Clicking the X
|
|||
if ($(event.target).is(self.close)) { |
|||
self.hideTimepicker(window.lastTimePickerControl); |
|||
} else if ($(event.target).closest(self.timepicker).length || $(event.target).closest($('.hasWickedpicker')).length) { //Clicking the Wickedpicker or one of it's inputs
|
|||
event.stopPropagation(); |
|||
} else { //Everything else
|
|||
if (typeof self.options.onClickOutside === 'function') { |
|||
self.options.onClickOutside(); |
|||
} |
|||
else { |
|||
console.warn("Type of onClickOutside must be a function"); |
|||
} |
|||
|
|||
if (!self.options.closeOnClickOutside) { |
|||
return; |
|||
} |
|||
self.hideTimepicker(window.lastTimePickerControl); |
|||
} |
|||
window.lastTimePickerControl = null; |
|||
} |
|||
}; |
|||
$(document).off('click', clickHandler).on('click', clickHandler); |
|||
}, |
|||
|
|||
/** |
|||
* Added keyboard functionality to improve usabil |
|||
*/ |
|||
attachKeyboardEvents: function () { |
|||
$(document).on('keydown', $.proxy(function (event) { |
|||
switch (event.keyCode) { |
|||
case 9: |
|||
if (event.target.className !== 'hasWickedpicker') { |
|||
$(this.close).trigger('click'); |
|||
} |
|||
break; |
|||
case 27: |
|||
$(this.close).trigger('click'); |
|||
break; |
|||
case 37: //Left arrow
|
|||
if (event.target.className !== this.hoursElem[0].className) { |
|||
$(event.target).parent().prevAll('li').not(this.separator.selector).first().children()[1].focus(); |
|||
} else { |
|||
$(event.target).parent().siblings(':last').children()[1].focus(); |
|||
} |
|||
break; |
|||
case 39: //Right arrow
|
|||
if (event.target.className !== this.meridiemElem[0].className) { |
|||
$(event.target).parent().nextAll('li').not(this.separator.selector).first().children()[1].focus(); |
|||
} else { |
|||
$(event.target).parent().siblings(':first').children()[1].focus(); |
|||
} |
|||
break; |
|||
case 38: //Up arrow
|
|||
$(':focus').prev().trigger('click'); |
|||
break; |
|||
case 40: //Down arrow
|
|||
$(':focus').next().trigger('click'); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, this)); |
|||
}, |
|||
|
|||
/* |
|||
* Set the time on the timepicker |
|||
* |
|||
* @param {object} The date being set |
|||
*/ |
|||
setTime: function (time) { |
|||
this.setHours(time.hours); |
|||
this.setMinutes(time.minutes); |
|||
this.setMeridiem(time.meridiem); |
|||
if (this.options.showSeconds) { |
|||
this.setSeconds(time.seconds); |
|||
} |
|||
}, |
|||
|
|||
/* |
|||
* Get the time from the timepicker |
|||
*/ |
|||
getTime: function () { |
|||
return [this.formatTime(this.getHours(), this.getMinutes(), this.getMeridiem(), this.getSeconds())]; |
|||
}, |
|||
|
|||
/* |
|||
* Set the timpicker's hour(s) value |
|||
* |
|||
* @param {string} hours |
|||
*/ |
|||
setHours: function (hours) { |
|||
var hour = new Date(); |
|||
hour.setHours(hours); |
|||
var hoursText = this.parseHours(hour.getHours()); |
|||
this.hoursElem.text(hoursText); |
|||
this.selectedHour = hoursText; |
|||
}, |
|||
|
|||
/* |
|||
* Get the hour(s) value from the timepicker |
|||
* |
|||
* @return {integer} |
|||
*/ |
|||
getHours: function () { |
|||
var hours = new Date(); |
|||
hours.setHours(this.hoursElem.text()); |
|||
return hours.getHours(); |
|||
}, |
|||
|
|||
/* |
|||
* Returns the correct hour value based on the type of clock, 12 or 24 hour |
|||
* |
|||
* @param {integer} The hours value before parsing |
|||
* |
|||
* @return {string|integer} |
|||
*/ |
|||
parseHours: function (hours) { |
|||
return (this.options.twentyFour === false) ? ((hours + 11) % 12) + 1 : (hours < 10) ? '0' + hours : hours; |
|||
}, |
|||
|
|||
/* |
|||
* Sets the timpicker's minutes value |
|||
* |
|||
* @param {string} minutes |
|||
*/ |
|||
setMinutes: function (minutes) { |
|||
var minute = new Date(); |
|||
minute.setMinutes(minutes); |
|||
var minutesText = minute.getMinutes(); |
|||
var min = this.parseSecMin(minutesText); |
|||
this.minutesElem.text(min); |
|||
this.selectedMin = min; |
|||
}, |
|||
|
|||
/* |
|||
* Get the minutes value from the timepicker |
|||
* |
|||
* @return {integer} |
|||
*/ |
|||
getMinutes: function () { |
|||
var minutes = new Date(); |
|||
minutes.setMinutes(this.minutesElem.text()); |
|||
return minutes.getMinutes(); |
|||
}, |
|||
|
|||
|
|||
/* |
|||
* Return a human-readable minutes/seconds value |
|||
* |
|||
* @param {string} value seconds or minutes |
|||
* |
|||
* @return {string|integer} |
|||
*/ |
|||
parseSecMin: function (value) { |
|||
return ((value < 10) ? '0' : '') + value; |
|||
}, |
|||
|
|||
/* |
|||
* Set the timepicker's meridiem value, AM or PM |
|||
* |
|||
* @param {string} The new meridiem |
|||
*/ |
|||
setMeridiem: function (inputMeridiem) { |
|||
var newMeridiem = ''; |
|||
if (inputMeridiem === undefined) { |
|||
var meridiem = this.getMeridiem(); |
|||
newMeridiem = (meridiem === 'PM') ? 'AM' : 'PM'; |
|||
} else { |
|||
newMeridiem = inputMeridiem; |
|||
} |
|||
this.meridiemElem.text(newMeridiem); |
|||
this.selectedMeridiem = newMeridiem; |
|||
}, |
|||
|
|||
/* |
|||
* Get the timepicker's meridiem value, AM or PM |
|||
* |
|||
* @return {string} |
|||
*/ |
|||
getMeridiem: function () { |
|||
return this.meridiemElem.text(); |
|||
}, |
|||
|
|||
/* |
|||
* Set the timepicker's seconds value |
|||
* |
|||
* @param {string} seconds |
|||
*/ |
|||
setSeconds: function (seconds) { |
|||
var second = new Date(); |
|||
second.setSeconds(seconds); |
|||
var secondsText = second.getSeconds(); |
|||
var sec = this.parseSecMin(secondsText); |
|||
this.secondsElem.text(sec); |
|||
this.selectedSec = sec; |
|||
}, |
|||
|
|||
/* |
|||
* Get the timepicker's seconds value |
|||
* |
|||
* return {string} |
|||
*/ |
|||
getSeconds: function () { |
|||
var seconds = new Date(); |
|||
seconds.setSeconds(this.secondsElem.text()); |
|||
return seconds.getSeconds(); |
|||
}, |
|||
|
|||
/* |
|||
* Get the correct meridiem based on the hours given |
|||
* |
|||
* @param {string|integer} hours |
|||
* |
|||
* @return {string} |
|||
*/ |
|||
parseMeridiem: function (hours) { |
|||
return (hours > 11) ? 'PM' : 'AM'; |
|||
}, |
|||
|
|||
/* |
|||
* Handles time incrementing and decrementing and passes |
|||
* the operator, '+' or '-', the input to be set after the change |
|||
* and the current arrow clicked, to decipher if hours, ninutes, or meridiem. |
|||
* |
|||
* @param {object} The input element |
|||
*/ |
|||
handleTimeAdjustments: function (element) { |
|||
var timeOut = 0; |
|||
//Click and click and hold timepicker incrementer and decrementer
|
|||
$(this.up).add(this.down).off('mousedown click touchstart').on('mousedown click', { |
|||
'Wickedpicker': this, |
|||
'input': element |
|||
}, function (event) { |
|||
if(event.which!=1) return false; |
|||
var operator = (this.className.indexOf('up') > -1) ? '+' : '-'; |
|||
var passedData = event.data; |
|||
if (event.type == 'mousedown') { |
|||
timeOut = setInterval($.proxy(function (args) { |
|||
args.Wickedpicker.changeValue(operator, args.input, this); |
|||
}, this, {'Wickedpicker': passedData.Wickedpicker, 'input': passedData.input}), 200); |
|||
} else { |
|||
passedData.Wickedpicker.changeValue(operator, passedData.input, this); |
|||
} |
|||
}).bind('mouseup touchend', function () { |
|||
clearInterval(timeOut); |
|||
}); |
|||
}, |
|||
|
|||
/* |
|||
* Change the timepicker's time base on what is clicked |
|||
* |
|||
* @param {string} The + or - operator |
|||
* @param {object} The timepicker's associated input to be set post change |
|||
* @param {object} The DOM arrow object clicked, determines if it is hours, |
|||
* minutes, or meridiem base on the operator and its siblings |
|||
*/ |
|||
changeValue: function (operator, input, clicked) { |
|||
var target = (operator === '+') ? clicked.nextSibling : clicked.previousSibling; |
|||
var targetClass = $(target).attr('class'); |
|||
if (targetClass.endsWith('hours')) { |
|||
this.setHours(eval(this.getHours() + operator + 1)); |
|||
} else if (targetClass.endsWith('minutes')) { |
|||
this.setMinutes(eval(this.getMinutes() + operator + this.options.minutesInterval)); |
|||
} else if (targetClass.endsWith('seconds')) { |
|||
this.setSeconds(eval(this.getSeconds() + operator + this.options.secondsInterval)); |
|||
} else { |
|||
this.setMeridiem(); |
|||
} |
|||
this.setText(input); |
|||
}, |
|||
|
|||
|
|||
/* |
|||
* Sets the give input's text to the current timepicker's time |
|||
* |
|||
* @param {object} The input element |
|||
*/ |
|||
setText: function (input) { |
|||
$(input).val(this.formatTime(this.selectedHour, this.selectedMin, this.selectedMeridiem, this.selectedSec)).change(); |
|||
}, |
|||
|
|||
/* |
|||
* Get the given input's value |
|||
* |
|||
* @param {object} The input element |
|||
* |
|||
* @return {string} |
|||
*/ |
|||
getText: function (input) { |
|||
return $(input).val(); |
|||
}, |
|||
|
|||
/* |
|||
* Returns the correct time format as a string |
|||
* |
|||
* @param {string} hour |
|||
* @param {string} minutes |
|||
* @param {string} meridiem |
|||
* |
|||
* @return {string} |
|||
*/ |
|||
formatTime: function (hour, min, meridiem, seconds) { |
|||
var formattedTime = hour + this.options.timeSeparator + min; |
|||
if (this.options.showSeconds) { |
|||
formattedTime += this.options.timeSeparator + seconds; |
|||
} |
|||
if (this.options.twentyFour === false) { |
|||
formattedTime += ' ' + meridiem; |
|||
} |
|||
return formattedTime; |
|||
}, |
|||
|
|||
/** |
|||
* Apply the hover class to the arrows and close icon fonts |
|||
*/ |
|||
setHoverState: function () { |
|||
var self = this; |
|||
if (!isMobile()) { |
|||
$(this.up).add(this.down).add(this.close).hover(function () { |
|||
$(this).toggleClass(self.options.hoverState); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Wrapping the given input field with the clearable container |
|||
* , add a span that will contain the x, and bind the clear |
|||
* input event to the span |
|||
* |
|||
* @param input |
|||
*/ |
|||
makePickerInputClearable: function(input) { |
|||
$(input).wrap('<div class="clearable-picker"></div>').after('<span data-clear-picker>×</span>'); |
|||
|
|||
//When the x is clicked, clear its sibling input field
|
|||
$('[data-clear-picker]').on('click', function(event) { |
|||
$(this).siblings('.hasWickedpicker').val(''); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* Convert the options time string format |
|||
* to an array |
|||
* |
|||
* returns => [hours, minutes, seconds] |
|||
* |
|||
* @param stringTime |
|||
* @returns {*} |
|||
*/ |
|||
timeArrayFromString: function (stringTime) { |
|||
if (stringTime.length) { |
|||
var time = stringTime.split(':'); |
|||
time[2] = (time.length < 3) ? '00' : time[2]; |
|||
return time; |
|||
} |
|||
return false; |
|||
}, |
|||
|
|||
//public functions
|
|||
/* |
|||
* Returns the requested input element's value |
|||
*/ |
|||
_time: function () { |
|||
var inputValue = $(this.element).val(); |
|||
return (inputValue === '') ? this.formatTime(this.selectedHour, this.selectedMin, this.selectedMeridiem, this.selectedSec) : inputValue; |
|||
}, |
|||
_hide: function() { |
|||
this.hideTimepicker(this.element); |
|||
} |
|||
}); |
|||
|
|||
//optional index if multiple inputs share the same class
|
|||
$.fn[pluginName] = function (options, index) { |
|||
if (!$.isFunction(Wickedpicker.prototype['_' + options])) { |
|||
return this.each(function () { |
|||
if (!$.data(this, "plugin_" + pluginName)) { |
|||
$.data(this, "plugin_" + pluginName, new Wickedpicker(this, options)); |
|||
} |
|||
}); |
|||
} |
|||
else if ($(this).hasClass('hasWickedpicker')) { |
|||
if (index !== undefined) { |
|||
return $.data($(this)[index], 'plugin_' + pluginName)['_' + options](); |
|||
} |
|||
else { |
|||
return $.data($(this)[0], 'plugin_' + pluginName)['_' + options](); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
})(jQuery, window, document); |
|||
@ -0,0 +1,90 @@ |
|||
.wickedpicker { |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
box-shadow: 0 0 0 1px rgba(14, 41, 57, 0.12), 0 2px 5px rgba(14, 41, 57, 0.44), inset 0 -1px 2px rgba(14, 41, 57, 0.15); |
|||
background: #fefefe; |
|||
margin: 0 auto; |
|||
border-radius: 0.1px; |
|||
width: 270px; |
|||
height: 130px; |
|||
font-size: 14px; |
|||
display: none; } |
|||
.wickedpicker__title { |
|||
background-image: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); |
|||
background-image: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); |
|||
position: relative; |
|||
background: #f2f2f2; |
|||
margin: 0 auto; |
|||
border-bottom: 1px solid #e5e5e5; |
|||
padding: 12px 11px 10px 15px; |
|||
color: #4C4C4C; |
|||
font-size: inherit; } |
|||
.wickedpicker__close { |
|||
-webkit-transform: translateY(-25%); |
|||
-moz-transform: translateY(-25%); |
|||
-ms-transform: translateY(-25%); |
|||
-o-transform: translateY(-25%); |
|||
transform: translateY(-25%); |
|||
position: absolute; |
|||
top: 25%; |
|||
right: 10px; |
|||
color: #34495e; |
|||
cursor: pointer; } |
|||
.wickedpicker__close:before { |
|||
content: '\00d7'; } |
|||
.wickedpicker__controls { |
|||
padding: 10px 0; |
|||
line-height: normal; |
|||
margin: 0; } |
|||
.wickedpicker__controls__control, .wickedpicker__controls__control--separator { |
|||
vertical-align: middle; |
|||
display: inline-block; |
|||
font-size: inherit; |
|||
margin: 0 auto; |
|||
width: 35px; |
|||
letter-spacing: 1.3px; } |
|||
.wickedpicker__controls__control-up, .wickedpicker__controls__control-down { |
|||
color: #34495e; |
|||
position: relative; |
|||
display: block; |
|||
margin: 3px auto; |
|||
font-size: 18px; |
|||
cursor: pointer; } |
|||
.wickedpicker__controls__control-up:before { |
|||
content: '\e800'; } |
|||
.wickedpicker__controls__control-down:after { |
|||
content: '\e801'; } |
|||
.wickedpicker__controls__control--separator { |
|||
width: 5px; } |
|||
|
|||
.text-center, .wickedpicker__title, .wickedpicker__controls, .wickedpicker__controls__control, .wickedpicker__controls__control--separator, .wickedpicker__controls__control-up, .wickedpicker__controls__control-down { |
|||
text-align: center; } |
|||
|
|||
.hover-state { |
|||
color: #3498db; } |
|||
|
|||
@font-face { |
|||
font-family: 'fontello'; |
|||
src: url("../fonts/fontello.eot?52602240"); |
|||
src: url("../fonts/fontello.eot?52602240#iefix") format("embedded-opentype"), url("../fonts/fontello.woff?52602240") format("woff"), url("../fonts/fontello.ttf?52602240") format("truetype"), url("../fonts/fontello.svg?52602240#fontello") format("svg"); |
|||
font-weight: normal; |
|||
font-style: normal; } |
|||
|
|||
.fontello:before, .wickedpicker__controls__control-up:before, .fontello-after:after, .wickedpicker__controls__control-down:after { |
|||
font-family: 'fontello'; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
speak: none; |
|||
display: inline-block; |
|||
text-decoration: inherit; |
|||
width: 1em; |
|||
margin-right: .2em; |
|||
text-align: center; |
|||
font-variant: normal; |
|||
text-transform: none; |
|||
line-height: 1em; |
|||
margin-left: .2em; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; } |
|||
Loading…
Reference in new issue