I created a validation to check if a person is less than 18 years of age. If the person is less than 18 years of age a dialog box opens. I'm using JQuery UI dialog-box to do this, but the dialog-box looks messed up (see picture). I don't know what i'm doing wrong here. How do i make the dialog box display correctly?
function myFunction() {
today = new Date();
todayYear = today.getFullYear();
todayMonth = today.getMonth();
todayDay = today.getDay();
var x = document.getElementById("DOB").value;
birthDate = new Date(x);
birthYear = birthDate.getFullYear();
birthMonth = birthDate.getMonth();
birthDay = birthDate.getDay();
age = todayYear - birthYear;
if (todayMonth < birthMonth - 1 ){
age--;
}
if (age < 18){
$( function() {
$('<div></div>').dialog({
modal: true,
title: "Age Check?",
open: function () {
var markup = 'Applicant is not 18 years old. Do you wish to continue?';
$(this).html(markup);
},
buttons: {
'Confirm': function() {
$(this).dialog('close');
},
'Change': function() {
$('#DOB').val('');
$(this).dialog('close');
}
}
});
} );
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input name="DOB" onchange="myFunction()" type="date" class="form-control" id="DOB" required style=Width:60%; position:relative; placeholder="MM/DD/YYYY">
jquery-ui.css is missing
function myFunction() {
today = new Date();
todayYear = today.getFullYear();
todayMonth = today.getMonth();
todayDay = today.getDay();
var x = document.getElementById("DOB").value;
birthDate = new Date(x);
birthYear = birthDate.getFullYear();
birthMonth = birthDate.getMonth();
birthDay = birthDate.getDay();
age = todayYear - birthYear;
if (todayMonth < birthMonth - 1 ){
age--;
}
if (age < 18){
$( function() {
$('<div></div>').dialog({
modal: true,
title: "Age Check?",
open: function () {
var markup = 'Applicant is not 18 years old. Do you wish to continue?';
$(this).html(markup);
},
buttons: {
'Confirm': function() {
$(this).dialog('close');
},
'Change': function() {
$('#DOB').val('');
$(this).dialog('close');
}
}
});
} );
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<input name="DOB" onchange="javascript:myFunction()" type="date" class="form-control" id="DOB" required style=Width:60%; position:relative; placeholder="MM/DD/YYYY">
Related
I want to set up a calendar in such a way that it would show the years, months and dates in an array. I think this should work in the onRenderCell function but don't fully understand it.
In AirDatepicker, the days of the month, 12 months and a window of years are drawn separately. The numbers of the month are displayed correctly. Months and years are not displayed.
my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
</head>
<body>
<input type="text" id="datepicker">
<script src="main.js"></script>
</body>
</html>
my js
let days = [ "2022-4-15", "2022-5-3", "2022-4-1", "2021-2-20"];
$('#datepicker').datepicker({
onRenderCell: function (date, cellType) {
new_date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
//all dates passive
let disabled = true;
//if the date is in the array, she becomes active
if (cellType == 'day'){
disabled = days.indexOf(new_date) == -1
}
//called but not working
if (cellType == 'month' && disabled == false){
disabled = days.indexOf(new_date) == -1
}
if (cellType == 'year' && disabled == false){
disabled = days.indexOf(new_date) == -1
}
return {disabled: disabled}
}
});
Tell me what exactly am I doing wrong? How to make it so that when choosing months, those of them that have the desired dates are displayed?
I am trying to show an alert when someone selects a date in the past:
jQuery('#date').datepicker().change(evt => {
var selectedDate = jQuery('#date').datepicker('getDate');
var theSelectedDate = selectedDate.setHours(0,0,0,0);
var now = new Date();
var theNow = now.setHours(0,0,0,0);
if (theSelectedDate > theNow) {
// Date in in the future, all good
} else {
alert("Selected date is in the past");
}
});
..and the date field...
<input type="date" id="date" name="date" />
The problem is that regardless of what date I chose with the date picker, the alert is always 'Selected date is in the past' on mobile devices.
What the heck am I doing wrong?
I am not sure why you do not set the Min Date so that Users cannot select a past date.
$(function() {
$("#date").datepicker({
minDate: "+1d"
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="date"></p>
You can use 0 for today or +1d to exclude today.
Update
For Native HTML5 datepicker, you can leverage the min attribute.
You can use the min and max attributes to restrict the dates that can be chosen by the user.
$(function() {
function nowStr() {
var dt = new Date();
var yy = dt.getFullYear();
var m = (dt.getMonth() + 1);
m = m < 10 ? "0" + m : m;
var d = dt.getDate();
d = d < 10 ? "0" + d : d;
var s = yy + "-" + m + "-" + d;
return s;
}
$("#date").attr("min", nowStr());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="date" name="date" min="2019-01-01" />
Try this.
I have shifted now above the selected date
jQuery('#date').datepicker().change(evt => {
var now = new Date();
var selectedDate = jQuery('#date').datepicker('getDate');
var theSelectedDate = selectedDate.setHours(0,0,0,0);
var theNow = now.setHours(0,0,0,0);
if (theSelectedDate >= theNow) {
alert("Selected date is correct !!!!!!!");
// Date in in the future, all good
} else {
alert("Selected date is in the past");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<input type="text" class="form-control" id="date" name="date" placeholder="DD/MM/YYY">
Your looking for the onSelect event:
$("#date").datepicker({
onSelect: function(dateText, inst) {
var selectedDate = new Date(dateText);
var theSelectedDate = selectedDate.setHours(0,0,0,0);
var now = new Date();
var theNow = now.setHours(0,0,0,0);
if (theSelectedDate > theNow) {
console.log(true);
// Date in in the future, all good
} else {
console.log(false);
alert("Selected date is in the past");
}
}
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<input type="date" id="date" name="date" />
See this answer
I have a script that finds that day, date and year.
But two days it should say "I am closed" below the day...
those two days is 'Søndag' and 'Onsdag'
I have tried to make an if statement but it doesn't seem to work :(
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>JS - Testing</title>
</head>
<body>
<b id="calendar-day"></b> -
<b id="calendar-date"></b>
<b id="calendar-month-year"></b>
<p></p>
</body>
<script src="main.js"></script>
</html>
JS
//function that gets the day and date
function calendar() {
var day = ['Søndag', 'Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lørdag'];
var month = ['Januar','Febuar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'];
var d = new Date();
setText('calendar-day', day[d.getDay()]);
setText('calendar-date', d.getDate());
setText('calendar-month-year', month[d.getMonth()]+' '+(1900+d.getYear()));
checkDay();
};
//function that sees if it's closing day
var paragraph = document.querySelector('p');
function checkDay() {
if (day == 'Onsdag') {
paragraph.innerText = 'I am closed';
}
}
function setText(id, val){
if(val < 10){
val = '0' + val; //add leading 0 if val < 10
}
document.getElementById(id).innerHTML = val;
};
window.onload = calendar;
Probably You are trying to do this. You cant directly access day into checkDay function rather you need to pass it as a parameter and then. Secondly, You can't directly extract a value from day because it's an array not integer or string, so you need to loop through the array in order to find the right value
function calendar() {
var day = ['Søndag', 'Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lørdag'];
var month = ['Januar','Febuar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'];
var d = new Date();
var today = day[d.getDay()];
setText('calendar-day', today);
setText('calendar-date', d.getDate());
setText('calendar-month-year', month[d.getMonth()]+' '+(1900+d.getYear()));
checkDay(today);
};
//function that sees if it's closing day
var paragraph = document.querySelector('p');
function checkDay(day) {
if (day == 'Onsdag' || day == 'Søndag') {
paragraph.innerText = 'I am closed';
} else paragraph.innerText = 'I am opened';
}
function setText(id, val){
if(val < 10){
val = '0' + val; //add leading 0 if val < 10
}
document.getElementById(id).innerHTML = val;
};
window.onload = calendar;
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>JS - Testing</title>
</head>
<body>
<b id="calendar-day"></b> -
<b id="calendar-date"></b>
<b id="calendar-month-year"></b>
<p></p>
</body>
<script src="main.js"></script>
</html>
The most prized quality in a developer is laziness. Don't be messing around in the reeds there :-) Use the Date object to manipulate dates, and, these days, there's really no excuse for not using Vue when you want to manipulate the DOM.
To get danish weekdays, use myDate.toLocaleDateString('da-DK',{weekday:'long'}). The same goes for month names. Docs are here.
To find out if a day is on the weekend, use (myDate.getDay() === 6) || (myDate.getDay() === 0);
Here's your example working, with 13 lines of script and 6 lines of markup.
var vm = new Vue({
el : "#vueRoot",
data : { myDate : new Date() },
computed : {
formattedDate(){
return this.myDate.toLocaleDateString(
'da-DK',
{weekday:'long', day:'numeric', month:'long', year:'numeric'}
);
},
isOpen(){return !(this.myDate.getDay() === 3 || this.myDate.getDay() === 0)}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vueRoot">
<b>{{formattedDate}}</b>
<br>
{{isOpen?'I am OPEN':'I am CLOSED'}}
</div>
I have passed day into checkDay:
//function that gets the day and date
function calendar() {
var day = ['Søndag', 'Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lørdag'];
var month = ['Januar','Febuar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'];
var d = new Date();
setText('calendar-day', day[d.getDay()]);
desiredDay = day[d.getDay()];
setText('calendar-date', d.getDate());
setText('calendar-month-year', month[d.getMonth()]+' '+(1900+d.getYear()));
checkDay(desiredDay);
};
//function that sees if it's closing day
var paragraph = document.querySelector('p');
function checkDay(day) {
if (day == 'Onsdag') {
paragraph.innerText = 'I am closed';
}
}
function setText(id, val){
if(val < 10){
val = '0' + val; //add leading 0 if val < 10
}
document.getElementById(id).innerHTML = val;
};
window.onload = calendar;
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>JS - Testing</title>
</head>
<body>
<b id="calendar-day"></b> -
<b id="calendar-date"></b>
<b id="calendar-month-year"></b>
<p></p>
</body>
<script src="main.js"></script>
</html>
day was undefined in the checkDay function
I'm trying to write the code to get the "date" excluding weekends and bank holidays( which means when I enter the date and number of days, it should exclude weekends and bank holidays, like when I give 03-24-2017 and 3 days, it should give 03-31-2017 assuming 29th is a holiday). I got the code for whole thing, but it is taking todays date, but I wish to enter the date manually, I tried with document.getElementById("today").value; but its not giving any output.Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Add Days and Holidays </title>
</head>
<body>
<pre id="fourWeeks"></pre>
Add <input id="nDaysToAdd" value="0"> days<p>
<button onclick="calcBusinessDay()"> Calculate
</button>
<div id="debug"</div>
<script type="text/javascript">
var today = new Date();
var holidays = [
[2017,2,10],
before holiday
[2017,7,4],
];
Date.prototype.addDays = function (days) { return new
Date(this.getTime() + days*24*60*60*1000); }
Date.prototype.addBusAndHoliDays = function (days) {
var cDate = this;
var holiday = new Date();
var c='', h='';
for (var i=1; i<=days ; i++){
cDate.setDate(cDate.getDate() + 1);
if (cDate.getDay() == 6 || cDate.getDay() == 0) {
days++; }
else {
for (j=0; j<holidays.length; j++) {
holiday = new
Date(holidays[j][0],(holidays[j][1]-1),holidays[j][2]);
c = cDate.toDateString(); h =
holiday.toDateString();
if (c == h) { days++; }
}
}
} return cDate;
}
Date.prototype.DayList = function (daysToShow) {
var td = this;
if (daysToShow == undefined) { daysToShow = 31; }
var str = '';
for (var i=0; i<daysToShow; i++) {
newday = new
Date(td.getFullYear(),td.getMonth(),(td.getDate()+i));
str += newday.toDateString()+'\t =>\t'+i+' actual days
ahead<br>';
} return str;
}
function calcBusinessDay() {
functions
var today = new Date();
var N =
parseInt(document.getElementById('nDaysToAdd').valu
e) || 0;
var wd = today.addDays(N);
document.getElementById('debug').innerHTML
= '<p>'+N+' week days from today
('+today.toDateString() +') will be on:
'+wd.toDateString();
var bd = today.addBusAndHoliDays(N);
document.getElementById('debug').innerHTML +=
'<p>'+N+' business days will be on: '+bd.toDateString();
str += '<p>'+newDay.DayList(14);
document.getElementById('debug').innerHTML +=
'<p>'+str;
}
</script>
</body>
</html>
With document.getElementById("today").value you get the value of an INPUT html element, and you don't have any input with todays value.
Here's an snippet getting todays date (Warning: the date is formatted d/m/y)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.rawgit.com/JDMcKinstry/JavaScriptDateFormat/master/Date.format.min.js"></script>
</head>
<body>
Today: <input id="today" type="text">
<br>
<button onclick="calculate()" >Calculate something</button>
<div id="results" style="margin-top: 20px; border: red;"></div>
<script>
document.getElementById("today").value = new Date().format('d/m/Y');
function calculate() {
var splitted = document.getElementById("today").value.split("/");
var today = new Date(splitted[2], splitted[1] - 1, splitted[0]);
document.getElementById("results").innerHTML = "Today is " + today;
}
</script>
</body>
</html>
I am very new to JQuery and JS and I wrote a small GUI in php where the user has to choose two week numbers and I have a function that produces some stats about it. I found a JS code that highlights the whole week when the user go through it but when clicking on one of the dates, the specific date is being inserted to the input box. I would like to put the week number in the input box instead. Is this possible?
The code I use was posted here:
http://jsfiddle.net/MqD2n/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function () {
window.setTimeout(function () {
$('.ui-weekpicker').find('.ui-datepicker-current-day a').addClass('ui-state-active').removeClass('ui-state-default');
}, 1);
}
var setDates = function (input) {
var $input = $(input);
var date = $input.datepicker('getDate');
if (date !== null) {
var firstDay = $input.datepicker( "option", "firstDay" );
var dayAdjustment = date.getDay() - firstDay;
if (dayAdjustment < 0) {
dayAdjustment += 7;
}
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment + 6);
var inst = $input.data('datepicker');
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
$('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
}
}
$('.week-picker').datepicker({
beforeShow: function () {
$('#ui-datepicker-div').addClass('ui-weekpicker');
selectCurrentWeek();
},
onClose: function () {
$('#ui-datepicker-div').removeClass('ui-weekpicker');
},
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function (dateText, inst) {
setDates(this);
selectCurrentWeek();
$(this).change();
},
beforeShowDay: function (date) {
var cssClass = '';
if (date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function (year, month, inst) {
selectCurrentWeek();
}
});
setDates('.week-picker');
var $calendarTR = $('.ui-weekpicker .ui-datepicker-calendar tr');
$calendarTR.live('mousemove', function () {
$(this).find('td a').addClass('ui-state-hover');
});
$calendarTR.live('mouseleave', function () {
$(this).find('td a').removeClass('ui-state-hover');
});
});
</script>
</head>
<body>
<input class="week-picker"></input>
<br /><br />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
</body>
</html>
Totally 2 fields are present. First field - datepicker is to select the date and the second field - weekNumberis to get the week number for that date.
<input type="text" id="datepicker" />
<input type="text" id="weekNumber" />
$('#datepicker').datepicker({
onSelect: function (dateText, inst) {
$('#weekNumber').val($.datepicker.iso8601Week(new Date(dateText)));
}
});
Here is the JS Fiddle Demo
Edit:
For displaying the week number in the same selecting date field
<input type="text" id="datepicker" />
$('#datepicker').datepicker({
onSelect: function (dateText, inst) {
$('#datepicker').val("");
$('#datepicker').val($.datepicker.iso8601Week(new Date(dateText)));
}
});
Demo is here