It’s me again Margaret. You may have picked up on a theme from my last few posts. I have been cleaning up my Jquery code that I have added to a site. There are a few reasons for this.

First, the last couple of versions of WebDev have really enhanced the browser code,  but to use some of the more advanced features you have to use Browser WLanguage Version 2. And not surprisingly turning on Browser WLanguage Version 2 highlighted a “few issues” in my old code.

Second, we now have native controls for things like the switch control which replace way more complex jQuery controls I was using before.

And finally, my knowledge and understanding of jQuery and CSS have greatly improved in the last 2 years, especially with how it relates to WeDev.

I have been using the jQuery UI DataPicker control for quite a while. The WebDev native date entry control is fine and works in most instances, but it does have one shortcoming, there isn’t an easy way to navigate years on the calendar, you have to go month by month, which isn’t great when you need to enter birthdates. The user is forced to type in the date or use the calendar and press the previous month button a bunch of times, especially for old folks like me!

The jQuery UI DatePicker control makes it very easy to navigate years. On the other hand, to get everything to format and work as I want, I have to disable the entry field and the user is forced to use the date. It has been a while since I tried to battle that and I might be able to resolve that with what I have learned in the last 2 years, but for what we are using it for, it isn’t important (meaning not billable work), so that will have to wait for a future article.

So let’s look at how I implemented the jQuery UI DatePicker and then we will discuss a few new things I have learned about WebDev and the user of jQuery and jQuery UI.

First I need to edit fields for the date, the one visible to the user. And a hidden entry control that is linked to the database variable I am updating. Note both of these controls are created as text controls, but more on that later.

Advanced jQuery controls with lots of parameters, often use an object for the parameters and figuring out how to do that was one of my struggles early on when I started using jQuery with WebDev. But its actually very simple.

dpobj is dynamic object = new "Object"
dpobj = setDatePickerDefaults()
dpobj.altField = "#EDTREALASOF"
edtAsOfDate = DateToString(edtRealAsOF,"MM/DD/YYYY")
jQuery("#EDTASOFDATE").DatePicker(dpobj)

The first line declares an object. The second line is a global browser procedure that sets quite a few defaults parameters that I want to use for all dates fields. We will look at that shortly. And the last line of code, tells the DatePicker that I want to store an alternately formatted version of the date in a different field, this is my hidden entry field discussed above. I initialize the visible control with the value from the hidden control, which is linked to the database field, note I need to format it the way the DatePicker is going to format the visible control. And finally, I make a jQuery call to turn the DatePicker on for that control.

Now seems the right time to remind you of a few things.

1. You need to turn off JavaScript compression so you can reference the controls by their real names, instead of A1, A2….
2. Everything in JavaScript is case sensitive, that includes the parameter names for the DatePicker, make sure you match your case to the documentation. For example, AltField would not work it must be altField

Now let’s look at the code of my global browser procedure setDatePickerDefaults().

PROCEDURE setDatePickerDefaults

dpobj is dynamic object = new "Object"
dpobj.changeMonth = True
dpobj.changeYear = True
dpobj.autoSize = True
dpobj.dateFormat = "m/d/yy"
dpobj.yearRange = "1900:" + Left(Today(),4)
dpobj.monthNamesShort = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]
dpobj.dayNamesMin = [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]
dpobj.altFormat = "yymmdd"

RESULT dpobj

This is some of the code I had to adjust for Browser WLanguage Version 2. I used to pass the object by address, so they were updated in memory, instead of returning, declaring and returning an object. But with Version 2 I would get an error on the object types not being the same, so I adjusted to the above code.

There are quite a few parameters besides the ones I am using above if you want to learn more check out the jQuery UI help

changeMonth and changeYear is what gives us the combo boxes making it easy to navigate months and years.

dateFormat is how the date will be displayed in the edit control, I am making it a user-friendly version with /’s

altFormat works along with altField we already discussed to store the date in an alternate field using a different format and I am using YYYMMDD format to make it a date that is WebDev code friendly. Note the format is yymmdd, but if you read the help for the date picker you will find out that is actually YYYYMMDD for our way of thinking.

