Skip to content
This repository was archived by the owner on Jun 21, 2022. It is now read-only.
Open
Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
d92d7ed
Bootstrap 4 compatible
djibe May 14, 2018
729db5b
Bootstrap 4 css
djibe May 14, 2018
0fa85ec
Bootstrap 4 minified CSS
djibe May 14, 2018
3d4f617
Bootstrap 4 js
djibe May 14, 2018
a9b2ccd
Bootstrap 4 js minified
djibe May 14, 2018
c08a1e6
Update README.md
djibe Jul 9, 2018
75ea345
Update bootstrap4-clockpicker.js
djibe Jul 9, 2018
4204244
Update bootstrap4-clockpicker.min.js
djibe Jul 9, 2018
9c65ca1
Update bootstrap4-clockpicker.css
djibe Jul 9, 2018
d82b693
Update bootstrap4-clockpicker.min.css
djibe Jul 9, 2018
803c5b3
Update README.md
djibe Jul 17, 2018
acc7e17
Update README.md
djibe Jul 18, 2018
07d021e
v0.2
djibe Jul 19, 2018
c1f94a0
v0.2
djibe Jul 19, 2018
1769182
Update README.md
djibe Jul 19, 2018
d822380
BS4 + material design
djibe Jul 19, 2018
c8a560d
Add files via upload
djibe Jul 19, 2018
ae69e24
Update README.md
djibe Jul 19, 2018
10fc511
Add files via upload
djibe Jul 19, 2018
53ee5df
Delete clockpicker-bs4.png
djibe Jul 19, 2018
2a69527
Add files via upload
djibe Jul 19, 2018
1ccd50e
Update README.md
djibe Jul 19, 2018
1b818a7
Update README.md
djibe Jul 19, 2018
d068634
Update README.md
djibe Jul 19, 2018
556c524
Update README.md
djibe Jul 19, 2018
2cf5795
Update bower.json
djibe Jul 19, 2018
97c65e7
Delete bootstrap4-clockpicker.min.js
djibe Jul 19, 2018
6d385d4
0.2.1
djibe Jul 28, 2018
5dd5032
0.2.1
djibe Jul 28, 2018
08adaf7
Delete clockpicker-bs4 (2).png
djibe Jul 28, 2018
4045fac
Delete clockpicker-bs4-material (2).png
djibe Jul 28, 2018
886a7c2
Delete clockpicker-bs4-material.png
djibe Jul 28, 2018
bf5382d
Delete clockpicker-bs4.png
djibe Jul 28, 2018
de69e28
0.2.1
djibe Jul 28, 2018
b85c251
0.2.1
djibe Jul 28, 2018
b334944
0.2.3
djibe Jan 10, 2019
0839bbf
0.2.2
djibe Jan 10, 2019
55f21b9
0.2.2
djibe Jan 10, 2019
1d03466
0.2.2
djibe Jan 10, 2019
1a57e60
0.2.2
djibe Jan 10, 2019
2b9326f
0.2.2
djibe Jan 31, 2019
204417a
Removed this.parseInputValue() from getTime function
poradz Feb 1, 2019
e7642a4
Prevented the popover position from overflowing outside the window
Feb 6, 2019
191ca92
Merge pull request #4 from poradz/poradz-position-fix
djibe Feb 10, 2019
8ba67dd
Merge pull request #2 from poradz/poradz-callbacks-fix
djibe Feb 21, 2019
0fab781
0.2.3
djibe Feb 21, 2019
085b47b
Add files via upload
djibe Feb 21, 2019
1d5a089
Fix on am/pm parsing on load
r3dqu33n Apr 3, 2019
55f1413
Merge pull request #5 from r3dqu33n/gh-pages
djibe Apr 4, 2019
bad016b
0.2.3
djibe Apr 22, 2019
e87e0d3
Fixed #8 (minify)
rskrzypczak Mar 31, 2020
a9adcd8
Merge pull request #9 from rskrzypczak/gh-pages
djibe Mar 31, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# ClockPicker [![Bower version](https://badge.fury.io/bo/clockpicker.svg)](http://badge.fury.io/bo/clockpicker) [![Build Status](https://travis-ci.org/weareoutman/clockpicker.svg)](https://travis-ci.org/weareoutman/clockpicker) [![devDependency Status](https://david-dm.org/weareoutman/clockpicker/dev-status.svg)](https://david-dm.org/weareoutman/clockpicker#info=devDependencies)

