pencilpix / vue2-clock-picker Goto Github PK

If I have two of these on one page, the for of all the labels is the same, so clicking the label for the second input results in setting the first input(!)

Hi,
Thanks for publishing this project.

If you don't set the disabledFrom or disabledTo inputs; and you have a CTO who likes doing things "at" midnight (i.e. he choose 00:00:00); the validation (which isn't enabled) will still say that its an error.

I resolved this on my copy of the source by adding to the top of isDisabled()
if(this.disabledFrom ==='' && this.disabledTo==='') { return false; }

I am using this component within a modal, but the modal of the clock is not shown. how can I modify the css style to show the clock

my CSS style for the first modal

.modal-content .modal-body {
        position: relative;
        padding: 20px 10px;
    }
    .modal-content{
        width: 100% !important;        
    }
    .mostrar{
        display: list-item !important;
        opacity: 1 !important;
        position: absolute !important;
        background-color: #3c29297a !important;        
    }
    .div-error{
        display: flex;
        justify-content: center;
    }
    .text-error{
        color: red !important;
        font-weight: bold;
    }

I appreciate your help

Greetings, thanks for publishing this clock picker.

In order to get this component available in other components, I needed to add a local var, so the components array worked.
I don't need to do this for other components. I am building a Vue GUI inside a completely different platform, so have less access to Node tools on this project.

...
let VueClockPicker=window['vue2-clock-picker']['default'];
...
let navBar=Vue({
components:[ VueClockPicker ...],
...
})

Either:

• have I over looked something in the docs?
• I should submit a documentation patch
• I could rename several things so they are valid var names, where I think the export would be automatic.

Hi there,

I've tested your component and really like it,
but there is one problem that makes it not suitable for my case,
the problem is that if the value of the time is changed programmatically the input of your picker does not update.

This might be because the value of the prop "value" is being set on data->inputValue and this only happens when the component renders, the solution might be referring to the prop "value" along the component instead of referring to InputValue, making then the component dynamic.

Was this something you consider doing?

Thanks!

Hi,

I'm having a weird issue with the fonts used to draw on the canvas.
I'm not using a Material theme, but I've imported the Roboto font.
The first time a picker is displayed, it uses the wrong font (default serif, Times New Roman I guess) for the numbers.
When closed, and opened again, it uses the correct font (Roboto).
With multiple pickers on the same page, the issue doesn't occur with all of them - only the first one opened is affected.

Is this a bug, or am I missing a step?

If I define a range such as disabled-from = "17:30" disabled-to = "08:00" is not working properly.

if I just define disabled-from = "17:30" it works fine until 00:00
and if I just define disabled-to = "08:00" it works fine from 00:00 to 07:59 but with both properties together it does not work.

Is there any way to change the time format ?
Could not find any option in documentation.

Is it possible to open the clock initially? I did not found something in the code

It wont fires the alert that I set in beforeOpen

 <vue-clock-picker
                id="time-range-end"
                refs="timeRangeEnd"
                v-model="inspectionTimeRange.end"
                :beforeOpen="()=>{
                      alert();
                })"
              ></vue-clock-picker>

Sorry that I didn't make a pull request for this. But hopefully it'll help somebody who searches for this problem, likes to have Edge compatibility or want to make a PR. The function "getBoundingClientRect" doesn't have "x" and "y" available in Edge. But these values are also stored in "left" and "top". So rewriting the following will then also work with Edge:

calculateLastEvent: function calculateLastEvent(t) {
  ...
  //instead of
  r = o.x + this.width / 2,
  s = o.y + this.width / 2,

  //rewrite to
  r = o.left + this.width / 2,
  s = o.top + this.width / 2,    
  ...
}

It's also possible to have IE11 compatbility when replacing all "includes" with "indexOf". For example:

//instead of
var e = t.disabled.includes(t.defaultValue);

//rewrite to
var e = t.disabled.indexOf(t.defaultValue) > -1;

The only problem left for IE11 is to polyfill "find" with the following:
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Polyfill

Thanks for this really nice and well designed component. Looking forward to use it :).