Jay@TastefulTitles.com

I have 3 functions that need to be executed sequentially. The first loads an .xml file, the second sorts it, and the third builds code from it. It used to work just fine to simply call them in sequence, but when I enlarged the size of the .xml file, I started getting errors where the sort function was trying to sort an undefined object. So I've been studying callbacks. I thought I understood, but when I set up this example, it proved I don't get it at all: <script> function test1(test2) { alert(1) } function test2(test3) { alert(2) } function test3() { alert(3) } test1() </script> I thought I should get 3 alerts, 1, 2, and 3. I only get 1. I've read through every major tutorial on callbacks, and find I'm still confused. Maybe if someone can show me how to adjust this example to get the desired result, I will see what I need to do in my real code.

DreamWeaver CS5 balks at this line: return `${this.getFullYear()}-${(''+(this.getMonth()+1)).padStart(2,'0')}-${this.getDate()}`; It objects to the $'s. I can't find any explanation for this use. I did find this: I'm working in Safari. Of course I could use a different browser, but I and many of my customers use Safari, so I need a solution with wider application. I did finally get your code working in Chrome, but there doesn't seem to be a way to set a minimum date for it. As you mention, I can validate input after the fact, but why not make it easy for the user? TheDatePicker allows me to set minimum date, and starting date and lots of other options (if I can figure them out). My earlier searches had not turned up the HTML5 picker, so I'm glad to know about that. Unfortunately, its realization is not standardized at all, so it doesn't seem to meet my needs. The good news is that I've spent all day trying to learn more about callbacks, and I think I may be able to get what I have to work. I may very well employ your prototype functions for date manipulation. Thanks again for your efforts.

I can't run your code because it apparently uses Jquery or some format that I don't have, but I don't see anything in your code that looks like a date picker. I see the date fields, which are required for the date picker, but there is no date picker attached. Am I missing something?

Thanks for the welcome, and for the code. My problem is not in manipulating dates. I think it's that I'm still struggling to grasp callbacks and how to use them. The min date for the second datepicker can't be set until the user has chosen the starting date for his rental in the first datepicker. The code that sets up the 2nd datepicker appears to run when the page is drawn, but maybe I'm mistaken, and it is actually part of a callback that runs when the date2 field becomes active. I need to play with that idea and I'll get back. Thanks again for trying to help. Sorry I didn't explain it better.

