I have a form with a TextField for entering a date. I have a DatePicker "set" on this field. However, it appears on top of the field. I do not want it to obscure the text field. How do I go about doing this?
Make sure that there's enough room below your input field for the whole date picker box to be rendered. By "room", I mean space in the enclosing window. The date picker tries to make sure that its display fits in the window, but it's pretty clumsy about it.
You might also want to look at the CSS for the date picker. In my opinion the default spacing for the calendar makes it ridiculously over-sized. You can tighten that up pretty easily; use Firebug to play around with it.
Related
Do you know an Angular datepicker which has input features like:
Keyboard navigation (e.g. keydown for previous day, keyup for next day) in the input field (so I don't mean in the datepicker popup)
Autocomplete, e.g. when you fill in 12/12 and tab away, it automatically fills in 12/12/2019
Keys for specific actions, e.g. T fills in today's date
Or a datepicker which can be easily customized to work like this?
I found that datepickers from libraries like Kendo and Syncfusion try to do too much and are therefore difficult to customize to our needs. They focus on the datepicker popup, while the input field is hard to work with without mouse.
(the old ASP.NET Peterblum components had all this user-friendly functionality which does not seem to be available in modern frameworks, see: http://peterblum.com/DES/DateAndTime.aspx#DateTextBox).
You can find some date-pickers written in angular here, https://angularscript.com/?s=datetime+picker+. Most of these are customizable as your needs. Thanks
This is for an application using AngularJS (if it matters).
I'm looking for a way to add some sort of a "template" to a HTML input field, much like a placeholder. See, I have this date-field, in which the user can type the date, or he can use a datepicker to select the date.
I currently have an HTML input field with a placeholder: "dd/MM/yyyy", which shows the format in which the date should be entered. now what I would like is a kind of placeholder that stays while the user types - and possibly even limits the users options (for instance: only numbers are allowed, nothing else is possible).
Ideally, the placeholder should stay while the user types so he can see what the format is while he is typing. The user should (if possible) also be restricted from typing any not allowed characters.
Does anyone know of any already-existing solutions to this use case? I've been searching for a while now but don't seem to be using the right words ...
Addition: I know I still have to check the user's input server side. I'm not relying on JS for the validation of the date.
You can look at this: http://forza.ndevrstudios.com/#/form-masks
It's done with latest angular-ui (http://angular-ui.github.io/ui-utils/) and something like this in your input field:
ui-mask="99/99/9999" model-view-value="true"
i would like to display some information about the datepicker when input field is clicked.
something similar to this
i want to show information about the datepicker where "from" and "to" fields in this image are placed.
i guess the logic applied here is that when clicking the input, it shows a div, inside which is their calendar. but i dont have good grasp of javascript to understand the code. can i get some code examples how this was done with some explanations.
my requirements of datepicker was met from:
http://www.benknowscode.com/2012/11/selecting-ranges-jquery-ui-datepicker.html
thanks in advance.
I have a lot on my site text boxes whose content is a date
So I will not have to check correctness did it read-only
Until now next to each text box was two buttons, one to add date opened popup calendar, second to delete the date (values not required)
Now I wanted to go to ajax calendarextender that the buttons were just ugly
My problem is that this control is not have delete button, and I do want to allow the user to deleted but not cancel the properties read-only to text box And I do not want to leave the ugly button.
My question:
If calendarextender ajax or something similar with a delete button from the popup
Alternatively if you have the option text box with a delete button inside( as text boxes IE10)
With the help of css and java-script you can easily do it.
Here is an example How do I put a clear button inside my HTML text input box like the iPhone does?
Instead of all that work to make it read-only and avoid validation, why not combine a FilteredTextBoxExtender with the CalendarExtender. Use the filter to block all non-numeric characters. I still think it's better to do the validation. It's as simple as DateTime.TryParse(), or you could do it client-side with the built-in FieldValidators.
I have been using the dynArch calendar for some time now. Can't say I've explored all the alternatives but I can recommend this one. Its pretty flexible.
I have run into a problem today that selecting a date was suddenly not updating the text control.
Ultimately, the problem seems to be that when the linked text box is blank, the calendar does not update the linked text box on selecting a date. Further testing reveals that any non-date causes the unwanted behavior.
I have verified that this behavior has been lurking in my production code, so its something I need to address.
I have started walking through the js library to see if i can track it down, but thought I would reach out to the collective as well.
Any help or pointers would be appreciated.
Thanks
In my particular case, the reason I was not seeing the popup was becuase the target text box had an invalid date in it.
I did not research if i could make it pop up a calendar w/ today in it.