We Keep Coding

disable button while retrieving data from local storage and updating the date input

I am trying to implement a function that checks if the date and time I choose have already been chosen before, if so, it gives an error, if not it lets me carry on with adding the ticket. The current function does save options to local storage, however it looks like it doesn't retrieve them for me and allows me to choose the same date twice.
var count = 0;
function store() {
let clickCounter = localStorage.getItem("clickCount");
if (!clickCounter) {
localStorage.setItem("clickCount", 0);
clickCounter = "0";
}
clickCounter = parseInt(clickCounter);
document.getElementById('inc').value = ++count;
if (clickCounter == 100) {
console.log("Limit reached");
return;
} else {
localStorage.setItem("clickCount", clickCounter + 1);
}
console.log("Saving");
var e = document.getElementById("time");
var time = e.options[e.selectedIndex].text;
var date = document.querySelector("input").value;
localStorage.setItem(JSON.stringify(time), date);
console.log(localStorage);
if (!localStorage.getItem("history")) {
localStorage.setItem("history", "[]");
}
const history = JSON.parse(localStorage.getItem("history"));
history.push({ [JSON.stringify(time)]: date });
localStorage.setItem("history", JSON.stringify(history));
console.log(localStorage.getItem("history"));
}
function myDate(date) {
var today = new Date();
var newDate = new Date(date);
var nextWeek = new Date();
var pastWeek = new Date();
nextWeek.setDate(nextWeek.getDate() + 7);
pastWeek.setDate(pastWeek.getDate() - 7);
const dateInput = document.getElementById('date');
if (newDate < pastWeek || newDate > nextWeek) {
document.getElementById("time").disabled = true;
console.log("error")
return;
} else {
document.getElementById("time").disabled = false;
}
}

How to create dynamic array for each object datetimepicker

Plugin: eonasdan/Bootstrap 3 Datepicker
Explaination:
I want to write an application that user can select 5 different hours for each day. so i created an array and add each day (without duplicate), for example user select 31/12/2017 and 30/12/2017 , now i want to give they this ability to select only 5 different hour for each day that selected.
Tried Code:
var limit = 5;
var i = 0;
var dateArray = new Object();
$('#ss').click(function() {
if ($('#datetimepicker1 input').val().length > 0) {
var date = $('#datetimepicker1 input').val();
var getDate = date.split(' ');
var unqdate = getDate[0];
var unqtime = getDate[1];
if ($.inArray(unqdate, dateArray) == -1) {
dateArray[unqdate] = unqtime
}
}
console.log(dateArray);
});
JSFiddle
(For testing, select a date, then click on save button, then check console)
Goal:
var dateArray = {
"31-12-2017": [{
"time": "14:00"
}, {
"time": "17:15"
}],
"30-12-2017": [{
"time": "13:00"
}, {
"time": "12:15"
}]
}
Problem:
I couldn't figured out how can i add another time to each day. it's my first time i work with array and object like this.
I want to prevent duplicate entry and only five different hour per day.
Somehow I'm in learning.

There is some problem with your JS Code:
var limit = 5;
var i = 0;
var dateArray = new Object();
$('#ss').click(function() {
if ($('#datetimepicker1 input').val().length > 0) {
var date = $('#datetimepicker1 input').val();
var getDate = date.split(' ');
var unqdate = getDate[0];
var unqtime = getDate[1];
if ($.inArray(unqdate, dateArray) == -1) {
if(dateArray[unqdate] && dateArray[unqdate].length < limit) {
if(!dateArray[unqdate].find((ele) =>ele.time === unqtime)){
dateArray[unqdate].push({"time": unqtime})
}
} else {
dateArray[unqdate] = [{"time": unqtime}]
}
}
}
console.log(dateArray);
});
Note included logic for time split. You can use split by : and take the first 2 element of array.

I have created JSON response for your requirement.
Result :: JSON.stringify(parentObject)
Code is as below.
$(document).ready(function() {
$('#datetimepicker1').datetimepicker({
stepping: 30,
sideBySide: true,
showTodayButton: true,
format: 'DD-MM-YYYY HH:mm:ss',
});
// my code
var limit = 5;
var i = 0;
var parentObject = new Object();
var parentArray = [];
var dateAndTimeObject;
function isDateSelectedExists(date) {
for (var i = 0; i < parentArray.length; i++) {
var obj = parentArray[i];
if (obj["date"] === date) {
return i;
}
}
return -1;
}
$('#ss').click(function() {
if ($('#datetimepicker1 input').val().length > 0) {
var date = $('#datetimepicker1 input').val();
var getDate = date.split(' ');
var unqdate = getDate[0];
var unqtime = getDate[1];
var tempIndex = isDateSelectedExists(unqdate);
console.log("tempIndex :: " + tempIndex);
if (tempIndex == -1) {
console.log("date doesn't exists");
dateAndTimeObject = new Object();
dateAndTimeObject["date"] = unqdate;
var timeArray = [];
timeArray.push(unqtime);
dateAndTimeObject["time"] = timeArray;
parentArray.push(dateAndTimeObject);
parentObject["res"] = parentArray;
} else {
console.log("date exists");
dateAndTimeObject = parentArray[tempIndex];
var timeArray = dateAndTimeObject["time"];
if(timeArray.length<5) timeArray.push(unqtime);
dateAndTimeObject["time"] = timeArray;
}
console.log("final res :: " + JSON.stringify(parentObject));
}
});});

