β«π½ππππ β«
KPCKevin Powell - Community
β’Created by rctneil on 11/8/2024 in #front-end
JS Date Picker in <dialog>
Flatpickr has a appendTo option to set the parent element of the calendar dropdown. Instead of the body, try appending it to the dialog itself:
flatpickr(".your-input", {
appendTo: document.querySelector("dialog"),
// other options
});
This should help keep it inside the dialog if you specify the <dialog> element directly.
OR (TRY THIS)
Custom CSS with position: relative; on <dialog>:
For any picker, you could add position: relative; to the <dialog> itself, giving it a new context, and setting the date pickerβs container position as absolute.
7 replies
KPCKevin Powell - Community
β’Created by rctneil on 11/8/2024 in #front-end
JS Date Picker in <dialog>
The issue with Flatpickr, AirPicker, and similar components is that they often append their calendar dropdown to the document body, which ignores the <dialog>'s top layer positioning, causing them to display outside of it.
7 replies
KPCKevin Powell - Community
β’Created by cat on 2/14/2024 in #front-end
javascript functions
Yeah... something like this
26 replies
KPCKevin Powell - Community
β’Created by cat on 2/14/2024 in #front-end
javascript functions
When you declare a variable with the same name both globally and inside a function, you're essentially declaring two separate variables that happen to have the same name. The variable inside the function is scoped to that function and is separate from the global variable. So, if you assign a different value to "xyz" inside the function, it will only affect the local variable within that function and not the global one. They are distinct variables with their own values.
26 replies
KPCKevin Powell - Community
β’Created by cat on 2/14/2024 in #front-end
javascript functions
You're declaring a completely different variable.
26 replies