Greetings, just fixed the first fresh cup of coffee…after tinkering with a new domain. I have just taken some time to start tinkering with the JQuery Plugin, JQuery UI. Simply put, is a set of components that can be easily plugged in to typical user interface situations. In my quest to find a new Date Picker utility for a project( soon to be mentioned…) I was happy to re-discover JQuery UI. If you can program a Javascript popup, you should have no problem implementing this plugin.
One of the main reason that web designers utilize these plugins is to save development time on a project. Why reinvent the wheel for something as simple as a date picker. It would take at least an hour or two to program the time conversions ( all the possible time formats..etc…) compared to the minutes it took to download, install, implement, and upload. The documentation is very easy to read, with some neat features to customize your implementation. The nice folks at JQuery UI have even developed a page that allows you to style your download before you download it, to save a little more time…lol..nice work. http://jqueryui.com/themeroller/ is the link to the Customizer.
I will walk through the steps of the process and share a link to the live page for you to check out. I download the zip file, and extract to another folder. The page I was working on was already using Jquery, so I did not have to use the file provided with the download, I then copied the js file from the js folder to the js folder on my website. The next step is the css, I copied the custom-theme folder (contents are the css file and images folder) to my css directory on the website. The most important part of this process is remembering the paths to the appropriate files.
After you include the appropriate files in the [head] section of the webpage, there is some coding to include as well. You can copy from the index file in the download. This code is a javascript function that executes when the page is fully loaded into the browser. It simply assigns the appropriate components to the appropriate element(div or whatever container you choose).
Rather than past the code here, You can view source of the demo page for the code, feel free to comment or ask questions. Demo Link. Hope this post was helpful. If you need more help with a side project for your website, feel free to contact me through my web design website. I am local to Ft Lauderdale. Web Design Ft Lauderdale.