How can I disable only two future dates after today for instance
today is 2020-12-26 but then 2020-12-27 and 2020-12-28 to be disabled like that. and all past dates must be enabled . I tried searching everywhere but no luck all I see is to disable all future dates which I don't want. Your help will be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta https-equiv="X-UA-Compatible" content="IE=edge">
<title>Pay Fees</title>
<!--date picker -->
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!--date picker -->
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker({
maxDate: 0
});
});
</script>
</head>
<body>
<input type="text" id= "datepicker" name="datepicker">
</body>
</html>
I think its related to this question JQuery ui - date picker, disabling specific dates but you just get the next two days like this and assign it to unavailableDates.
var today = new Date();
var dd = today.getDate()+1;
var dd2 = today.getDate()+2;
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
nextday = yyyy+'-'+mm+'-'+dd;
nextday2 = yyyy+'-'+mm+'-'+dd2;
unavailableDates = [nextday,nextday2];
<html>
<head>
<meta charset="utf-8">
<meta https-equiv="X-UA-Compatible" content="IE=edge">
<title>Pay Fees</title>
<!--date picker -->
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!--date picker -->
<script type="text/javascript">
$(document).ready(function() {
var today = new Date();
var dd = today.getDate()+1;
var dd2 = today.getDate()+2;
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
nextday = yyyy+'-'+mm+'-'+dd;
nextday2 = yyyy+'-'+mm+'-'+dd2;
unavailableDates = [nextday,nextday2];
$("#datepicker").datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ unavailableDates.indexOf(string) == -1 ]
}
});
});
</script>
</head>
<body>
<input type="text" id= "datepicker" name="datepicker">
</body>
Related
Does anybody know why this Script not working? I am trying to disable weekends and previous dates? I have tried searching all over the web but I am struggling.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="date" id="date" class="form-control">
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
minDate : 'now'
});
});
</script>
DatePicker
According to documentation, you simply need to disable the days of the week by utilizing numbers 0-6. Sunday starting at 0 and Saturday ending at 6, and obviously, every other day of the week assigned accordingly. Also, the format of daysOfWeekDisabled is a comma delimited string which you will see below. In order to only show today's date and on, simply set a minDate of today's date. All of the above is implemented in code below:
let dateToday = new Date();
$('#date').datepicker({
daysOfWeekDisabled: '0, 6',
minDate: dateToday
})
In your case, the problem is you have input type as date but if you change that to test it will work.
Working Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<head>
<script type="text/javascript">
$(function () {
$("#date").datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate : 'now'
});
});
</script>
</head>
<body>
<input type="text" id="date" />
</body>
</html>
I need a button to only appear from 12pm-3pm on Monday-Friday. When it is not during those times, the item (button) needs to not be shown. We also need to account the different time zones for people who will be viewing the site. Any help would be greatly appreciated
My code right now only disables the button during 12pm-3pm. I have not been able to input for it to only work on certain days. Also, I think the time only accounts for the server's time zone (Pacific Standard) and not the user's.
<a href="#" target="_blank"><input id="live" class="bttHider live"
type="submit" onclick="showHidden(); showbttHidden();"
value="Livestream Video - STREAMING NOW" disabled></a>
<script>
var h = new Date().getHours();
if (h >= 12 && h <= 15) {
document.getElementById('live').disabled=false;
}
</script>
var today = new Date();
var day = today.getDay();
var daylist = ["Sunday","Monday","Tuesday","Wednesday ","Thursday","Friday","Saturday"];
console.log("Today is : " + daylist[day] + ".");
if(daylist[day]!="" && daylist[day]!="Sunday"){
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
if(hour>="12" && (hour<=3&&minute==0)){
$("#btn1").show();}
else{$("#btn1").hide()}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn btn-info" id=btn1>Basic</button></div></body></html>
I want to change to year picker calendar only in a dynamic input fields.The calender should show only year values Can any one help me please.
Here is the javascript code.
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker();
}
});
You can try this one. And see if it will help your problem.
HTML:
<select name="yearpicker" id="yearpicker"></select>
JS:
var startYear = 1800;
for (i = new Date().getFullYear(); i > startYear; i--)
{
$('#yearpicker').append($('<option />').val(i).html(i));
}
Here is a jsfiddle link
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker({
minViewMode: 2,
format: 'yyyy'
});
}
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<input type="text" class="datepicker" />
I assume it is bootstrap datepicker (Link)
I would not use a datepicker if you want to select a year only. Use a select for that. However, you can modifiy the datepicker (since you didn't mention which one you are using I assume jQuery UI) to only return the year.
Have a look at this fiddle:
$(function() {
$(".datepicker").datepicker({ dateFormat: 'yy' });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<input type="text" class="datepicker"/>
I am writing an html file to take date input. I am using date picker to select the date, instead of selecting date from the date picker, if the user is manually typing the date in text field for ex: 09/31/16 I need to give information to the user that date is invalid date. But my code given below is taking as october 1st 2016 when I created the date object. if I am converting date to ISOString it is displaying as 30th sept. But my desired output is to display the message to the browser as an "Invalid date". Please help me as I have to resolve this because I am going to use dates at many places during my development. Thank You.
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function () {
$("#datepicker").datepicker();
});
function verifyDate() {
var d = new Date($("#datepicker").val());
console.log(d);
var d = new Date($("#datepicker").val()).toISOString();
console.log(d);
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" onblur="verifyDate()"></p>
</body>
</html>
if you want to get the date on user selection, your code should be like:
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker({
onSelect: function(){
var dateValue = $(this).datepicker('getDate');
console.log(dateValue);
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" ></p>
</body>
Following way of validating dates can help in this:
let dateObj = document.getElementById("datepicker");
if (dateObj.validity.badInput) {
// show error message
}
I have a simple timer countdown HTML page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Countdown</title>
<style type="text/css">
#import "http://keith-wood.name/css/jquery.countdown.css";
#defaultCountdown { width: 240px; height: 45px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
var austDay = new Date();
austDay = new Date("December 9, 2011 11:30:00");
$('#defaultCountdown').countdown({until: austDay});
$('#year').text(2011);
});
</script>
</head>
<body>
<h2>Countdown</h2>
<p>Counting down to 11:30am Dec 9th, <span id="year">2011</span>.</p>
<div id="defaultCountdown"></div>
</body>
</html>
Problem is that it doesn't handle timezones properly. For example, it shows the correct countdown in my timezone but if someone views it from say in CST, it's off by 2 hours. What's the proper way to set the Date in the Javascript code? Right now, I have this
austDay = new Date("December 9, 2011 11:30:00");
Not sure how this will interact with the countdown plugin...
austDay = new Date(Date.UTC(year, month, day, hour, minute, second));
You can do something like:
var tz = d.getTimezoneOffset();
var date = new Date("December 9, 2011 11:30:00");
austDay = date.setMinutes( date.getMinutes() + tz );