comparing dates with javascript asp.net mvc

i'm beginnig with javascript and my case seems really complicated for me !
i'm trying to compare today's date to "DateFinReele" date
my "DateFinReele" date hs to be smaller than today's date
i have another control on the "DateDebut" , "DateFinPrevue" and "DateFinReele"
the "DateFinPrevue" and "DateFinReele" have to be smaller than the "DateDebut"
when i remove my function checkDateInpuWithTodays() the other control works very well but when i add it nothing is working (even the other control !!!)
script >
$(document).ready(function() {
function DateDebutChange() {
var DateDebutDate = DateDebut.value(),
DateFinPrevueDate = DateFinPrevue.value(),
DateFinReeleDate = DateFinReele.value();
if (DateDebutDate) {
DateDebutDate = new Date(DateDebutDate);
DateDebutDate.setDate(DateDebutDate.getDate());
DateFinPrevue.min(DateDebutDate);
DateFinReele.min(DateDebutDate);
} else if (DateFinPrevueDate) {
DateDebut.max(new Date(DateFinPrevueDate)); <
} else if (DateFinReeleDate) {
DateDebut.max(new Date(DateFinReeleDate));
} else {
DateFinPrevueDate = new Date();
DateFinReeleDate = new Date();
DateDebut.max(DateFinPrevueDate);
DateFinPrevue.min(DateFinPrevueDate);
}
}
function DateFinReeleChange() {
var DateFinReeleDate = DateFinReele.value(),
DateDebutDate = DateDebut.value(),
DateFinPrevueDate = DateFinPrevue.value();
if (DateFinReeleDate) {
DateFinReeleDate = new Date(DateFinReeleDate),
DateFinPrevueDate = DateFinPrevue.value(),
DateDebutDate = DateDebut.value();
} else if (DateDebutDate) {
DateFinPrevue.min(new Date(DateDebutDate)),
DateFinReele.min(new Date(DateDebutDate));
} else {
DateFinPrevueDate = new Date();
DateDebut.max(DateFinPrevueDate)
DateDebut.max(DateFinReeleDate)
DateFinPrevue.min(DateFinPrevueDate);
DateFinReele.min(DateFinReeleDate)
}
}
function DateFinPrevueChange() {
var DateFinPrevueDate = DateFinPrevue.value(),
DateDebutDate = DateDebut.value();
if (DateFinPrevueDate) {
DateFinPrevueDate = new Date(DateFinPrevueDate);
DateFinPrevueDate.setDate(DateFinPrevueDate.getDate());
DateDebut.max(DateFinPrevueDate);
} else if (DateDebutDate) {
DateFinPrevue.min(new Date(DateDebutDate));
} else {
DateFinPrevueDate = new Date();
DateDebut.max(DateFinPrevueDate)
DateFinPrevue.min(DateFinPrevueDate);
}
}
function checkDateInpuWithTodays() {
var x = new Date();
var DateFinReeleDate = DateFinReele.value();
if (DateFinReeleDate.value > x.valueOf()) {
alert("La date de fin du projet doit être inférieure à celle d'aujourd'hui !")
DateFinReele.value = null;
DateFinReele.ready;
}
}
var DateDebut = $("#DateDebut").kendoDatePicker({
change: DateDebutChange
}).data("kendoDatePicker");
var DateFinPrevue = $("#DateFinPrevue").kendoDatePicker({
change: DateFinPrevueChange
}).data("kendoDatePicker");
var DateFinReele = $("#DateFinReele").kendoDatePicker({
change: DateFinReeleChange
}).data("kendoDatePicker");
DateDebut.max(DateFinPrevue.value());
DateFinPrevue.min(DateDebut.value());
DateFinReele.min(DateDebut.value());
var DateFinReele = $("DateFinReele").kendoDatePicker({
change: checkDateInpuWithTodays
}).data("kendoDatePicker");
DateFinReele.max(new Date().valueOf());
}); < /script>
can anybody help me