A clock-style timepicker for Bootstrap (or jQuery).
A clock-style timepicker for Bootstrap 3 or 4 (or jQuery).
[Documentation and examples](http://weareoutman.github.io/clockpicker/).

![Screenshot](http://weareoutman.github.io/clockpicker/assets/images/screenshot-1.png)
Expand All @@ -15,7 +15,7 @@ Both desktop and mobile device are supported. It also works great in touch scree

## Dependencies

ClockPicker was designed for Bootstrap in the beginning. So Bootstrap (and jQuery) is the only dependency(s).
ClockPicker was designed for Bootstrap in the beginning. So Bootstrap (3 or 4 and jQuery) is the only dependency(s).

Since it only used `.popover` and some of `.btn` styles of Bootstrap, I picked these styles to build a jQuery plugin.
Feel free to use `jquery-*` files instead of `bootstrap-*` , for non-bootstrap project.
Expand Down Expand Up @@ -72,7 +72,7 @@ if (something) {
| default | '' | default time, 'now' or '13:14' e.g. |
| placement | 'bottom' | popover placement |
| align | 'left' | popover arrow align |
| donetext | '完成' | done button text |
| donetext | 'Done' | done button text |
Copy link

@elamperti elamperti Jun 30, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Has this default changed in the code as well?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In BS4 code yes

| autoclose | false | auto close when minute is selected |
| twelvehour | false | enables twelve hour mode with AM & PM buttons |
| vibrate | true | vibrate the device when dragging clock hand |
Expand Down Expand Up @@ -101,10 +101,14 @@ if (something) {
```bash
clockpicker/
├── dist/
│ ├── bootstrap-clockpicker.css # full code for bootstrap
│ ├── bootstrap-clockpicker.css # full code for bootstrap 3
│ ├── bootstrap-clockpicker.js
│ ├── bootstrap-clockpicker.min.css # compiled and minified files for bootstrap
│ ├── bootstrap-clockpicker.min.css # compiled and minified files for bootstrap 3
│ ├── bootstrap-clockpicker.min.js
| |── bootstrap4-clockpicker.css # full code for bootstrap 4
│ ├── bootstrap4-clockpicker.js
│ ├── bootstrap4-clockpicker.min.css # compiled and minified files for bootstrap 4
│ ├── bootstrap4-clockpicker.min.js
│ ├── jquery-clockpicker.css # full code for jquery
│ ├── jquery-clockpicker.js
│ ├── jquery-clockpicker.min.css # compiled and minified files for jquery
Expand Down Expand Up @@ -134,6 +138,10 @@ gulp
- [ ] Seconds View ?

## Change log
0.1

* Bootstrap 4 compatible (tested with BS 4.1.1)
* Universal theming using CSS variables

0.0.7

Expand Down
200 changes: 200 additions & 0 deletions dist/bootstrap4-clockpicker.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
/*!
* ClockPicker v0.2.1 for Bootstrap (http://weareoutman.github.io/clockpicker/)
* Copyright 2014 Wang Shenwei.
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
* Bootstrap 4 compatibility by djibe
*/

:root {
/* Just set your primary color in decimal RGB */
--primary-color: 19, 122, 249;
}

.clockpicker .input-group-addon {
cursor: pointer;
}

.clockpicker-moving {
cursor: move;
}

.clockpicker-align-left.popover > .arrow {
left: 25px;
}

.clockpicker-align-top.popover > .arrow {
top: 17px;
}

.clockpicker-align-right.popover > .arrow {
left: auto;
right: 25px;
}

.clockpicker-align-bottom.popover > .arrow {
top: auto;
bottom: 6px;
}

.clockpicker-popover .popover-title {
background-color: var(--primary);
color: #fff;
font-size: 24px;
font-weight: bold;
line-height: 30px;
text-align: center;
}

.clockpicker-popover .popover-title span {
cursor: pointer;
}

.clockpicker-popover .popover-content {
background-color: #fff;
padding: 12px;
}

.popover-content:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

.clockpicker-plate {
background-color: #ededee;
border: 2px solid #dedede;
border-radius: 50%;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see a mix of tabs and spaces here, you should unify those. Perhaps check what the project has been using and set an .editorconfig file while you are at it :)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll do it

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

width: 200px;
height: 200px;
overflow: visible;
position: relative;
/* Disable text selection highlighting. Thanks to Hermanya */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.clockpicker-canvas,
.clockpicker-dial {
width: 200px;
height: 200px;
position: absolute;
left: -1px;
top: -1px;
}

.clockpicker-minutes {
visibility: hidden;
}

.clockpicker-tick {
border-radius: 50%;
color: #666;
line-height: 26px;
text-align: center;
width: 26px;
height: 26px;
position: absolute;
cursor: pointer;
}

.clockpicker-tick.active,
.clockpicker-tick:not(.disabled):hover {
background-color: rgba(var(--primary-color), 0.25);
}

.clockpicker-tick.disabled {
color: #eee;
cursor: default;
}

.clockpicker-button {
background-image: none;
background-color: #fff;
border-width: 1px 0 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin: 0;
padding: 10px 0;
}

.clockpicker-button:hover {
background-image: none;
background-color: #ebebeb;
}

.clockpicker-button:focus {
outline: none!important;
}

.clockpicker-dial {
-webkit-transition: -webkit-transform 350ms, opacity 350ms;
-o-transition: -o-transform 350ms, opacity 350ms;
-webkit-transition: opacity 350ms, -webkit-transform 350ms;
transition: opacity 350ms, -webkit-transform 350ms;
-o-transition: transform 350ms, opacity 350ms;
transition: transform 350ms, opacity 350ms;
transition: transform 350ms, opacity 350ms, -webkit-transform 350ms;
}

.clockpicker-dial-out {
opacity: 0;
}

.clockpicker-hours.clockpicker-dial-out {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}

.clockpicker-minutes.clockpicker-dial-out {
-webkit-transform: scale(.8, .8);
-ms-transform: scale(.8, .8);
transform: scale(.8, .8);
}

.clockpicker-canvas {
-webkit-transition: opacity 175ms;
-o-transition: opacity 175ms;
transition: opacity 175ms;
}

.clockpicker-canvas-out {
opacity: .25;
}

.clockpicker-canvas-bearing,
.clockpicker-canvas-fg {
stroke: none;
fill: #747474;
}

.clockpicker-canvas-bg {
stroke: none;
fill: var(--primary-light);
}

.clockpicker-canvas-bg-trans {
/*fill: rgba(0, 149, 221, .25);*/
fill: rgba(var(--primary-color), .25);
}

.clockpicker-canvas line {
stroke: var(--primary);
stroke-width: 1;
stroke-linecap: round;
/*shape-rendering: crispEdges;*/
}
.clockpicker-button.am-button {
/*margin: 1px;
padding: 5px;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 4px;*/
}
.clockpicker-button.pm-button {
/*margin: 1px 1px 1px 136px;
padding: 5px;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 4px;*/
}
Loading