We Keep Coding

Unable to make flatpickr field required in rails form

I have a form_for form. Some of my fields are for selecting dates, which I'm using flatpickr for. I'm having trouble making the field required using form validation on the client side.
I have the following basic flatpickr code in application.js:
flatpickr("[data-behavior='flatpickr']", {
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d"
});
In my view, I've tried making a field like this (with many variations):
<%= f.text_field :attribute_name,
{ label: "Description of attribute", data: { behavior: "flatpickr" }, required: true } %>
which produces this HTML:
<label class="required" for="model_name_attribute_name">Description of attribute</label>
<input data-behavior="flatpickr" required="required" class="form-control flatpickr-input" type="hidden" name="model_name[attribute_name]" id="model_name_attribute_name">
<input class="form-control form-control input" placeholder="" required="" tabindex="0" type="text" readonly="readonly">
Everything works, except I can't figure out how to make the field required. Flatpickr creates a hidden field that holds the actual date value selected in their javascript pop-up and then it displays it using whatever format you like in the visible field which is readonly because it's set by flatpickr. It seems like my attempts to make the field "required" have made the label have the "required" class and made the hidden field "required" while leaving my visible field with required='' which is not sufficient enough to halt submission when nothing has been selected and the field is empty. I have a server-side validation catching it but I want to find a way for the client-side validation to work also.

Apparently it's a known bug in flatpickr which has not been fixed yet, at least as of writing this, but it looks like it's been around several years. As a workaround, I ended up successfully solving this by adding allowInput: true in my flatpickr config like in the following example:
flatpickr("[data-behavior='flatpickr']", {
allowInput: true,
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d"
});
I then wanted to automatically select all the text in the field when the user focuses (through clicking or the tab button) on flatpickr fields and inspired by this, I settled on this solution using jQuery:
$("[data-behavior='flatpickr']").next().focus(function() {
$(this).on("click.a keyup.a", function(e){
$(this).off("click.a keyup.a").select();
});
});
The key difference from the original code that was necessary to get it working was the .next(). As I noted earlier, flatpickr creates a hidden field to store the date selected with the pop-up picker and technically it's that hidden field which has the id and the data-behavior attribute. So with next(), we are listening to the visible field, which is the next element.
Many alternative approaches are discussed on the flatpickr GitHub issue page for those wanting a different approach, depending on your needs.

Angular ui: bootstrap datepicket input validation

I'm using this datepicker. As of now, the user can write anything he likes in the input field which is not what I want.
My code:
session.js
session.getDateFormat = function() {
return 'yyyy-MM-dd';
};
session.formatDate = function(date) {
return $filter('date')(date, session.getDateFormat());
};
Controller.js
vm.dateFormat = session.getDateFormat();
function submit() {
date : session.formatDate(vm.data.date)
}
The code is much longer but that basically the part concerning the date. And HTML
<input type="text" class="form-control" uib-datepicker-popup="{{vm.dateFormat}}" placeholder="{{vm.dateFormat}}" ng-model="vm.data.date" is-open="vm.dateOpened" ng-required="true" ng-disabled="disabled" />
The admin can choose if he wants getDateFormat to accept yyyy-mm-dd or dd-mm-yyyy etc.
What I want:
To verify that the user has input the date is the right format, otherwise to clear the field automatically and display an error message along with the right date format as a hint to the user. All that must be done before pressing submit.
Not allowing the user to enter letters obviously
No hard coded html regex, I want something to check if the input is the same as getDateFormat, otherwise clear the field and display an error.
No Jquery, I don't use Jquery in the entire project.
If you have any other datepicker in mind that works with angular and bootstrap without using Jquery, let me know.

I had to update to angular-ui 1.3.3 and then I had to give the date input a name 'datepicker' and the form a name 'frm' and then
<div ng-if="!frm.datepicker.$error.required"">
<div class="datepicker-error" ng-if="frm.datepicker.$invalid">
some error message
</div></div>
I didn't clear the field since if the user didn't finish typing it's going to be invalid and hence might be cleared. If anyone has a better solution let me know.

Hold input=date value in HTML after submited button in table