You can actually compare JavaScript dates very easily just using normal operators.
Each Date object is really just a representation of the number of milliseconds since Jan 1, 1970. You can see a Date's time value using the getTime method.
var april212016 = new Date('2016-04-21');
console.log(april212016.getTime()); // 1461196800000
var wayWayBack = new Date('1970-01-01');
console.log(wayWayBack.getTime()); // 0
As such, when comparing dates, behind the scenes it just compares those numbers:
var d1 = new Date('2016-03-01');
var d2 = new Date('2016-01-01');
console.log(d1 > d2); // true
console.log(d2 < d1); // true
console.log(d1 == d2); // false

okeyyy ! thanks everyone for your help and your time !
i finally solved the problem with kendo validator
i just changed this code
var DateFinReele = $("#DateFinReele").kendoDatePicker({
change: DateFinReeleChange,
max: new Date()
}).data("kendoDatePicker");

how to test if a value is greater than another value in an array. javascript

i'm trying to do a function in javascript inorder to catch a file that have the last date. My problème is how to compare the date value that is found in an array. I have tried the code below
//indentifiant[0] is an id that i caught in the file name
//all_response is the content of the file
var timeSusDat = stats.mtime + all_response;
if (filesPerUser[identifiant[0]]) {
filesPerUser[identifiant[0]].push(timeSusDat);
} else {
var testtab = [timeSusDat];
filesPerUser[identifiant[0]] = testtab;
};
function onlyLastDate(table) {
for (var d in table) {
id = table[d];
for (var db in table[d]) {
data = table[d][db];
date = data.split('/');
var testDate = new Date(date[0]).getTime();
console.log(testDate);
}
}
}

function rangeDate(testDate){
var dateStart = new Date($('#dateStart').val()).getTime();
var dateEnd = new Date($('#dateEnd').val()).getTime();
if (dateStart <= testDate && testDate <= dateEnd) {
date = true;
return date;
}else{
date = false;
return date;
}
}

how to autoselect current date in calendar control?

