Remove Calendar Popup and replace with jQuery UI

[damithc]

From Monkit...@gmail.com on January 24, 2013 17:30:06

The Calendar Popup is very small and it prevents user from typing in the date which is sometimes a lot faster and much more easy.

Suggestion:

Use jQuery UI http://jqueryui.com/datepicker/#icon-trigger click on the icon to show the calendar that auto restricts the date range

and it will allow user input

Original issue: http://code.google.com/p/teammatespes/issues/detail?id=548

[damithc]

From dam...@gmail.com on January 24, 2013 06:47:33

Status: Accepted
Labels: Priotiry-Low

[damithc]

From dam...@gmail.com on January 25, 2013 02:55:37

Labels: -Priotiry-Low Priority-Low

[damithc]

From shawnteo...@gmail.com on January 27, 2013 04:01:58

I would like to enhance this if possible

[damithc]

From dam...@gmail.com on January 27, 2013 07:08:52

Shawn, Do this after Issue 570 . Chun Teck, should we add jqueryUI to our list of third-party libraries?

Owner: shawnteo...@gmail.com
Cc: chunteck...@gmail.com

[damithc]

From chunteck...@gmail.com on January 27, 2013 07:12:58

@Damith: Yes we should. Do you want to dl all the JQueryUI widgets that we may possibly use in one shot? Or just start with the calendar?

[damithc]

From dam...@gmail.com on February 20, 2013 05:18:18

Blocking: teammatespes:13

[damithc]

From dam...@gmail.com on February 20, 2013 06:11:08

Labels: Difficulty-Medium

[damithc]

From shawnteo...@gmail.com on April 14, 2013 15:35:15

Owner: ---

[damithc]

From arnold.k...@gmail.com on March 17, 2014 23:31:12

Issue 1719 has been merged into this issue.

[damithc]

From franklin...@gmail.com on March 18, 2014 23:11:36

can I work on this issue? (previously Dr Damith mentioned wait until another issue 570 , seems that one is fixed--so i can work on this issue now right?)

[damithc]

From dam...@gmail.com on March 18, 2014 23:24:36

sure. give it a try.

Cc: -chunteck...@gmail.com

[damithc]

From franklin...@gmail.com on March 25, 2014 22:40:14

a screenshot here, is this OK?(was busy previously, have not been working on this for a week :))

Code: $(function() { $("#start" ).datepicker({ dateFormat: "dd/mm/yy", showOtherMonths: true, showOn: "button", buttonImage: " http://jqueryui.com/resources/demos/datepicker/images/calendar.gif ", buttonText: "Calendar", buttonImageOnly: true, onSelect: function(selected) { $("#deadline").datepicker("option","minDate", selected); } }); $("#deadline").datepicker({ dateFormat: "dd/mm/yy", showOtherMonths: true, showOn: "button", buttonImage: " http://jqueryui.com/resources/demos/datepicker/images/calendar.gif ", buttonText: "Calendar", buttonImageOnly: true, onSelect: function(selected) { $("#start").datepicker("option","maxDate", selected); } }); });

css and image added too.

1. currently the way I set min and max date only works after the user select start and end date(you can tell from the code). I can put the code in documentready block. I did not put that into here as I am just testing it out.
2. the input field is still readonly--that means i have to be able to select date using jquery for test code and i have not figured out that

Attachment: Untitled.png

[damithc]

From franklin...@gmail.com on March 25, 2014 22:40:58

and the calendar icon i did not added into the project folder as i am just testing it out

[damithc]

From dam...@gmail.com on March 25, 2014 23:48:07

Looks nicer. Doesn't it have a 'today' button? It's always useful to be able to select today easily.

[damithc]

From franklin...@gmail.com on March 26, 2014 00:18:09

I do not know about that. But where do you want the tdy button to be? And btw, can you just assign this to me? Thanks

[damithc]

From franklin...@gmail.com on March 26, 2014 00:22:17

Well, yes there is a today button in date picker. So I turn that on and working on testing? Current styling is Ok? Anything else?

