We Keep Coding

Is it possible to limit max-date on keyup?

Summary: I have 5 text inputs, one of which is using the Date attribute. I'm adding validation to the inputs, and one feature I would like to add is to limit the max date. I know I can do this in HTML, however it looks like that only works for the calendar functionality. My thoughts are using keyup, so the user is unable to exceed the year 2050 (for example) within the input in real time.
Effort: I looked into the Max attribute in HTML for a while, but it looks like I will have to do this manually in either Js or jQuery. My immediate thought is to pull the value from the input, slice the last 4 integers, and then create text validation from that.
I would rather use a text input and create the entire validation myself, but I would like to keep the calendar functionality without using any external resources. I'm curious if there is a simpler or more efficient way of doing this?
<input type="date" class="search__input" id="adv-input-2" placeholder="MM / DD / YY" max="2050-12-31"></span>
I've also noticed that using keyup is actually not firing when I use it on a date input, until the entire date is inputted:
// sets limits for date input
$('#adv-input-2').keyup(function(e) {
let input = $(this);
});
For example, 10/DD/YYYY will result in value: "" until the entire field is completed.

If you want to do this manually then you can use change event instead of keyup like this way.
// sets limits for date input
$('#adv-input-2').change(function(e) {
let input = $(this);
console.log(input.val());
if(input.prop('max') < input.val()) {
input.val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="date" class="search__input" id="adv-input-2" placeholder="MM / DD / YY" max="2050-12-31"></span>

vuejs materializecss timepicker not get value

How can I get time value using materializecss Timepicker in Vuejs
Meterilize css Time Picker Jsfiddle LInk
It's give me value in jsfiddle but when I doing it my vuejs project it's not working..
Vue.js Code:
<v-text-field
name="start-time"
id="edit_start-time"
class="timepicker"
></v-text-field>
mounted() {
$('.timepicker').pickatime({
default: 'now', // Set default time: 'now', '1:30AM', '16:30'
fromnow: 0, // set default time to *
twelvehour: true, // Use AM/PM or 24-hour format
donetext: 'OK', // text for done-button
cleartext: 'Clear', // text for clear-button
canceltext: 'Cancel', // Text for cancel-button
autoclose: false, // automatic close timepicker
ampmclickable: true, // make AM PM clickable
aftershow: function() {} //Function for after opening timepicker
});
$('.timepicker').on('change', function() {
let receivedVal = $(this).val();
console.log(receivedVal);
});
},
NB: My fiddle works fine and if you check console it give me value but same code not work in Vue.js Project my Problem in Vuejs.. i want to get value like jsfiddle

Please use
v-model.lazy="deliverySchedule"
worked for me !!!

Jsfiddle Link With Solution own my problem
I got solution by use input
<input class="timepicker" v-model="deliverySchedule" >

I think you should not use jQuery for this.
Vue offers some nice bindings wich are working way better.
<v-time-picker v-model="myTimeValue"></v-time-picker>
In this code i bind myTimeValue (a local data variable) to the actual value of the timepicker. Now i can use it anywhere and vue deals with all updating stuff.

I think you should use ref
If you need directly access a child component in JavaScript you have to assign a reference ID to the child component using ref.
For more information take a look at Link.
How to use:
Your html should be similar to this:
<div class="input-field inline">
<label for="startDate" class="materialize-label">Start Date</label>
<input id="startDate" ref="startDate" type="date" size="12" class="startDate timepicker">
</div>
You also need to initialize it with jquery (the same way you have done it)
$('.timepicker').pickatime({
...
...
...
})
For example, when your user submits a form you just need to use: this.$refs.startDate.value
This will grab the value of the date.
If you want to bind changes from the user you can use v-model.
Otherwise, I think using v-model is unnecessary.
Vue Docs:
You can use the v-model directive to create two-way data bindings on
form input and textarea elements. It automatically picks the correct
way to update the element based on the input type
More information at: Link

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.

How to use HTML to validate a date range?

Alternatively, is it possible to validate against another field's value with HTML?
A common example would be selecting a date range where "from" date should be less than or equal to "to" date. The following would described the desired relationship between the values, if only you could use element references in syntax:
<input type="date" name="from" max="to"> //todo: populate with ~to.value
<input type="date" name="to" min="from"> //todo: populate with ~from.value

It's possible to utilize html5 validation mechanism with some javascript to dynamically update min/max attributes:
//in this case a single input restriction is sufficient to validate the form:
$('#from, #to').on('change', function(){
$('#to').attr('min', $('#from').val());
});
Fiddled. Both min and max could be applied to the respective fields for enhanced UX if browser implementation of a datepicker respects range limitations (by disabling dates outside of the desired range)

Here, Web Components are very useful, however they are not full supported in all browsers yet .
The idea is to create a simple html Element, with two children (from and to) as the following:
<div id="fromToDate">
<div></div>
<div></div>
</div>
then create a template, which defines how the date picker should look:
<template id="fromToDateTemplate">
<label for="fromDate">from</label>
<input type="date" class="fromDate" select=":first" required="" />
<label for="toDate">to</label>
<input type="date" class="toDate" select=":last" required="" />
</template>
the select parameter defines, where the value is taken from so the first input field takes the first div from the "#fromToDate".
Last we have to populate the "shadow root" and define the logic:
var shadow = document.querySelector('#fromToDate').webkitCreateShadowRoot(),
template = document.querySelector('#fromToDateTemplate');
shadow.appendChild(template.content);
shadow.querySelector(".fromDate").addEventListener("change", function (e) {
var to = this.value;
shadow.querySelector(".toDate").setAttribute("min", this.value);
});
template.remove();
In the end two input fields are renderd and when selecting a date in the first datepicker, the second datepicker can't pick any lower data.
Fiddler example: http://jsfiddle.net/cMS9A/
Advantages:
Build as widget
Easy to reause
won't break pages
can be styled independently
Disadvantages:
Not supported in all browsers yet
Future reading:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html

If you want to avoid issues with someone hacking / crashing yor site - validate input data with:
(optional) javascript before sending a form (protects against malforming data using javascript, inputting incorrect one, reduces traffic)
(mandatory) on server side (protects against more clever guys that might malform input data using fiddler for example)
This is the only (at least second point) approach that protects you and your site.

It's great to see things moving towards a pure HTML solution ... but why not take a look at using moment.js to fill in the gaps for the time being?
http://momentjs.com/
There are plenty of good examples there and a lot of useful utility methods.

I'm worry, that there's no chance how to validate a input value based on other input value. Only good old javascript.
But maybe you can use <input type="range" …> and set some minimal step (1 day / 1 hour / …). Then you can use min and max value by same-named attributes.

Multi Dates Picker Bug?

I've been trying to add a date picker to my site that allows users to pick multiple non-concurrent dates. Multidatespicker appears to do what I want but i've got to a point where I think I have discovered a bug, particularly with it's AltField, which is confirmed here. The bug seems to stop the altfield's values showing. If you visit the Multidatespicker demo and inspect the altfield you'll see that while it appears empty the values are showing in the code.
The issue this presents for me is that I can't edit previously selected dates when returning a record from my App/DB. When passing the value of altfield back to my Rails App for database storage I only receive the hidden values shown in the code.
If I can get the altfield to correctly show these values and allow me to edit them via the date selector, then I should be amend within my app's backend.
Note the suggested fix on the github link above does not solve this issue - it only enables rendering dates in 'dateVar' as being selected in the picker....it does nothing to show values in altField.
Has anyone used this and had the same problem and solved it?
Does anyone know how to fix it?
OR
Can anyone suggest a good alternative that will work nicely with a Rails 3 App using Twitter Bootstrap. It's very important that i'm able to select multiple non-concurrent dates. I've searched quite extensively but MultiDatesPicker seems to be one of the only options I can find.

The problem is that Multidatespicker is not listening #altField so we need to create our own listener to add/remove dates.
The idea is to add values to a hidden or readonly input and add/remove dates by an other. This prevent the customer to add dates in #altField and getting them overwritten by the plugin.
HTML
<input type="text" id="date">
<button type="button" id="addDate">Add dates</button>
<button type="button" id="removeDate">Remove dates</button>
<div class="ui-state-error" id="error"></div>
<br />
<input type="text" id="altField" readonly value="2013-08-30,2013-08-31">
JAVASCRIPT
And with javascript we simply add the date with a button (could be on keyup or anything your imagination can imagine :)
var dates = $('#altField').val().split(',');
$('#datepicker').multiDatesPicker({
dateFormat: "yy-mm-dd",
addDates: dates,
altField: '#altField'
});
$('#addDate, #removeDate').on('click', function() {
try {
var $date = $('#date');
var addOrRem = $(this).attr('id') === "addDate" ? 'addDates' : 'removeDates';
$('#datepicker').multiDatesPicker(addOrRem, $date.val());
$date.val('');
} catch (e) {
var $error = $('#error');
$error.html(e).slideDown();
setTimeout(function() {
$error.slideUp();
}, 2000);
}
});
jsFiddle

I have scanned the source of MultiDatesPicker. I don't find any method which set the date from the #altfield. So it is not a bug it is missing.
I also do not understand the difference between the preselected dates and the altfield.
I think you can do what you want with a combination of preselect and the altfield:
html
<div id="with-altField"></div>
<input type="text" id="altField" value="08/22/2013,08/21/2013">
</div>
javascript
//first read the values of the #altfield
var dates = $('#altField').val().split(',');
//second set your multiDatesPicker with the dates of step 1 and an altfield
$('#with-altField').multiDatesPicker({
dateFormat: "mm/dd/yy",
addDates: dates,
altField: '#altField'
});
nb load the javascript on document ready