Check date range in Jquery Datepicker - javascript

So i'm having the following code of a jquery datepicker
$(".dateInput").datepicker({
language:"el",
format: " dd/mm/yyyy",
startView: "+0d",
todayHighlight: true,
autoclose: true,
onClose: function() {
.........
}
})
and i would like to do a check on the onClose, where, if the date that the user selects is one month before the today date or one year after, an alert message would appear.
Any suggestions are really appreciated.
Thank you in advance.

Welcome to StackOverflow,
here is possible solution for your request:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<script>
$(function() {
$(".dateInput").datepicker({
language: "el",
format: "dd/mm/yyyy",
startView: "+0d",
todayHighlight: true,
autoclose: true,
onClose: function(dateText, inst) {
var date = new Date(dateText);
var dateMin = new Date();
dateMin.setMonth(dateMin.getMonth() - 1);
dateMin.setHours(0, 0, 0, 0); // Set time to the beginning of the day
var dateMax = new Date();
dateMax.setFullYear(dateMax.getFullYear() + 1);
dateMax.setHours(23, 59, 59, 999); // Set time to the end of the day
if (date >= dateMin && date <= dateMax) {
alert("Date is in range.");
} else {
alert("Date is NOT in range.");
}
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" class="dateInput"></p>
</body>
</html>
You can find more info about Date object on MDN.

Related

Disable weekends, all holidays and Mondays in pure JavaScript date picker

In a Shopify project running Booster theme, we're not using jQuery at all. So I'm using a simple plug-in to add the date-picker in the cart page. With the below code, I've only been able to just get the date-picker working, but I'm not sure how to disable weekends, all holidays and Mondays?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Date Picker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dtsel.css" />
<script src="dtsel.js"></script>
</head>
<body>
<input name="dateTimePicker" />
</body>
<script>
instance = new dtsel.DTS('input[name="dateTimePicker"]');
instance = new dtsel.DTS('input[name="dateTimePicker"]', {
showTime: true
});
instance = new dtsel.DTS('input[name="dateTimePicker"]', {
showTime: true,
showDate: false
});
instance = new dtsel.DTS('input[name="dateTimePicker"]', {
dateFormat: "yyyy-mm-dd",
timeFormat: "HH:MM:SS"
});
instance = new dtsel.DTS('input[name="dateTimePicker"]', {
direction: 'BOTTOM'
});
instance = new dtsel.DTS('input[name="dateTimePicker"]', {
defaultView: "MONTHS"
});
instance = new dtsel.DTS('input[name="dateTimePicker"]', {
paddingX: 5,
paddingY: 5
});
</script>
</html>
Links to the plug-in site and github repository are below.
https://www.cssscript.com/date-time-picker-dtsel/
https://github.com/crossxcell99/dtsel
Could you please help get the JavaScript code above do exactly what the jQuery code below does?
<script>
jQuery(document).ready( function() {
jQuery(function() {
var disabledDays = ["2021-12-23","2021-12-24","2021-12-30","2021-12-25", "2021-12-31", "2021-1-1"];
var myDate = new Date();
if (myDate.getDay() == 5) {
// If today is Friday, disallow the Monday of the coming week (3 days later)
myDate.setDate(myDate.getDate() + 3);
disabledDays.push(jQuery.datepicker.formatDate('yy-m-d', myDate));
}
jQuery("#ship_date").datepicker({
minDate: +2,
maxDate: '+2M',
beforeShowDay: function(date) {
var day = date.getDay();
var string = jQuery.datepicker.formatDate('yy-m-d', date);
var isDisabled = ($.inArray(string, disabledDays) != -1);
//day != 0 and day != 6 disable weekends
return [day != 0 && day != 6 && !isDisabled];
}
});
});
});
</script>
You can have a look at VanillaJS DatePicker. It has all your required options and is completely written in JavaScript with no external dependencies. In the below code, you can see a minimal example of conditions that you stated in your question.
daysOfWeekDisabled - 0 and 6 disables Sunday and Saturday
datesDisabled - Dates to disable including next Monday if it is Friday today
minDate - Minimum Date that can be picked is +2days
maxDate - Maximum Date that can be picked is +60days
function addDays(date, days) {
var result = new Date(date);
result.setDate(result.getDate() + days);
return result;
}
const DISABLED_DATES = ['03/11/2022'];
const today = new Date();
if(today.getDay() === 5){
DISABLED_DATES.push(addDays(today, 3));
}
const elem = document.querySelector('#foo');
const datepicker = new Datepicker(elem, {
pickLevel: 0,
daysOfWeekDisabled: [0,6],
datesDisabled: DISABLED_DATES,
minDate: addDays(today, 2),
maxDate: addDays(today, 60)
});
<link href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker#1.2.0/dist/css/datepicker.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker#1.2.0/dist/js/datepicker.min.js"></script>
<div id="foo"></div>
Add days code is from here.
I have intentionally added 60 days instead of 2 months. You will need to fix this to get accurate maxDate.

Append date in multiple format using datepicker

I'm using JQuery-UI Calendar. My goal is to identify the day of the week for example Wednesday and format the date in the input like this 07/20/2017.
So far I was able to identify the day of the week using dateFormat:DD by splitting the date.
Now the issue is the input field appends the date like this Wednesday/07/20/2017. While I would like to append it like 07/20/2017
$(function() {
$('#datepicker').datepicker({
dateFormat: 'DD/mm/dd/yy',
changeYear: true,
changeMonth: true,
onSelect: function(dateText, inst) {
var day = dateText.split("/");
console.log(day[0]);
$(".inner").append(day[0]);
$("#datepicker").append(day[1]);
}
})
});
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<input type="text" id="datepicker">
<div class="inner">
<p></p>
</div>
Please try this code:
$(function() {
$('#datepicker').datepicker({
dateFormat: 'mm/dd/yy',
changeYear: true,
changeMonth: true,
onSelect: function(dateText, inst) {
var day = dateText.split("/");
console.log(day[0]);
var curDate = $(this).datepicker('getDate');
var dayName = $.datepicker.formatDate('DD', curDate);
$(".inner").append(dayName);
$("#datepicker").append(day[1]);
}
})
});
What I did is this:
Change the dateFromat to 'mm/dd/yy' from 'DD/mm/dd/yy'.
In order to get the name of the day i added this two lines of code
var curDate = $(this).datepicker('getDate');
var dayName = $.datepicker.formatDate('DD', curDate);

Remove the time in JQUERY DATETIMEPICKER

How can I disable the past date in datetimepicker2,
For example: I choose July 1, 2015 in datetimepicker1 then the date datetimepicker2 will be disable from July 1, 2015 and the past of the July 1, 2015. Also how to make the time will not appear in the textbox when i choose date.
Here's the screen capture of the Datetimepicker
Here's the structure:
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.min.css">
<script type="text/javascript" src = "js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.datetimepicker.full.js"></script>
I know the src in the top is the directory of the jquery, I just place there if maybe you know this scenario.
//html
<input id ="textin" required>
<input id ="textout" required>
//script
<script>
$('#textin').datetimepicker({
step: 5
});
$('#textin').datetimepicker({
minDate: 0
});
$('#textout').datetimepicker({
step: 5
});
$('#textout').datetimepicker({
minDate: 0
});
</script>
This should do the trick:
var data = {
format: 'd/m/Y', //date format
timepicker: false //hide time
};
const $in = $('#textin'), $out = $('#textout');
$in.datetimepicker(data);
$out.datetimepicker(data);
$in.on('change', function() {
var minDate = $in.val();
if (minDate) {
minDate = minDate.split('/');
console.log(minDate);
minDate = new Date(minDate[2], minDate[1] - 1, minDate[0], 0, 0);
} else {
minDate = new Date(0, 0, 0, 0, 0);
}
data.minDate = minDate;
$out.datetimepicker(data);
});
Try it out on jsfiddle: https://jsfiddle.net/maxbilbow/2ge1gj4j/5/

JQuery Datepicker has stopped working?

I am using a jquery datepicker to display available booking dates for a reservation form.
The datepicker has been working fine, but now it now longer displays. Instead I get an error {Uncaught TypeError: $(...).datepicker is not a function}.
The code is contained in the page header, and as far as I'm aware has been working fine until it just randomly wasn't anymore. I noticed the error just before as I was blocking a date on the calendar and it wouldn't appear when I went to test it.
The site is a Weebly site, and the form I'm using collects the entries for me to review. At 10:18pm last night (NZ Time) an entry was submitted with the correct date format, however the next booking (4:50pm NZ Time) was entered as "may 6th" which indicates it was typed by the user.
I am the only one with access to the source code for the site and have not made any changes in the last 2 months (Since I blocked some dates before Easter). I honestly have no idea why it would've stopped working.
CODE
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Javascript -->
<script>
var dateToday = new Date();
var array = ["05/05/2017","06/05/2017"]
$( function() {$( "#input-806171099542486857" ).datepicker({
dateFormat: 'dd/mm/yy',
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
var day = date.getDay();
return [(day != 1 & day != 2) & array.indexOf(string) == -1 ];
}, minDate: dateToday
});
});
</script>
</head>
Please check this. Your code is not working because of its blocking Http request over Https. I have modified it and it's working properly now.
var dateToday = new Date();
var array = ["05/05/2017","06/05/2017"]
$( function() {$( "#input" ).datepicker({
dateFormat: 'dd/mm/yy',
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
var day = date.getDay();
return [(day != 1 & day != 2) & array.indexOf(string) == -1 ];
}, minDate: dateToday
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<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>
</head>
<body>
<input id="input" type="text" />
</body>
</html>
Here you have one working for multiple dates
$(document).ready(function (){
var array_names = ["John", "Joseph", "Luis"];
var dbDate;
var date2;
var num = array_names.length;
var array_dates =["1974-05-30", "1978-11-12", "1980-12-11"];
for(var i = 0; i<num; i++){
$("#share").append('<form id = "form_'+array_names[i]+'">');
$("#form_"+array_names[i]).append('<input type="text" placeholder="Name" name="routename" value = "'+array_names[i]+'" id="name_'+array_names[i]+'">');
$("#form_"+array_names[i]).append('<input type="date" placeholder="Date of birth" name="date_birth" value = "'+array_dates[i]+'" id="datepiker_'+array_names[i]+'" class = "datepiker">');
dbDate = array_dates[i];
date2 = new Date(dbDate);
$("#datepiker_"+array_names[i]).datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker('setDate', date2)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<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>
<div id = "share">
</div>
Here you have one working for a fixed number of dates
$(document).ready(function (){
var dbDate;
var date2;
var array_dates =["1974-05-30", "1978-11-12", "1980-12-11"];
var num = array_dates.length;
for(var i = 0; i<num; i++){
dbDate = array_dates[i];
date2 = new Date(dbDate);
$("#datepiker_"+i).datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker('setDate', date2)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<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>
<input type ="datepicker" id = "datepiker_0" value = "" class = "datepicker">
<input type ="datepicker" id = "datepiker_1" value = "" class = "datepicker">
<input type ="datepicker" id = "datepiker_2" value = "" class = "datepicker">

Jquery datepicker not working in Firefox

I have strange issue on datepicker that I cant choose date from FIREFOX rather it accepts date (typed manually) as input to process.
I am using Jquery date picker USING jquery version v1.11.2
$(document).ready(function() {
var time_value = '01.12.2000';
var values = time_value.split(".");
var parsed_date = new Date(values[2], values[1], values[0]);
$("#todate").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
yearRange: "-150:c",
minDate: parsed_date,
maxDate: "+0d"
});
var todate = '<?=str_replace('-', '/',$totimestamp);?>'
if (todate != 'NULL') {
$("#todate").datepicker("setDate", todate);
}
$("#fromdate").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
yearRange: "-150:c",
minDate: parsed_date,
maxDate: "+0d"
});
var fromdate = '<?= str_replace('-', '/',$fromtimestamp);?>';
if (fromdate != 'NULL') {
$("#fromdate").datepicker("setDate", fromdate);
}
});
This works fine with chrome and other browsers ( I could choose from date selector) but in firefox its not working.
I tried with sample independently it works fine.
I'm Not sure whether your code even worked in any other browsers also.I see the syntax error SyntaxError: missing } after function body
you need to close document ready.try this:
$(document).ready(function() {
var time_value = '01.12.2000';
var values = time_value.split(".");
var parsed_date = new Date(values[2], values[1], values[0]);
$( "#todate" ).datepicker({ dateFormat: 'dd/mm/yy',changeMonth: true,changeYear: true,yearRange:"-150:c",minDate:parsed_date,maxDate: "+0d"});
var todate="<?=str_replace('-', '/',$totimestamp);?>";
if (todate != 'NULL') {
$("#todate").datepicker("setDate",todate);
}
$( "#fromdate" ).datepicker({ dateFormat: 'dd/mm/yy',changeMonth: true,changeYear: true,yearRange:"-150:c",minDate:parsed_date,maxDate: "+0d"});
var fromdate="<?= str_replace('-', '/',$fromtimestamp);?>";
if (fromdate!= 'NULL') {
$("#fromdate").datepicker("setDate",fromdate);
}
});
<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<input type="text" id="fromdate"/> <input type="text" id="todate"/>
Or Try setting z-index of input to something like 10000 and see
This code works on IE, firefox and explorer
<html>
<body>
<div>
FromDate: <input type="text" id="fromdate" class="datepicker"/>
ToDate: <input type="text" id="todate" class="datepicker"/>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function() {
var time_value = '01.12.2000';
var values = time_value.split(".");
var parsed_date = new Date(values[2], values[1], values[0]);
$("#todate").datepicker({dateFormat: 'dd/mm/yy',changeMonth: true,changeYear: true,yearRange:"-150:c",minDate:parsed_date,maxDate: "+0d"});
var todate="<?=str_replace('-', '/','19-11-2015');?>"
if (todate != 'NULL') {
$("#todate").datepicker("setDate",todate);
}
$( "#fromdate" ).datepicker({ dateFormat: 'dd/mm/yy',changeMonth: true, changeYear: true,yearRange:"-150:c",minDate:parsed_date,maxDate: "+0d"});
var fromdate="<?= str_replace('-', '/','21-11-2015');?>"
if (fromdate!= 'NULL') {
$("#fromdate").datepicker("setDate",fromdate);
}
});
</script>
</body>
Here it is the link to jsfiddle
https://jsfiddle.net/tz3qLaa8/
Please note that the code
var todate = '<?=str_replace('-', '/',$totimestamp);?>'
is wrong. You need to use double quote on openinig and closing the string because you use the single quote inside the string

Categories

Resources