[damithc]

From dam...@gmail.com on March 26, 2014 00:47:13

Yup, do that and move to testing. The only other thing you can do (not important) is to tweak the color scheme to match ours.

[damithc]

From dam...@gmail.com on March 26, 2014 00:52:41

Owner: franklin...@gmail.com

[damithc]

From franklin...@gmail.com on March 26, 2014 20:25:36

$("#deadline").datepicker is not a function Source:

file:///D:/Mercurial/teammates/src/main/webapp/js/instructor.js:39

not sure how to solve this. Any hint given? (Spending quite some time trying to figure out)

Cc: dam...@gmail.com

[damithc]

From franklin...@gmail.com on March 26, 2014 20:55:10

I put the js code into a separate js file and did not test that js. hope that is OK

[damithc]

From dam...@gmail.com on March 26, 2014 21:16:32

Once I see the patch, I can say whether we need more testing. :-)

[damithc]

From franklin...@gmail.com on March 27, 2014 10:07:10

https://codereview.appspot.com/81500043/

Status: ReadyForReview

[damithc]

From dam...@gmail.com on March 27, 2014 18:03:46

I'll review soon. Meanwhile, can you revert unnecessary formatting changes? We have the tooptip div at the start of the page and the datepicker div at the bottom. Which is better? If no difference, move the datepicker to the top as well (near tootips div).

[damithc]

From franklin...@gmail.com on March 27, 2014 18:07:07

So you are suggesting the position of date picker should be at the start? Is not that fixed by jquery?

[damithc]

From dam...@gmail.com on March 27, 2014 18:13:25

I'm referring to the

that appears at the bottom of the *.html pages. is that added by jquery automatically? In that case, we can't do anything about it.

[damithc]

From franklin...@gmail.com on March 27, 2014 18:21:10

And the format changes mainly refer to jsp files?I do not remember many "deliberate" format change. Could it because I am using a plugin that is replacing tabs by spaces?

[damithc]

From franklin...@gmail.com on March 27, 2014 18:23:03

I did not do anything to add date picker. I think it is added by jquery, but I will see if can change the position of that

[damithc]

From dam...@gmail.com on March 27, 2014 18:27:15

div position: In that case, we can let it be. formatting changes: Yes, it must be the plugin. Disable it.

[damithc]

From franklin...@gmail.com on March 27, 2014 22:44:31

Sir, Can you elaborate more on how to revert format change? I just uninstalled the plugin--but I guess it is the eclipse setting "replace tab with spaces" that is causing the problem? just jsp files right? or anything else? deleting spaces and do auto indent by eclipse without replacing tab?

[damithc]

From dam...@gmail.com on March 27, 2014 22:57:41

Some gruntwork required :-p Start a new branch and manually copy over the changes you did, omitting the formatting changes. Alternatively, a good diff tool might be able to revert changes selectively though. We should standardize tabs vs spaces choice and convert everything to one format, but that should be done as a separate issue.

[damithc]

From franklin...@gmail.com on March 27, 2014 23:00:41

so even for html files, I have to change spaces to tab?

[damithc]

From dam...@gmail.com on March 27, 2014 23:03:53

Those can be left as they are, unless you can find a diff tool to do that easily. It is worth looking into. Such a tool may be useful in the future. We try to avoid unnecessary changes to lower the risk of merge conflicts and misleading the auto-merge tools.

[damithc]

From franklin...@gmail.com on March 28, 2014 02:57:48

https://codereview.appspot.com/81500043/ I reformatted jsp files--but I did not added those white spaces that were removed because they are at the end of lines. if you still want to keep the files the way they originally were, I will add those ending white spaces back(just that to me ending white spaces should not be there any way)

[damithc]

From dam...@gmail.com on March 28, 2014 03:26:04

Waiting for clarification.

Status: ChangesRequested

[damithc]

From franklin...@gmail.com on March 28, 2014 04:03:18

this css is to format calendar UI. with css, the calendar will be plain table

[damithc]