Now, whenever the user clicks on the edit field the Date Picker is displayed, and when they select a date both the visible field and the hidden field are updated with the new date in the respective formats. And all of my logic uses the hidden field, which is in the correct format for WebDev to treat it as a date.

We are almost done. We haven’t loaded jQuery or the jQuery UI libraries. Well, this is one of the things I have learned a lot about in the last couple of years. I originally thought we had to load those libraries to do anything with jQuery, but now that I have a much better understanding of how it all works, I now know that both of those libraries are already loaded because WebDev itself uses them. In fact, I had some issues last week with Graphs not refreshing properly and it turned out to be because I was loading a different version of jQuery then WebDev uses and it was causing a conflict.

So since I now “know better” I thought I was done, but when I tested the page I got a JavaScript error.

What that error is telling us, in its own special way, is that the datepicker method doesn’t exist. Note: How I figured that out was by converting my code to JavaScript and running it which gave me a better error, but that again is a topic for another day.

This through me for a loop for a bit, I know WebDev is loading the jQuery UI library, in fact a quick “view page source” proves it.

So what the heck is going on, well notice that src is actually a link, so in chrome, while viewing the code I can actually click the link to open that src.

At the very top of that library is a few lines like this:

/*! jQuery UI - v1.12.1 - 2017-05-22
* http://jqueryui.com
* Includes: widget.js, position.js, data.js, disable-selection.js,

The include section goes on for miles! Well, it turns out that jQuery UI actually makes it very easy to build and download your own custom version of the library. And since PCSOFT doesn’t use the DatePicker widget, they don’t include it in the library they include.

At this point, I could download and include the full jQuery library, in fact, I originally did that and it worked fine, but sooner or later I suspect I would run into some kind of weird conflict like I did last week with graphs, and let me tell you those are not fun or easy to find and fix! So instead, I used the same feature to create a version of the library that only has the DatePicker in it. Head over to https://jqueryui.com/download/ and you can choose what is included in the library you download.

Note when I selected Datepicker it automatically selected Keycode as it is required by Datepicker. When you click download you will get a zip file with your custom version of the library and a bunch of other stuff.

The main thing we need out of here is jquery-ui.js or alternatively jquery-ui.min.js. The difference being the .min has the what space removed. I don’t want this to be confused with the full jQuery UI library so I renamed it jquery-ui.datepicker.min.js and added it to my project _WEB folder.

Note: If you are using the SCM, and please tell me you are, you will need to manually add this to your SCM since you are doing this outside of the IDE, so it doesn’t know to automatically include it.

Note 2: There is a place on the details tab of the Page description where you could include the jQuery library there, however, if you add it there it loads at the beginning of the page, while WebDev is loading the jQuery base library at the end of the page. This can cause some odd issues and errors with some libraries, so thanks to some help from PCSOFT support, which they deserve far more than what thanks they get, I instead use the following code in the page initialization event to load anything at the very end after WebDev has loaded all of its libraries.

MyPage..HTMLEndPage += [
	/%5B%FolderWeb()%%5D/jquery-ui.datepicker.min.js
]

Now your page should run without error but your Date Picker might not be as attractive as the example I showed above. It probably looks something like this

That is because you also need the jQuery UI CSS files and images. There are actually a lot of options with it comes to jQuery UI CSS, including themes, 3rd party themes, custom tweaks, etc. Which would make for an article all by itself, and if I get enough demand (meaning billable work) I might do that at a future date. Suffice it to say, those bits and pieces are included in the zip file you got from jQueryUI, based on some of the options available to you. Once you get the CSS and image files where you need them in your _WEB folder (and SCM – don’t forget the SCM!), all you need to do is load the jQuery UI css file on your page. Unlike the jQuery, we CAN do that on the details tab of the page description

Now you should have a Date Picker similar to below, depending on what theme you selected.

Ironically as I learn more and more about jQuery I am able to incorporate it into my sites easily, but at the same time with each new release of WebDev, PCSOFT adds more and more native abilities that keep me from needing as much jQuery.

 

 

• WEBDEV
• WX