Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Timepicker doesn't work anymore #1418

Closed
Heziode opened this issue May 19, 2019 · 20 comments
Closed

Timepicker doesn't work anymore #1418

Heziode opened this issue May 19, 2019 · 20 comments
Assignees
Labels

Comments

@Heziode
Copy link
Contributor

Heziode commented May 19, 2019

Overview of the problem

Buefy version: 0.7.6

Description

v-model has not set anymore when we change the value in the timepicker.

Steps to reproduce

See this pen.

  1. try to change the value of hours or minutes
  2. Note that the value use in v-model is not changing

This working in 0.7.5.

Expected behavior

When we change the values in the timepicker, the variable used for v-model should be updated

Actual behavior

Value of v-model not changed when we change the value in timepicker.

@jtommy jtommy added the bug label May 19, 2019
@jtommy jtommy self-assigned this May 19, 2019
@jtommy jtommy closed this as completed in 517d46c May 20, 2019
@kerbo
Copy link

kerbo commented May 24, 2019

is the problem fixed? If so, any idea when the fix will be released?

@jtommy
Copy link
Member

jtommy commented May 24, 2019

I'm sorry but I'm going to release a new version next week

@GopherJ
Copy link

GopherJ commented Jun 15, 2019

same problem here

@Heziode
Copy link
Contributor Author

Heziode commented Jun 15, 2019

@GopherJ this has been fixed in 0.7.7. Which version do you use ?

@GopherJ
Copy link

GopherJ commented Jun 16, 2019

@Heziode I'm using 0.7.7 but still get this error, any idea?
peekKPDK3Z

@jtommy
Copy link
Member

jtommy commented Jun 16, 2019

@GopherJ can you show your code ?

@GopherJ
Copy link

GopherJ commented Jun 16, 2019

vue template

  <!--dateTimeStart picker-->
                            <div class="columns field has-addons is-gapless">
                                <b-datepicker
                                    v-model="SD"
                                    id="b-datepicker-start"
                                    icon="calendar-today"
                                    class="control column is-three-fifths"
                                    indicators="dots"
                                    :date-formatter="dateFormatter"
                                    :date-parser="dateParser"
                                    :events="eventsStart"
                                    :max-date="maxDate"
                                    rounded>
                                </b-datepicker>
                                <b-timepicker
                                    v-model="ST"
                                    icon="clock"
                                    :editable="false"
                                    class="control column is-two-fifths"
                                    :max-time="maxTime"
                                    rounded
                                    hour-format="24">
                                </b-timepicker>
                            </div>
ST: {
                get() {
                    console.log(this.dateTimeStart)
                    return this.dateTimeStart;
                },
                set(n) {
                    const h = n.getHours();
                    const m = n.getMinutes();

                    console.log(n)
                    if (
                        h === this.hourStart &&
                        m === this.minuteStart
                    ) {
                        return;
                    }

                    const s = new Date(
                        this.yearStart,
                        this.monthStart,
                        this.dayStart,
                        h,
                        m,
                        0
                    );

                    const e = new Date(
                        this.yearEnd,
                        this.monthEnd,
                        this.dayEnd,
                        this.hourEnd,
                        this.minuteEnd,
                        0
                    );

                    if (s < e) {
                        this.EDIT_DATE_TIME_START(s);
                    } else {
                        this.warningStart();
                    }
                },
            },

@GopherJ
Copy link

GopherJ commented Jun 16, 2019

@jtommy actually you can access it from here:

https://github.com/GopherJ/TimeRange

Thanks in advance for your help

@GopherJ
Copy link

GopherJ commented Jun 16, 2019

here a similar example:

<div id="app" class="container">
    
    <b-field label="Select time">
        <b-timepicker v-model="time"
            :editable="true"
            placeholder="Click to select...">

            <button class="button is-primary"
@click="time = new Date()">
<b-icon icon="clock"></b-icon>
<span>Now</span>
            </button>

            <button class="button is-danger"
@click="time = null">
<b-icon icon="close"></b-icon>
<span>Clear</span>
            </button>
        </b-timepicker>
    </b-field>

</div>
const example = {
    data() {
        return {
            test: new Date()
        }

    },
    computed: {
        time: {
            get() {
                return this.test;
            },
            set(n) {
                console.log(n)
                this.test = n;
            }
        }
    }
}


const app = new Vue(example)

app.$mount('#app')

@jtommy
Copy link
Member

jtommy commented Jun 16, 2019

https://codepen.io/anon/pen/OeNPgR is your last simple example and as you can see it works.
I took a quick look at your code and I think you're not updating the variable of getter computed prop

@kerbo
Copy link

kerbo commented Jun 16, 2019

The dropdown is being cutoff. This looks like a duplicate of #292 You can try the css in #292 to fix it.

@GopherJ
Copy link

GopherJ commented Jun 16, 2019

@jtommy actually the problem is when I see the log in console, it's different with what I choose, here is the gif to show that.

peekAZQ92Z

but in my example, I should be able to get the new value in setter so that I can update the data in vuex store, now the value is not logic, maybe something related to vuejs, I have no idea~

you can reproduce it by opening console in https://codepen.io/anon/pen/OeNPgR

@jtommy
Copy link
Member

jtommy commented Jun 16, 2019

@GopherJ You're right! It's like vue doesn't listen changes (setMinutes, ...) on a date object.
By the way i'm fixing it just now! 96258c4

@GopherJ
Copy link

GopherJ commented Jun 17, 2019

hello @jtommy, thanks for your quick fix, good to know that vuejs has this restriction, can I know how to use this commit?

I tried something like: git+https://github.com/buefy/buefy.git#96258c4, seems it doesn't compile

@jtommy
Copy link
Member

jtommy commented Jun 17, 2019

git://github.com/buefy/buefy.git#dev

@GopherJ
Copy link

GopherJ commented Jun 17, 2019

@jtommy I'm wondering if we can have a release for this, because the problem I'm encountering is that I'll need to change import buefy from 'buefy' to import buefy from 'buefy/src' everywhere and then switch back when it's stabled.

@GopherJ
Copy link

GopherJ commented Jun 17, 2019

@jtommy Sorry for disturbing you so much, I changed manually the main field in package.json to avoid changing too much code, but still I get some errors:

Module build failed: 
@import "~bulma/sass/utilities/initial-variables";
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /home/cheng/Project/Ubudu/rt_positions_server/real_time_tracker_ui/node_modules/buefy/src/scss/buefy-build.scss (line 1, column 1)

 @ ./~/buefy/src/scss/buefy-build.scss 4:14-277 18:2-22:4 19:20-283
 @ ./~/buefy/src/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

How can I fix it? When can we have a new release for this fix? Thanks!

@jtommy
Copy link
Member

jtommy commented Jun 17, 2019

You might build the dev version and use it in your project.
I think to make a new release this week

@GopherJ
Copy link

GopherJ commented Jun 18, 2019

@jtommy sadlly if I download it using npm, I don't even have build directory~

@jtommy
Copy link
Member

jtommy commented Jun 18, 2019

For general questions, please join official Discord server.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants