Develop Reference

Making a date mask react with javascript: If i press simultaneous numbers i lost the mask

I'm trying to make a mask react date dd/mm/yyyy to a custom date input.
If i press the keys slow, the mask is setted correct dd/mm/yyyy, but supposing i press the numbers rapid, my mask is breaking
This is my component:
<DateInput
name="date"
placeholder="Data"
value={this.props.data}
dateFormat="DD/MM/YYYY"
onChange={this.props.changeDataTarefa}
animation="none"
onKeyUp={() => this.props.changeDataTarefaMask(this.fixDatePattern(this.props.data))}/>
this is my functions:
fixDatePattern(currDate) {
var currentDate = currDate;
if (currentDate){
var currentLength = currentDate.length;
var lastNumberEntered = currentDate[currentLength - 1];
}
if (!this.isNumber(lastNumberEntered) && currentDate) {
return currentDate.substring(0, currentLength - 1);
}
if (currentLength > 10) {
return currentDate.substring(0, 10);
}
let dateCountTracker = 0
if (currentLength == 1 && currentDate > 1) {
var transformedDate = "0" + currentDate + '/';
dateCountTracker = 2;
currentLength = transformedDate.length;
return transformedDate;
} else if (currentLength == 4 && currentDate[3] > 3) {
let transformedDate = currentDate.substring(0, 3) + "0" + currentDate[3] + '/';
dateCountTracker = 5;
currentLength = transformedDate.length;
return transformedDate;
} else if (currentLength == 2 && (dateCountTracker != 2 && dateCountTracker != 3)) {
dateCountTracker = currentLength;
return currentDate + '/';
} else if (currentLength == 5 && (dateCountTracker != 5 && dateCountTracker != 6)) {
dateCountTracker = currentLength;
return currentDate + '/';
}
dateCountTracker = currentLength;
return currentDate;
}
isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}

Instead of using keyup, use keypress event on input. And you could also use react input mask plugin for same.
You can use below code for key press event and please check working stackblitz demo.
render() {
return (
<div>
<span>Date : </span>
<input type="text" maxLength="10" placeHolder="dd/mm/yyyy" onKeyPress={this.onKeyPress}/>
</div>
)
}
onKeyPress(e){
let input = e.target;
if(e.charCode < 47 || e.charCode > 57) {
e.preventDefault();
}
var len = input.value.length;
if(len !== 1 || len !== 3) {
if(e.charCode == 47) {
e.preventDefault();
}
}
if(len === 2) {
input.value += '/';
}
if(len === 5) {
input.value += '/';
}
}
You could use below react input mask plugins to achieve requirement.
imaskjs and react-input-mask

Angularjs tiny display bug with ng-if

