0

ZK Simple Calendar Event [closed]

asked 2019-07-14 11:01:48 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2619 3 8
http://emrpms.blogspot.in...

Hello

Look at the ZK Demo for simple Calender demo

In my application, i need to fire the event only when user press on the day of the calender. Currently onChange Event firing even when user navigate to another month using the arrow key in the top. How to restrict this ? or any other event like onDayClick available ?

Secondly, is there any way, we can block the selecting of future date ?

delete flag offensive retag edit

The question has been closed for the following reason "the question is answered, right answer was accepted" by cor3000
close date 2019-07-18 10:12:24

Comments

1

Agreed unlucky choice of UI elements, doesn't 100% match in this special case. For this case you can simply implement a custom event:

http://zkfiddle.org/sample/1kscaf8/1-calendar-custom-onDayClick-event

Since you didn't provide your ZK version I only tested this with the latest version: 8.6.2

cor3000 ( 2019-07-16 17:04:24 +0800 )edit

one comment/reply is enough... no need to repeat your observation

cor3000 ( 2019-07-16 22:47:46 +0800 )edit

9 Answers

Sort by ยป oldest newest most voted
1

answered 2019-07-17 14:41:34 +0800

cor3000 gravatar image cor3000
4671 2 7
ZK Team

updated 2019-07-17 14:44:48 +0800

Thanks for the clarifying video. Yes it's not working since you didn't copy/paste the whole example.

If you took the time look at my TestVM class you might have noticed that I am initializing the selectedDate member with new Date() instead of leaving it uninitialized.

Anyway recommendation is my second example which wouldn't even have this problem, because it doesn't create unnecessary state that might be null in the first place.

http://zkfiddle.org/sample/1kscaf8/5-calendar-custom-onDayClick-event

Please take the time trying to read and understand the examples provided by forum users trying to help for free!

link publish delete flag offensive edit
0

answered 2019-07-16 15:26:35 +0800

cor3000 gravatar image cor3000
4671 2 7
ZK Team

updated 2019-07-17 10:28:21 +0800

The easy question first:

Secondly, is there any way, we can block the selecting of future date ?

Yes, by setting a constraint:

<calendar onChange="Clients.log(event.value.toString())" constraint="no future" />

<calendar> reflects changes immediately. In comparison <datebox> only triggers onChange when the popup closes.

Since the <calendar> is always open, it's like clicking a radio button or checkbox, the change happens immediately, otherwise the component state would be inconsistent.

EDIT:

you can fire a custom event as demonstrated in this ZK fiddle http://zkfiddle.org/sample/1kscaf8/3-calendar-custom-onDayClick-event

<zk xmlns:w="client">
  <calendar constraint="no future"
            onDayClick="Clients.log(self.getValue().toString());"
            w:_clickDate="">
    <attribute w:name="_clickDate"><![CDATA[
      function(evt) {
        this.$_clickDate.apply(this, arguments);
        var disabled = evt.domTarget && jq(evt.domTarget).hasClass(this.$s('disabled'));
        if(this._view === 'day' && !disabled) {
          this.fire('onDayClick', null, {toServer: true});
        }
      }
    ]]></attribute>
  </calendar>
</zk>
link publish delete flag offensive edit
0

answered 2019-07-16 16:12:52 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2619 3 8
http://emrpms.blogspot.in...

Agree. But ZK Team should consider adding different events such as onDayClick, Onnavigate, etc in the future release. The client is complaining about that, so we handled the onDoubleClick Event for now to resolve the problem.

Look at the video, you will understand better Link

link publish delete flag offensive edit
0

answered 2019-07-16 17:26:17 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2619 3 8
http://emrpms.blogspot.in...

Thanks a lot. I am using the same version. Works Perfectly

link publish delete flag offensive edit

Comments

thanks for the feedback

cor3000 ( 2019-07-16 19:09:49 +0800 )edit

Sorry. i need to re open . It does not work when you select today date. Check in the fiddle. But if you select other date and then select today date, it works.

Senthilchettyin ( 2019-07-16 19:46:51 +0800 )edit
0

answered 2019-07-16 19:50:22 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2619 3 8
http://emrpms.blogspot.in...

Sorry. i need to re open . It does not work when you select today date. Check in the fiddle. But if you select other date and then select today date, it works.

link publish delete flag offensive edit

Comments

It's already late so I'll just give you a hint: the custom event code checks whether the valueBefore and valueAfter are NOT EQUAL (!==) before firing the event, maybe that can be adjusted somehow ;)

cor3000 ( 2019-07-16 22:43:51 +0800 )edit

since this thread is becoming a mess I updated my original anwer ... please next keep each forum thread to 1 question

cor3000 ( 2019-07-17 10:29:09 +0800 )edit
0

answered 2019-07-17 11:38:59 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2619 3 8
http://emrpms.blogspot.in...

Sorry again problem. I am using MVVM and value binded with the VM Variable which is always null

<calendar value="@bind(vm.selectedDate)"
                        onDayClick="@command('onSelectDate' )"
                        w:_clickDate="">
                        <attribute w:name="_clickDate">
                            <![CDATA[ function(evt) {
                            this.$_clickDate.apply(this, arguments);
                            var disabled = evt.domTarget &&
                            jq(evt.domTarget).hasClass(this.$s('disabled'));
                            if(this._view === 'day' && !disabled) {
                            this.fire('onDayClick', null, {toServer:
                            true}); } } ]]>
                        </attribute>
                    </calendar>
link publish delete flag offensive edit
0

answered 2019-07-17 12:09:57 +0800

cor3000 gravatar image cor3000
4671 2 7
ZK Team

when I try this it works, the selected date stays in sync with the selected date:

http://zkfiddle.org/sample/1kscaf8/4-calendar-custom-onDayClick-event

However as I understood you are not interested in storing the selected date in your view model at all. Instead of this unnecessary member variable and getter/setter, you can just send the current calendar value as a binding parameter.

http://zkfiddle.org/sample/1kscaf8/5-calendar-custom-onDayClick-event

If you still find a problem, please provide code that reproduces your issue otherwise no one can help you efficiently.

link publish delete flag offensive edit
0

answered 2019-07-17 14:16:49 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2619 3 8
http://emrpms.blogspot.in...

Sorry. I just copy the code, but it is not working on my project. Look at the video CodeDemo

link publish delete flag offensive edit
0

answered 2019-07-17 15:11:21 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2619 3 8
http://emrpms.blogspot.in...

Yes. the Second example which pass the value from zul to VM as binding param works well. And also another problem is using SQL.Date instead of Java.util.date.

I changed the implementation to the following example, it works well [http://zkfiddle.org/sample/1kscaf8/5-calendar-custom-onDayClick-event]

Here is the video after changing. Demo

link publish delete flag offensive edit

Comments

I didn't notice any change, you just provided the same zkfiddle link again... and also my example didn't use java.sql.Date ... you must be confusing something ... anyway I am glad you found a version that works for your case.

cor3000 ( 2019-07-17 15:34:51 +0800 )edit

Question tools

Follow
1 follower

RSS

Stats

Asked: 2019-07-14 11:01:48 +0800

Seen: 25 times

Last updated: Jul 17

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More