I searched a lot but maybe because I am quite new here i couldn't fine a result that's works for my challenge.
Project view
What's is going on:
I have made page where users could click on a date-picker, after the user selected a date or a date range and they click on the submit button "Verzenden"the table that is positioned under the selection area shows all data from that specific date or date range that is available in the database.
In this table the user is able to adjust some data from a specific table row.
After clicking on the submit "Ok" button the changes the user made is pushed to the database.
Now my challenge:
After the user has changed some data from a row an they click on submit button "Ok" i want to achieve that the user is getting back to it's last date selection that he made before adjusting some data in a row table. What is the best way to handle this ?? I hope someone could help me, thanks already for participating and reading.

The term you're looking for is "pre-populating a form". You can pre-populate the form with PHP by generating HTML that has the value written directly in the HTML
<input type="text" value="<?php echo htmlspecialchars($someValue, UTF8, ENT_BOTH);?>">
Your homework probably wants you to save the input into the user's SESSION, and then check the SESSION every time you render the page. If a previous value is in the session, then pre-populate the form (i.e. render the HTML with the hard-coded values).

Try this:
<form autocomplete="on">...</form>
the "autocomplete" attribute allows you to save your selection that you've submit after reload the site.
If you don't want this feature take effect for some special tag,you should write your code like this:
<form autocomplete="on">
...
<input type="date" autocomplete="off" /> // this tag won't save the choice
</form>

check this fiddle : https://jsfiddle.net/9nfz311z/
html part:
<input type="date" name="test"/>
js part :
var dateInput = document.querySelector('input[name="test"]');
var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}
// on change save in localStorage the value
dateInput.addEventListener('change', function(e) {
localStorage.setItem(dateInput.name, dateInput.value);
});
// on dom ready if localStorage has date value apply it to the input
DOMReady(setDateValue);
function setDateValue() {
var date = localStorage.getItem(dateInput.name);
if (date) {
dateInput.value = date;
}
}

Input field disabled, but glyphicon is still clickable

I am writing a ReactJS application, and I want to disable the input on a date/time field, which includes the react-bootstrap-datetimepicker. Disabling the input field works fine, but the glyph used to bring up the datepicker, when clicked, is still active, and it allows the user to select a date, which is added to the input field. It just seems to prevent typing.
Does anyone know a way around this?
<DateTimeField
inputFormat='HH:mm'
data-hour-format="24"
mode='time'
name="formInputTime"
id={inputID}
defaultText={this._getICEField(i-1, "time")}
onChange={this._generateEventHandler(i-1, "time")}
inputProps={{disabled: readOnly}}
/>
In this image the input field is set as disabled, but the calendar still appears, and a date can be set:
Here is an example on jsfiddle.

Well, the control does not support this as of now (and maybe it shouldn't either), so you should not run the
$element.datetimepicker()
on those input fields, which are disabled. You can check the disabled state programmticaly like this:
var $startDate = $('#startDate');
if (!$startDate.prop('disabled')) {
$startDate.datetimepicker()
}

Try this one, I have just updated your code: JsFiddle.
Relevant code:
if($("input[name=startDate]").attr('disabled') != 'disabled') {
jQuery("#startDate").on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery('#startDate').datetimepicker();
}

How can i disable date picker icon

I have a field called AppDate and it should get disabled conditionally
the field is getting disabled but the date picker icon is not getting disable, hence though i disable AppDate Field users are able to change the date
<hx:inputHelperDatePicker firstDay="1" rendered="true" styleClass="inputText_DatePicker" disabled/>
<f:convertDateTime dateStyle="short" pattern="MM/dd/yyyy" />
<hx:inputHelperDatePicker firstDay="1" rendered="true" styleClass="inputText_DatePicker" disabled/>
<hx:inputHelperAssist errorClass="inputText_Error" promptCharacter="_" />
</h:inputText></td>

Assuming you are referring to JQuery's datepicker plug-in, you can disable/destr0y the datepicker:
//disable
$("yourdateinput").datepicker( 'disable' );
//destroy if you not going to need it anymore
$("yourdateinput").datepicker( 'destroy' );
http://docs.jquery.com/UI/Datepicker#methods

I have no idea which date picker you are using. So I'll speak generally, you should probably 'unbind' the click/mouse[up|down] event from the "icon" and rebind it back when you enable the input textbox