I have a small bug with my display logic. User selects job length as step 1 then clicks on a cell to determine availability. Everything works but I need Selected to show up on the other cells. I think some sort of boolean I have to attach i'm not sure. Assume for now jobLength=3 (this comes anyway from the HTML5 custom slider not displayed below but is just above the table as Step 1).How do I get Selected to show up.
Here's the code.
<tbody>
<tr ng-repeat="hour in workhours" ng-init="selectedIndex=$index">
<td>{{hour}}:00 - {{hour+1}}:00</td>
<td class="hidden-xs" ng-class = "{ 'full' : !entry.HoursAvailable.includes(hour),
'selected' : renderGreen(selectedIndex, $index, jobLength)}"
ng-click = "checkSlotAvailability(hour, jobLength, entry, data)"
ng-repeat= "entry in data.calendar">
<!-- /* ============ -->
<!-- Display Logic -->
<!-- =============== -->
<span ng-if="entry.HoursAvailable.includes(hour)
&& !renderGreen(selectedIndex, $index, jobLength)
&& !(selectedIndex == selectedRow
&& $index == selectedColumn)">
Available
</span>
<span ng-if="entry.HoursAvailable.includes(hour)
&& renderGreen(selectedIndex, $index, jobLength)
&& $index == selectedColumn
&& selectedIndex == selectedRow
<!-- I added this check slot f(x) to render table dynamically when user adjusts job length -->
&& checkSlotAvailability(hour, jobLength, entry, data)">
Selected
</span>
<span ng-if="entry.HoursAvailable.includes(hour)
&& !renderGreen(selectedIndex, $index, jobLength)
&& selectedIndex == selectedRow
&& $index == selectedColumn">
Unavailable
</span>
<span ng-if="!entry.HoursAvailable.includes(hour)">
Full
</span>
</td>
</tr>
</tbody>
controller
(function() {
"use strict";
angular
.module("availability")
.controller("availabilityController", function($scope, $http){
$scope.data = {};
$scope.data.response = "Available";
$scope.workhours = Array.from({length:9}).map((_, i)=> i + 9); // creating all possible working hours in a day (9-17)
$http.get('../api/availability.json')
.then( function(response){
$scope.data.calendar = response.data;
});
function setBuffer(date){
var today = formatDateToString(new Date('2016-05-18T11:27:00'));
var bufferTime = 1;
if(date == today){
bufferTime = 2;
}
return bufferTime;
}
function formatDateToString(date){
var dd = (date.getDate() < 10 ? '0' : '') + date.getDate();
var MM = ((date.getMonth() + 1) < 10 ? '0' : '') + (date.getMonth() + 1);
var yyyy = date.getFullYear();
return (yyyy + "-" + MM + "-" + dd);
}
function getRowAndColumn(row, column){
$scope.selectedRow = row;
$scope.selectedColumn = column;
}
$scope.renderGreen = function(selectedIndex, $index, jobLength){
if( $index == $scope.selectedColumn
&& selectedIndex >= $scope.selectedRow
&& selectedIndex <= ($scope.selectedRow + jobLength - 1) && $scope.data.response == "Available")
return true;
else
return false;
}
/* ===========================
Check Availabiliy function
============================== */
$scope.checkSlotAvailability = function(time, jobLength, date, availability) {
var date = date.Date;
var calendar = availability.calendar;
var response = "";
var buffer = setBuffer(date);
var selectedIndex = time - 9;
if( jobLength < 1 || jobLength > 5 ){
alert("Please enter job length from 1 to 5");
response = "Available";
}else {
for( var i = 0; i < calendar.length; i++ ){
getRowAndColumn(selectedIndex, i);
if( date == calendar[i].Date ){
if( time < 9 || time > 17 ){ // Can't book before 9am or after 5pm. Code should never reach here.
response = "Unavailable";
break;
}else {
for( var j = 0; j < calendar[i].HoursAvailable.length; j++){
if( time == calendar[i].HoursAvailable[j]){
if( ( time == 9 || time == 17 ) && calendar[i].HoursAvailable[j]
|| time - buffer < 9
|| time == calendar[i].HoursAvailable[j]
&& time - buffer == calendar[i].HoursAvailable[j - buffer]
&& time + buffer == calendar[i].HoursAvailable[j + buffer] ){
for( var k = j; k < calendar[i].HoursAvailable.length; k++ ){
if( time >= 13 && time == calendar[i].HoursAvailable[k] && time + jobLength <= 18
&& time - buffer == calendar[i].HoursAvailable[k - buffer] //5pm
|| (time + jobLength + (buffer - 1)) == calendar[i].HoursAvailable[k + jobLength + (buffer - 1)]
&& time - buffer == calendar[i].HoursAvailable[k - buffer]
|| (time + jobLength + (buffer - 1)) == calendar[i].HoursAvailable[k + jobLength + (buffer - 1)] ){ //9am
response = "Available";
break;
}else if( k == calendar[i].HoursAvailable.length - 1 ){
response = "Unavailable";
}
}
break;
}else{
response = "Unavailable";
break;
}
}else if( j == calendar[i].HoursAvailable.length - 1 ){ //no available slot
response = "Full";
}
}
break;
}
}else if( i == calendar.length - 1 ){ //no available date
response = "Full";
break;
}
}
}
$scope.data.response = response;
return response;
};
});
})();

Change text depending on the time of day and on which button is clicked

I need to display different text 'set' depending on which button I click, and rotate messages in this 'set' depending on what time it is.
This is what I've got:
var date = new Date;
var hh = date.getHours();
var mm = date.getMinutes();
if (hh < 10) {hh = "0"+hh;}
if (mm < 10) {mm = "0"+mm;}
var t = hh+":"+mm;
var themessage;
function TimeF() {
if (check == "alt") {
if (t >= "08:00" && t <= "09:00"){
themessage = "A";
}
else if(t >= "09:05" && t <= "10:05"){
themessage = 2;
}
}
else if (check == "NoPack") {
if (t >= "08:00" && t <= "09:14"){
themessage = "NP";
}
else if(t >= "09:19" && t <= "10:33"){
themessage = 2;
}
}
else if (check == "pack") {
if (t >= "08:00" && t <= "09:14") {
themessage = "pack";
}
}
else if (n == 3) {
if (t >= "08:00" && t <= "09:14"){
themessage = "n=3";
}
else if(t >= "09:19" && t <= "10:33"){
themessage = 2;
}
}
else {
if (t >= "08:00" && t <= "09:19") {
themessage = "Else";
}
else if (t >= "09:21" && t<= "10:43"){
themessage =2;
}
}
$('.Test').append(themessage);
}
Also I have button code:
var reg = document.getElementById("Reg");
var pack = document.getElementById("Pack");
var nopack = document.getElementById("NoPack");
var alt = document.getElementById("Alt");
var sch = document.getElementById("Sch");
var check;
var update;
$(document).ready(function () {
$("#Pack").click(function () {
$("#Sch").html("pack");
check = "pack";
});
$("#Reg").click(function () {
$("#Sch").html("Reg");
check = "reg";
});
$("#NoPack").click(function () {
$("#Sch").html("NoPack");
check = "NoPack";
});
$("#Alt").click(function () {
$("#Sch").html("Alternate");
check = "alt";
});
})
The problem is - when I press any button, the code shows the text for 'esle', and not what I supposed to be assigned to that button.
P.S I have jquery refference and I am loading this function TimeF in body.
If you want, I could make a quick CodePen with this.
P.S.S n==3 in my code - is checking if it is Wednesday.

