jQuery date-picker javascript syntax problem - javascript

the errortrying to do something simple but I got an error, I`m a beginner so I have a lot of syntax problems.
thank you!
<input class="DateFrom" placeholder="min 7 days">
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.1.js"
integrity="sha256-e9gNBsAcA0DBuRWbm0oZfbiCyhjLrI6bmqAl5o+ZjUA="
crossorigin="anonymous"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"
integrity="sha256-PsB+5ZEsBlDx9Fi/GXc1bZmC7wEQzZK4bM/VwNm1L6c="
crossorigin="anonymous"></script>
<script type="text/javascript">
$("input.DateFrom").datepicker({
minDate: 7,
dateFormat: 'dd/mm/y',//check change
changeMonth: true,
changeYear: true
});
</script>
</body>

Try this,
<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="//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>
<script>
$( function() {
$( "input.DateFrom" ).datepicker( {
minDate: 7,
dateFormat: 'dd/mm/y',
changeMonth: true,
changeYear: true
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" class="DateFrom"></p>
</body>
</html>

Related

Is it possible to change the height of the jQuery UI datepicker dropdown?

Is it possible to change the dropdown height that shows the years in jQuery UI? In the snippet below you can see that when you click the years dropdown, it shows 20 items but it's too long. I could not find a way to shrink this dropdown because the package seem to override everything with JS
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Display month & year menus</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

why don't BOTH fullCalendar and datePicker work?

currently the code for the calendar functions, but the datePicker doesn't
if i copy/paste so that the date picker code comes second it functions, but the calendar doesn't.
fullcalendar source http://fullcalendar.io/ datepicker source https://jqueryui.com/datepicker/#min-max
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https:/resources/demos/style.css">
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker({ minDate: +1, maxDate: "+1Y" });
});
</script>
<!-- code above is the code for the datepicker -->
<!-- code below is the code for the calendar -->
<link rel='stylesheet' href='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/fullcalendar.css' />
<script src='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/lib/jquery.min.js'></script>
<script src='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/lib/moment.min.js'></script>
<script src='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/fullcalendar.js'></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#calendar').fullCalendar({
weekends:false,
defaultView:'agendaWeek',
header: {
left:'prev,today,next',
center:'title',
right:'month,agendaWeek'
},
});
});
As pointed out simoultaniously by #Guruprasad and myself, your file inclusions are a mess.
It seems you're new so for this time here's the correct way to do it.
You don't need all the $(func... since you're using document.ready event to fire before calling the functions which means that jquery is available at this point.
Hope it helps !
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel='stylesheet' href='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/fullcalendar.css' />
<link rel="stylesheet" href="https:/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/lib/moment.min.js'></script>
<script src='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/fullcalendar.js'></script>
<script type="text/javascript">
$(document).ready(
$( "#datepicker" ).datepicker({ minDate: +1, maxDate: "+1Y" });
$('#calendar').fullCalendar({
weekends:false,
defaultView:'agendaWeek',
header: {
left:'prev,today,next',
center:'title',
right:'month,agendaWeek'
},
});
});

Date Picker Options not working

I tried every options. MaxDate, MinDate, Beforeshowday. But its still not working. But my Datepicker is showing and working well. But I cant configure any options in my date picker. Any help would be greatly appreciated
Here is the code below
<script type="text/javascript">
jQuery(document).ready(function(){
$('#datepicker').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: '0',
});
});
</script>
Please checkout the code sample from https://jqueryui.com/datepicker/#default
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Dates in other months</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
And for beforeShowDay, Please check JQuery DatePicker and beforeShowDay

How to disable the date (tomorrow date) in jquery

How to disable the next date. I can select the previous date but not the next coming dates. Can any one help me? This is the code I am using.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
You can disable selectability of future dates by specifying 0 for the maxDate option.
Documentation
$( "#datepicker" ).datepicker({
maxDate: 0 // 1 for tomorrow, 2 for day-after, and so on..
});
This will work:
$("#datepicker").datepicker({dateFormat: 'yy-MM-dd',maxDate: 0 });

JQuery - datepicker doesn't appear

I am new in JQuery and I need to use datepicker to get date in form. I am using this code:
HTML
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#date" ).focus().datepicker({ dateFormat: 'dd-mm-yy' });
});
</script>
</head>
<body>
<p>Date: <input type="text" id="date"></p>
</body>
</html>
But when I click on field, nothing happen. When I tried to use this:
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="datepicker"></div>
<script>
$( "#datepicker" ).datepicker();
</script>
</body>
</html>
It is working... Thanks for tips.
Additionally: I am using Nette framework, where I can inherit templates... Could this be the problem?
Just focus it after you've initialized the datepicker, otherwise the input is focused before there is a datepicker attached.
$( "#date" ).datepicker({ dateFormat: 'dd-mm-yy' }).focus();
FIDDLE
Try initializing with the option like this:
$('#date').datepicker( "option", "dateFormat", 'dd-mm-yy' ).datepicker();

Categories