MaterializeCSS input date displaying prior day - javascript

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?

Related

How to make datetime-local input with disabled specified dates

I'm creating website with form that user can choose date for doctor's appointment and some of dates should be disabled (fo example doctor has another appoitment). Dates will be in database with datetime-local format and i want to select them and disable.
I found only min and max attribute but i can't multiple it, step attribute is not resolving my problem.
I can select these dates but i need to remove them from calendar or make them unchoosable.
Disabling specific dates while using the simple <input type='date' /> is not possible. You would either need to check the date against a list of dates after it is selected, or use a datepicker library.

adding week numbers to Dojo calendar

Dojo offers two kinds of widgets to display a datepicker with a textbox. There is the Calendar widget: https://dojotoolkit.org/reference-guide/1.10/dojox/widget/Calendar.html
and there is a DateTextBox https://dojotoolkit.org/reference-guide/1.10/dijit/form/DateTextBox.html#dijit-form-datetextbox
I would like to show the ISO week number in this dialog. The ideal situation is a column on the left of the datepicker indicating the week number for that row. Is it possible to extend these widgets like that?
Some examples http://jsfiddle.net/pMD3S/9/ show the current date in the footer of the datepicker. Maybe the format of this can be changed? I haven't found the property for it in the documentation.
<body class="claro">
<input
id="dateBox"
data-dojo-type="dijit.form.DateTextBox"
/>
</body>
I'm open for suggestions on this. The (easy) option to show the week number in the date format in the actual textbox is not an option. I need to help users making the selection, not verifying if their choice was correct.

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.

AngularUI Datepicker Allows Typing Invalid Date

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.

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