Javascript : Automatically get if else function

I want to get the number of days a person worked according to his in-time and out-time. And it should automatically calculate on day field when it's selected from the table row and it's not working with my js code
HTML
<fieldset> In-Time:
<input class="input" type="text" name="InTime" id="intime" value="" />
</fieldset>
<fieldset>Out-Time:
<input class="input" type="text" name="OutTime" id="outtime" value="" />
</fieldset>
<fieldset> Day:
<input class="input" type="text" id="day" name="Day" value="" />
</fieldset>
JQUERY
$(document).ready(function (){
$('#intime').on('input', function() {
if (intime == 08:00:00 && outtime >= 18:00:00) {
day == 1;
}else if (intime == 08:00:00 && outtime == 12:30:00) {
day == 0.5;
}else (intime == 12:30:00 && outtime >= 18:00:00) {
day == 0.5;
};
});
$('#outtime').on('input', function() {
if (intime == 08:00:00 && outtime >= 18:00:00) {
day == 1;
}else if (intime == 08:00:00 && outtime == 12:30:00) {
day == 0.5;
}else (intime == 12:30:00 && outtime >= 18:00:00) {
day == 0.5;
};
});
});

You can use moment.js to parse time.
$(function(){
$('#intime,#outtime').on('input', function() {
// declare variables
var intime = new moment($("#intime").val(), 'HH:mm:ss'); // get value of intime
var outtime= new moment($("#outtime").val(), 'HH:mm:ss');
var startTime = new moment("08:00:00", 'HH:mm:ss');
var halfDay = new moment("12:30:00", 'HH:mm:ss');
var wholeDay = new moment("18:00:00", 'HH:mm:ss');
var day = 0; // declare day as 0
if (moment(intime).hour() == 8 && moment(outtime).hour() >= 18) {
day = 1;
}
else if (moment(intime).hour() == 8 && (moment(outtime).hour() == 12 && moment(outtime).minute() == 30)) {
day = 0.5;
}
else if ((moment(intime).hour() == 12 && moment(intime).minute() == 30) && moment(outtime).hour() >= moment(wholeDay).hour()) {
day = 0.5;
}
$("#day").val(day);
/*console.log("imtime", moment(intime).hour());
console.log("intime", moment(intime).minute());
console.log("outtime",moment(outtime).hour());
console.log("outtime",moment(outtime).minute());
console.log("wholeDay", moment(wholeDay).hour());*/
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<fieldset> In-Time:
<input class="input" type="text" name="InTime" id="intime" value="" />
</fieldset>
<fieldset>Out-Time:
<input class="input" type="text" name="OutTime" id="outtime" value="" />
</fieldset>
<fieldset> Day:
<input class="input" type="text" id="day" name="Day" value="" />
</fieldset>

Write your script as below:-
$(document).ready(function (){
$('#intime,#outtime').on('input', function() {
// declare variables
var intime = $("#intime").val() || 0;; // get value of intime
var outtime= $("#outtime").val() || 0;; // get value of outtime
var day = 0; // declare day as 0
if (intime == 08:00:00 && outtime >= 18:00:00) {
day == 1;
}else if (intime == 08:00:00 && outtime == 12:30:00) {
day == 0.5;
}else (intime == 12:30:00 && outtime >= 18:00:00) {
day == 0.5;
};
});
});

Get the value of intime and outtime. and check the syntax errors in your code there are multiple.
<script>
$(document).ready(function (){
$('#intime').on('input', function() {
var intime = $("#intime").val();
var outtime= $("#outtime").val();
if (intime == '08:00:00' && outtime >= '18:00:00') {
day == 1;
}else if (intime == '08:00:00' && outtime == '12:30:00') {
day == 0.5;
}else if(intime == '12:30:00' && outtime >= '18:00:00') {
day == 0.5;
}
});
$(document).ready(function (){
$('#outtime').on('input', function() {
var intime = $("#intime").val();
var outtime= $("#outtime").val();
if (intime == '08:00:00' && outtime >= '18:00:00') {
day == 1;
}else if (intime == '08:00:00' && outtime == '12:30:00') {
day == 0.5;
}else if(intime == '12:30:00' && outtime >= '18:00:00') {
day == 0.5;
}
});
});
});
</script>

Issue with datepicker

I am using a sample program that contains three text fields, upon clicking on them it will displays a date picker and once you choose a date that date will be displayed in the filed. It is working fine for first field but next two fields are not working i.e, those are displaying the date picker but not setting the picked value to the filed. Here is my sample code.
<script language="javaScript" type="text/javascript" src="calendar.js"></script>
<link href="style/calendar.css" rel="stylesheet" type="text/css">
........
<table id="calenderTable">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center">
<select onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
this.selectedIndex, false));"
id="selectMonth">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
</td>
<td colspan="2" align="center">
<select onChange="showCalenderBody(createCalender(this.value,
document.getElementById('selectMonth').selectedIndex, false));"
id="selectYear">
</select>
</td>
<td align="center">
<a href="#" onClick="closeCalender();">
<font color="#003333" size="+1">X</font>
</a>
</td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr style="">
<td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td>
<td>Thu</td><td>Fri</td><td>Sat</td>
</tr>
</tbody>
<tbody id="calender"></tbody>
</table>
calender.js
// Array of max days in month in a year and in a leap year
monthMaxDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
hideSelectTags = [];
function getRealYear(dateObj)
{
return (dateObj.getYear() % 100) + (((dateObj.getYear() % 100) < 39) ? 2000 : 1900);
}
function getDaysPerMonth(month, year)
{
/*
Check for leap year. These are some conditions to check year is leap year or not...
1.Years evenly divisible by four are normally leap years, except for...
2.Years also evenly divisible by 100 are not leap years, except for...
3.Years also evenly divisible by 400 are leap years.
*/
if ((year % 4) == 0)
{
if ((year % 100) == 0 && (year % 400) != 0)
return monthMaxDays[month];
return monthMaxDaysLeap[month];
}
else
return monthMaxDays[month];
}
function createCalender(year, month, day)
{
// current Date
var curDate = new Date();
var curDay = curDate.getDate();
var curMonth = curDate.getMonth();
var curYear = getRealYear(curDate)
// if a date already exists, we calculate some values here
if (!year)
{
var year = curYear;
var month = curMonth;
}
var yearFound = 0;
for (var i=0; i<document.getElementById('selectYear').options.length; i++)
{
if (document.getElementById('selectYear').options[i].value == year)
{
document.getElementById('selectYear').selectedIndex = i;
yearFound = true;
break;
}
}
if (!yearFound)
{
document.getElementById('selectYear').selectedIndex = 0;
year = document.getElementById('selectYear').options[0].value;
}
document.getElementById('selectMonth').selectedIndex = month;
// first day of the month.
var fristDayOfMonthObj = new Date(year, month, 1);
var firstDayOfMonth = fristDayOfMonthObj.getDay();
continu = true;
firstRow = true;
var x = 0;
var d = 0;
var trs = []
var ti = 0;
while (d <= getDaysPerMonth(month, year))
{
if (firstRow)
{
trs[ti] = document.createElement("TR");
if (firstDayOfMonth > 0)
{
while (x < firstDayOfMonth)
{
trs[ti].appendChild(document.createElement("TD"));
x++;
}
}
firstRow = false;
var d = 1;
}
if (x % 7 == 0)
{
ti++;
trs[ti] = document.createElement("TR");
}
if (day && d == day)
{
var setID = 'calenderChoosenDay';
var styleClass = 'choosenDay';
var setTitle = 'this day is currently selected';
}
else if (d == curDay && month == curMonth && year == curYear)
{
var setID = 'calenderToDay';
var styleClass = 'toDay';
var setTitle = 'this day today';
}
else
{
var setID = false;
var styleClass = 'normalDay';
var setTitle = false;
}
var td = document.createElement("TD");
td.className = styleClass;
if (setID)
{
td.id = setID;
}
if (setTitle)
{
td.title = setTitle;
}
td.onmouseover = new Function('highLiteDay(this)');
td.onmouseout = new Function('deHighLiteDay(this)');
if (targetEl)
td.onclick = new Function('pickDate('+year+', '+month+', '+d+')');
else
td.style.cursor = 'default';
td.appendChild(document.createTextNode(d));
trs[ti].appendChild(td);
x++;
d++;
}
return trs;
}
function showCalender(elPos, tgtEl)
{
targetEl = false;
if (document.getElementById(tgtEl))
{
targetEl = document.getElementById(tgtEl);
}
else
{
if (document.forms[0].elements[tgtEl])
{
targetEl = document.forms[0].elements[tgtEl];
}
}
var calTable = document.getElementById('calenderTable');
var positions = [0,0];
var positions = getParentOffset(elPos, positions);
calTable.style.left = positions[0]+'px';
calTable.style.top = positions[1]+'px';
calTable.style.display='block';
var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$');
var m = matchDate.exec(targetEl.value);
if (m == null)
{
trs = createCalender(false, false, false);
showCalenderBody(trs);
}
else
{
if (m[1].substr(0, 1) == 0)
m[1] = m[1].substr(1, 1);
if (m[2].substr(0, 1) == 0)
m[2] = m[2].substr(1, 1);
m[2] = m[2] - 1;
trs = createCalender(m[3], m[2], m[1]);
showCalenderBody(trs);
}
hideSelect(document.body, 1);
}
function showCalenderBody(trs)
{
var calTBody = document.getElementById('calender');
while (calTBody.childNodes[0])
{
calTBody.removeChild(calTBody.childNodes[0]);
}
for (var i in trs)
{
calTBody.appendChild(trs[i]);
}
}
function setYears(sy, ey)
{
// current Date
var curDate = new Date();
var curYear = getRealYear(curDate);
if (sy)
startYear = curYear;
if (ey)
endYear = curYear;
document.getElementById('selectYear').options.length = 0;
var j = 0;
for (y=ey; y>=sy; y--)
{
document.getElementById('selectYear')[j++] = new Option(y, y);
}
}
function hideSelect(el, superTotal)
{
if (superTotal >= 100)
{
return;
}
var totalChilds = el.childNodes.length;
for (var c=0; c<totalChilds; c++)
{
var thisTag = el.childNodes[c];
if (thisTag.tagName == 'SELECT')
{
if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear')
{
var calenderEl = document.getElementById('calenderTable');
var positions = [0,0];
var positions = getParentOffset(thisTag, positions); // nieuw
var thisLeft = positions[0];
var thisRight = positions[0] + thisTag.offsetWidth;
var thisTop = positions[1];
var thisBottom = positions[1] + thisTag.offsetHeight;
var calLeft = calenderEl.offsetLeft;
var calRight = calenderEl.offsetLeft + calenderEl.offsetWidth;
var calTop = calenderEl.offsetTop;
var calBottom = calenderEl.offsetTop + calenderEl.offsetHeight;
if (
(
/* check if it overlaps horizontally */
(thisLeft >= calLeft && thisLeft <= calRight)
||
(thisRight <= calRight && thisRight >= calLeft)
||
(thisLeft <= calLeft && thisRight >= calRight)
)
&&
(
/* check if it overlaps vertically */
(thisTop >= calTop && thisTop <= calBottom)
||
(thisBottom <= calBottom && thisBottom >= calTop)
||
(thisTop <= calTop && thisBottom >= calBottom)
)
)
{
hideSelectTags[hideSelectTags.length] = thisTag;
thisTag.style.display = 'none';
}
}
}
else if(thisTag.childNodes.length > 0)
{
hideSelect(thisTag, (superTotal+1));
}
}
}
function closeCalender()
{
for (var i=0; i<hideSelectTags.length; i++)
{
hideSelectTags[i].style.display = 'block';
}
hideSelectTags.length = 0;
document.getElementById('calenderTable').style.display='none';
}
function highLiteDay(el)
{
el.className = 'hlDay';
}
function deHighLiteDay(el)
{
if (el.id == 'calenderToDay')
el.className = 'toDay';
else if (el.id == 'calenderChoosenDay')
el.className = 'choosenDay';
else
el.className = 'normalDay';
}
function pickDate(year, month, day)
{
month++;
day = day < 10 ? '0'+day : day;
month = month < 10 ? '0'+month : month;
if (!targetEl)
{
alert('target for date is not set yet');
}
else
{
targetEl.value= day+'-'+month+'-'+year;
closeCalender();
}
}
function getParentOffset(el, positions)
{
positions[0] += el.offsetLeft;
positions[1] += el.offsetTop;
if (el.offsetParent)
positions = getParentOffset(el.offsetParent, positions);
return positions;
}
What is the problem with my code or the picker??