how to autoselect current date in javascript?.
I am using Calendar .js for displaying calendar,but dont know how to autoselect current date.Please guide me
Edit:
Calender.js
var oldLink = null;
// code to change the active stylesheet
function setActiveStyleSheet(link, title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
if (oldLink) oldLink.style.fontWeight = 'normal';
oldLink = link;
link.style.fontWeight = 'bold';
return false;
}
// This function gets called when the end-user clicks on some date.
function selected(cal, date) {
cal.sel.value = date;
cal.sel.focus();
// just update the date in the input field.
// if ((cal.sel.id).substr(0,3) == "row" || cal.sel.id == "row3")
cal.callCloseHandler();
}
function closeHandler(cal) {
cal.hide(); // hide the calendar
}
function showCalendar(id, format) {
var el = document.getElementById(id);
if (calendar != null) {
// we already have some calendar created
calendar.hide();
// so we hide it first.
} else {
// first-time call, create the calendar.
var cal = new Calendar(false, null, selected, closeHandler);
// uncomment the following line to hide the week numbers
// cal.weekNumbers = false;
calendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
}
calendar.setDateFormat(format); // set the specified date format
calendar.parseDate(el.value); // try to parse the text in field
calendar.sel = el; // inform it what input field we use
calendar.showAtElement(el); // show the calendar below it
return false;
}
var MINUTE = 60 * 1000;
var HOUR = 60 * MINUTE;
var DAY = 24 * HOUR;
var WEEK = 7 * DAY;
function isDisabled(date) {
var today = new Date();
return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
}
function flatSelected(cal, date) {
var el = document.getElementById("preview");
el.innerHTML = date;
}
function showFlatCalendar() {
var parent = document.getElementById("display");
// construct a calendar giving only the "selected" handler.
var cal = new Calendar(false, null, flatSelected);
// hide week numbers
cal.weekNumbers = false;
// We want some dates to be disabled; see function isDisabled above
cal.setDisabledHandler(isDisabled);
cal.setDateFormat("DD, M d");
cal.create(parent);
cal.show();
}
function compareDate(date1, date2)
{
var strErrMsg = "";
tokens = date1.split("-");
dd = tokens[0];
mm = tokens[1];
mm=mm-1;
yyyy = tokens[2];
dt1 = new Date(yyyy,mm,dd);
tokens1 = date2.split("-");
dd = tokens1[0];
mm = tokens1[1];
mm=mm-1;
yyyy = tokens1[2];
dt2 = new Date(yyyy,mm,dd);
if(dt1.valueOf() <= dt2.valueOf())
alert(dt1);
alert(dt2);
var difInDays = (parseInt) ((dt2.getTime() - dt1.getTime())/(1000*60*60*24));
alert(difInDays);
if(dt1.valueOf() <= dt2.valueOf())
{
return strErrMsg;
}
else
{
strErrMsg = "Cannot be Greater than ";
return strErrMsg;
}
return strErrMsg;
}
function nextDateAfterThreeDays(date1)
{
tokens = date1.split("-");
dd = tokens[0];
mm = parseInt(tokens[1]-1);
yyyy = tokens[2];
dt1 = new Date(yyyy,mm,dd);
var time=dt1.getTime();
time=time;
dt1.setTime(time);
var newDD = dt1.getDate()+3;
var newMM = dt1.getMonth()+1;
var newYY = dt1.getFullYear();
if(newDD<10)
newDD="0"+newDD;
if(newMM<10)
newMM="0"+newMM;
date1=newDD+"-"+newMM+"-"+dt1.getFullYear();
return date1;
}
function compareBackDate(date1, date2)
{
var strErrMsg = "";
tokens = date1.split("-");
dd = tokens[0];
mm = parseInt(tokens[1])-1;
yyyy = tokens[2];
dt1 = new Date(yyyy,mm,dd);
tokens = date2.split("-");
dd = tokens[0];
mm = parseInt(tokens[1])-1;
yyyy = tokens[2];
dt2 = new Date(yyyy,mm,dd);
var difInDays = (parseInt) ((dt1.getTime() - dt2.getTime())/(1000*60*60*24));
alert(""+difInDays);
if(difInDays > 15 )
{
strErrMsg = " Should not be earlier six month than ";
}
return strErrMsg;
}
function convertDate(date1)
{
var tokens1;
var ddd;
var mmm="";
var mmm1;
var yyyyy;
var strErrMsg="";
tokens1 = date1.split("-");
ddd = tokens1[0];
mmm = tokens1[1];
yyyyy = tokens1[2];
if(mmm=="Jan")
{
mmm1=01;
}
if(mmm=="Feb")
{
mmm1=02;
}
if(mmm=="Mar")
{
mmm1=03;
}
if(mmm=="Apr")
{
mmm1=04;
}
if(mmm=="May")
{
mmm1=05;
}
if(mmm=="Jun")
{
mmm1=06;
}
if(mmm=="Jul")
{
mmm1=07;
}
if(mmm=="Aug")
{
mmm1=08;
}
if(mmm=="Sep")
{
mmm1=09;
}
if(mmm=="Oct")
{
mmm1=10;
}
if(mmm=="Nov")
{
mmm1=11;
}
if(mmm=="Dec")
{
mmm1=12;
}
strErrMsg=ddd+"-"+mmm1+"-"+yyyyy;
return strErrMsg;
}
function isComboSelected(objComboName)
{
var strErrMsg = "";
var objForm = document.getElementsByTagName("form")[0];
var objCombo = document.getElementsByName(objComboName)[0];
if(objCombo.options[0].selected == true)
{
strErrMsg = "Please Select Value.";
return strErrMsg;
}
return strErrMsg;
}
Edit2:
My code
<script type="text/javascript">
function submitFun()
{
var frm=document.forms[0];
var fromDate=frm.lsReqRecDate.value;
//var toDate=frm.toDate.value;
var date1=convertDate(fromDate);
//var date2=convertDate(toDate);
var mm;var dd;var yyyy;
var mm1;var dd1;var yyyy1;
var d1=date1;
var txtAppFrmDate=date1;
if(d1.indexOf("-")!=-1)
{
dd=d1.substring(0,d1.indexOf("-"));
mm=d1.substring(d1.indexOf("-")+1,d1.lastIndexOf("-"));
yyyy=d1.substring(d1.lastIndexOf("-")+1,d1.length);
}
start_Date=new Date(yyyy,mm-1,dd);
var fDate = txtAppFrmDate.split("-");
// var tDate = txtAppToDate.split("-");
var one_day=1000*60*60*24;
var fdt = new Date((fDate[2]),(fDate[1]-1),(fDate[0]));
frm.submit();
}
</script>
<html:form action="/exceptionNBReport.do" styleId="frmDatewise">
<TABLE class="ReportFilter">
<THEAD>
<TR>
<TD colspan="2">NB Report Search</TD>
</TR>
</THEAD>
</TABLE>
<br><br>
<TABLE class="ReportFilter">
<TR>
<TD class="lbl" align="left">Last requirement received date</TD>
<TD>
<html:text property="lsReqRecDate" style="width:170;" readonly="readonly"/>
<input type="reset" value="..." onclick="return showCalendar('lsReqRecDate','dd-MM-y');" name="reset"/>
</TD>
</TR>
<TR>
<TD colspan="2" align="center">
<html:button property="search" value="Submit" onclick="submitFun()"/>
</TD>
</TR>
</TABLE>
</html:form>

It would appear from the source code of Calendar that you need to pass the desired date into the Calendar() constructor as the second argument to the constructor. See lines 16 and 588 for details.