From dam...@gmail.com on March 28, 2014 04:12:45

Is it meant to be empty? The patch shows only a comment in that file.

[damithc]

From dam...@gmail.com on March 28, 2014 04:19:49

Status: ReadyToMerge

[damithc]

From dam...@gmail.com on March 28, 2014 04:41:31

Status: MergeInProgress

[damithc]

From dam...@gmail.com on March 28, 2014 04:47:01

Junchao, email me the image files. I can get them from the patch.

[damithc]

From dam...@gmail.com on March 28, 2014 04:51:39

There is something wrong with the patch. When I applied it, that css file becomes empty. Try uploading the patch again.

Status: ChangesRequested

[damithc]

From franklin...@gmail.com on March 28, 2014 04:57:15

https://codereview.appspot.com/download/issue81500043_40001_50012.diff https://codereview.appspot.com/81500043/patch/40001/50012 I tried viewing it, strangely there is just one line as you have said. I do not know what is wrong, but the above link works.

Gu Junchao Major in Computer Engineering, National University of Singapore Primary Email: franklingujunchao@gmail.com franklingujunchao@gmail.com NUS Email: A0105750@nus.edu.sg A0105750@nus.edu.sg

[damithc]

From franklin...@gmail.com on March 28, 2014 05:03:36

I have re-uploaded this file twice, the view page in code review still does not work

anyway, I am attaching the css here.

Gu Junchao Major in Computer Engineering, National University of Singapore Primary Email: franklingujunchao@gmail.com franklingujunchao@gmail.com NUS Email: A0105750@nus.edu.sg A0105750@nus.edu.sg

[damithc]

From dam...@gmail.com on March 29, 2014 00:50:35

Junchao,

1. The calendar should pop up when the user clicks on the text box, not just the calendar icon.
2. Add a small space between the text box and the calendar icon?
3. Where's the 'today' button? Alternatively, we can pre-select today in the calendar popup automatically, when it fits the situation.

[damithc]

From franklin...@gmail.com on March 29, 2014 01:01:27

for point 1: since for evals the original text box is read-only, now it is still read-only and therefore I disabled any direct user interaction with text box. if you want the user to click on text box and see, that is fine--but i just want to make sure of this. point 2: I do not mind this change, but again only evals have calendar icon because text boxes are read-only(we can also remove the icon) point 3: I did put the code there and for some reason I did not see the button either...and I did not find my luck online. setting the default date to be today is fairly simple though.

[damithc]

From dam...@gmail.com on March 29, 2014 01:13:51

Yes, let's remove the icon. I think the text box is good enough. Is there any downside to using just the text box?

[damithc]

From franklin...@gmail.com on March 29, 2014 01:18:11

so I will remove the icon and I will set the default date to be today(anything else else for this? like set default date to be today only for starting dates but not ending dates? or any other requirements?)

(like I have said, previously the text boxes in evals page are read-only and I thought I did not want to change that because of no reason. that is why i have icons there. making boxes read-only may disable users from keying in the value for dates by themselves with wrong format)

[damithc]

From dam...@gmail.com on March 29, 2014 01:31:25

The current approach is that the text box is read only but there is no icon. When we click on the text box, the pop up appears. Can do the same? For now, the popup can be preset to current value in the text box or today (if the text box is empty). A more intelligent preset can be done later as a separate issue.

[damithc]

From franklin...@gmail.com on April 01, 2014 03:48:43

for evals/evaledit page, the input is readonly. but seems for feedback-related pages, they are not read-only. so i will just change all of date input field to be read-only? is that Okay?

the default date should be tdy--that only applies when trying to add a new eval/feedback, is that right?

[damithc]

From franklin...@gmail.com on April 01, 2014 05:03:25

https://codereview.appspot.com/81500043/

Status: ReadyForReview

[damithc]

From dam...@gmail.com on April 01, 2014 08:12:09

Minor comment added. Yes Junchao, make all read-only. Yes, only for new ones. After addressing the comment, send me the diff file to apply.

Status: ChangesRequested