AngularUI Datepicker Allows Typing Invalid Date - javascript

I am having a problem where in the AngularUI Bootstrap Datepicker I have a min date and a max date. It is working where if you open the popup, you can't click on the disabled dates. However you CAN type in a date outside of the range. I want it to bring it to the min date if the typed date is below and the max date if the typed date is later.
Here is the plunker: http://plnkr.co/edit/6U4YdTIyFXjOqRJm2qTq?p=preview
In the controller:
$scope.dateOptions = {
maxDate: $scope.maxDate,
minDate: $scope.minDate,
};
In the template: datepicker-options="dateOptions"
I don't seem to be the first to run into this issue, since there are defect reports, however they are reporting as "fixed" and yet this is still happening. I'd like to avoid using jQuery or a date library unless necessary, since this is the only field where I need this functionality.
https://github.com/angular-ui/bootstrap/pull/2901
https://github.com/angular-ui/bootstrap/pull/3020
The similar stackflow question
AngularUI datepicker allows typing value outside of range actually has a working plunker but it isn't angularui datepicker, and the accepted answer suggests a plug-in, which I want to avoid. I did try using ui-date="dateOptions" in my template the same as the plunker but nothing changed.

Related

MaterializeCSS input date displaying prior day

When I show an input field with datepicker passing in a value from my SQL data, MaterializeCSS is displaying the value as the day before. It works if I reformat the date using slashes instead of dashes, but that is a horrible long-term solution.
Here is the code:
<input type="text" class="datepicker" value="2022-03-15">
Which will show as March 14th in MaterializeCSS and if you save, it saves it as March 14th.
Here is the CodePen showing the incorrect behavior.
https://codepen.io/programminglabs/pen/ExQxNvx
There must be a setting in JS in MaterializeCSS but I cannot find it. I expect the issue is I need to add one microsecond. How can I do that globally in my MaterializeCSS environment?

Acrobat DC: Unformatted text field with date picker?

In short: I want to use Acrobat DC's built-in date picker on a text field without using Acrobat's Format option.
In full:
I'm trying to enable the date fields in my form to accept a large variety of date formats as input, including a date picker. I've written validation code to accomplish this, however Acrobat is rejecting inputs before the validation code triggers and rewrites the date into an acceptable format. This means that I have to set the field's format to "None" in order for my validation code to fire properly, losing the built-in date picker in the process. While this doesn't make the form not work, it hampers UX, which is something I've been working to strongly improve in this form.
To illustrate the issues:
Ideal/Goal:
Input "May 25, 2017" into Date Field
Validation code converts this to "2017 05 25"
Acrobat formatting applies (expects: "yyyy mm dd"), enabling the date picker
Acrobat Date Picker is available for more rapid input changes
Current Problem:
Input "May 25, 2017" into Date Field
Acrobat formatting applies (expects: "yyyy mm dd"), rejects inputs
Validation code has nothing to work with
Acrobat Date Picker is available for more rapid input changes
Current non-ideal solution:
Input "May 25, 2017" into Date Field
Validation code converts this to "2017 05 25"
Acrobat formatting disabled
No Acrobat Date Picker
I see three possible solutions, but don't know enough on how to (or if I can) achieve them.
Preempt Adobe's built in formatting script somehow. I've tried calling event.change and event.willCommit, but I clearly don't understand them enough to use them properly. Additionally, I thought script precedence was Keystroke > Validation > Format > Calculation, but it appears either I'm wrong or Adobe's built in formats are special.
Force enable the date picker somehow. I don't have high hopes for this. I don't get why Adobe didn't make the damn thing a check box option.
Set the Format option to a wildcard somehow. Like the last three, I don't know if this is possible, but this seems the most likely to work. Basically, let the format accept anything.
You'll need to use two fields. The first one is the main field and uses a custom format script to format your date, not one of the predefined ones. Right beside it is a field formatted for a date that's just wide enough to give you the picker, set it's text color to white so that none of the characters in the value actually show. Use the OnBlur action to update the first field when the user exits the second. If you put them right up against each other, to the end user, they'll appear to be the same field.
In addition to #joelgeraci 's answer, you might also consider a non-Adobe date picker (which requires the very newest versions of Acrobat/Reader anyways). There are a few out there, some better some a bit less…
Shameless plug: yours truly happens to have created the most elaborate and configurable date picker for PDF forms; for more information and quotes, feel free to contact me in private.

Angular JQuery timepicker

I am shifting from jQuery to Angular. In jQuery we used this http://timepicker.co/
as firefox does not allow HTML5 input time.
I was trying to find the same timepicker for angular (As some of our past data and styles were based on this time picker). But I could not find one.
I dont know how to convert that time picker into directive or some other sort like that.
We need to use the same timepicker. (because our manager) I have seen some other time pickers available in angular.
Can you help ?
try:
EasyTimepicker Directive
A timepicker directive that allows a user to select a time via a dropdown widget.
Click the buttons to increment/decrement hours & minutes or scroll with your mouse.
It's also smart enough to convert invalid input such as '1a' into '1:00 AM'
Built with the awesome AngularJS. Utilizes Bootstrap 3 styling.
Install
Usage
Configuration
The following options can be set either through data attributes on the time input or by overriding the EasyTimepickerConfig constant.
Demo
http://plnkr.co/edit/uA3Ide?p=preview

disable dates in datepicker with orchard

Using orchard 1.6. I've created a form which uses a content type which uses a field (date and time), which allows the user to use a date picker to select the day.
Trouble is the user can select any date. I would like the date to be set for today, and the other dates disabled. How is this possible? thank you for replies
If you wanna know the location of the DateTimeField then just go to following directory :
Orchard.Fields/Views/EditorTemplates/Fields/DateTime.Edit.cshtml
but making change to orchard fields is not a good practice , cause your case is very special.the recommended way to do this is to create your own EditorTemplate and integrate jquery-ui datepicker in your Template view.

option to change jquery ui datepicker to just a "yearpicker"

I'm checking datapicker documentation here trying to find a way to change it from a full display date picker to just something where I can pick a year only. But I can't find anything. I tried suggestions found here like this, but it still displays the full view.
.datepicker({changeDay:false, changeMonth:false, changeYear:true})
Can I somehow turn the datapicker to a year picker only?
For my company's website, we used jQuery UI slider instead since year is a single value. In our implementation, we also had to do a year range, a slider also accommodated for that.
http://jqueryui.com/demos/slider/#steps

Categories

Resources