My website needs to use a date picker to choose first and last dates of a rental period. I chose TheDatePicker because it said it was pure JS and easy to use. The picker for the first date works fine. I am finally able to make the MinDate 10 days from the current date, as intended. Once the first date is chosen, I need to make it the MinDate for the second chooser. I can't seem to find the correct code to do that. Do I need to use a callback? Do I have to set a listener? The docs for TheDatePicker show code for doing that, but that code is in TypeScript rather than straight JS, and I can't figure out how to implement it. Can someone point me to an example, or suggest a different picker where this is easier? Here is my code: <tr> <td style="text-align:center"> <div id="input-wrapper" class="w3-container" style="text-align:center"> <input id="date1" type="text" class="form-control w3-show-inline-block w3-border") style="width:60%; min-width:11ch"> <script> (function () { // This code works as intended. const input = document.getElementById('date1'); const datepicker = new TheDatepicker.Datepicker(input); datepicker.options.setInputFormat("Y, m, d"); datepicker.options.setMinDate("+ 10 days"); datepicker.options.setDropdownItemsLimit(20); datepicker.render(); })(); </script> </div> </td> <!-- 2ND DATE FIELD --> <td id="wrapper2"> <div class="w3-container" style="text-align:center"> <input id="date2" type="text" placeholder="Last show" class="form-control w3-right w3-border" style="width:60%; min-width:11ch"> <script> (function () { const input2 = document.getElementById('date2'); const datepicker2 = new TheDatepicker.Datepicker(input2); //This code obviously needs to go somewhere else, because it can't run until date1 is chosen. var d = new Date(document.getElementById("date1").value); datepicker2.options.setMinDate(d.toDateString() //(I realize this code won't work anyway, but I can fix that. My question is how to access it.) datepicker2.render(); })(); </script> </div> </td> </tr> This is what's shown in the docs, but I can't figure out how to implement it. // Callback to be called just before the datepicker is opened or closed. // An Event instance and a boolean telling whether datepicker was opened (true) or closed (false) are given on input. // If callback returns false, action stops and datepicker will not be opened / closed. public onBeforeOpenAndClose(listener: OpenAndCloseListener): void { this.onEvent_(EventType_.BeforeOpenAndClose, listener as AnyListener); } public offBeforeOpenAndClose(listener: OpenAndCloseListener | null = null): void { this.offEvent_(EventType_.BeforeOpenAndClose, listener); } // Callback to be called immediately after the datepicker is opened or closed. // An Event instance and a boolean telling whether datepicker was opened (true) or closed (false) are given on input. public onOpenAndClose(listener: OpenAndCloseListener): void { this.onEvent_(EventType_.OpenAndClose, listener as AnyListener); } public offOpenAndClose(listener: OpenAndCloseListener | null = null): void { this.offEvent_(EventType_.OpenAndClose, listener);

After several hours of trying one thing and another, I finally hit on something that worked, and it seems to be in line with what you just posted: I removed the <form></form> tags enclosing the search field. I don't know whether any of my other changes had any effect, but now it is working exactly as intended. Thanks for your suggestions!

I switched getPropertyValue() for getComputedStyle(), which seems to have been forcing the redraw. It works just as well, but gives the same results—it still flashes, then redraws. FWIW, I can display div shade (and its catalog div) using a dropdown menu item to call the same toggle function, and there is no problem. The toggle function is also used to display the menu, and to close it after drawing shade. If it would help to see what I've described, you may do so at TastefulTitles.com/NewIndex.html. To see how it's supposed to work, show the full catalog using the dropdown menu in the UL corner. (To hide the catalog, click anywhere outside it.) To see the problem, scroll down to the search field and enter "Mozart" or "Mahler", or another name you saw in the full catalog. If I eliminate the onchange(catFilter()) call, and replace it with onchange(toggle("shade")), the problem still exists. If I put an alert() after that, the alert gets shown before the div is drawn. After the alert is dismissed, the shade div is drawn, and then immediately erased as the screen redraws.

No, this generates no errors. It simply reloads (or at least redraws) the page on leaving the function. I'm not understanding your point about getComputedStyle(). It returns the value used in drawing the display, which is what is required. The toggle() function has worked perfectly since changing to getComputedStyle(). It is after leaving that function, with the divs properly drawn, that I'm getting the redraw.

The same is true in Chrome. I now see that the window is being redrawn (reloaded?), but I still have no idea why.

When user enters something in search field, my onChange function opens a screen-size window that blurs everything showing, and a div containing the response in the middle of the screen. When I run it in DreamWeaver CS5 on my MacBook, it works fine. When I run it in Safari, the new divs flash on the screen, then disappear. Running in the Safari debugger, I can step through the code that toggles the display of the new div, and it appears as it should. As soon as I step out of the toggle function, returning to the calling onChange command, it disappears without a trace. The relevant code is below. The function called by the entry field (function catFilter) ends with the call to function toggle(name), and everything seems fine through there. As I said, in DreamWeaver it doesn't disappear, making me think the problem may not be in my code. Can anyone suggest a method to find out why it disappears? #shade { text-align:center; width:100%; height:100%; position:fixed; z-index:60; <-- ensures shade div is above everything but menu --> top:0; left:0; background:rgba(200,200,200,.8); <-- light gray; 80% opaque --> display:none; <-- this is the default until a value is entered in the search field --> } <div id="shade" onClick="filterClick(event)" class="w3-container"> <div class="w3-content w3-card-4 w3-white" style="width:340px; margin:auto; margin-top:6vh" > <header class="w3-content tt-header"> <h5 id="catHead" >Browse our catalog </h5> </header> <div id="catalog" class="w3-content" style="max-height:60vh; padding-bottom:6px; overflow-Y:scroll"> <!-- CATALOG ENTRIES ARE ADDED HERE BY JAVASCRIPT--> </div> </div> </div> <form> <input class="w3-input" onChange="catFilter(this.value)" type="text" placeholder="Search: Composer & Title" style="width:320px; text-align:center; display:inline-block"> </form> function toggle(name) { var x = document.getElementById(name); var s = getComputedStyle(x); if(s.display=="block") {x.style.display = "none"} else {x.style.display="block"} }