I am installing jquery datepicker and timepicker for the first time. Datepicker is working but timepicker is not. Maybe some js conflict?
Datepicker files
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="css/date.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>
Timepicker and using this script https://plugins.jquery.com/jt.timepicker/
<link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css">
<script type="text/javascript" src="js/jquery.timepicker.min.js"></script>
Other js on page before closing body tag
<script type="text/javascript" src="///js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/jquery.countTo.js"></script>
<script type="text/javascript" src="js/jquery.appear.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
$( function() {
$( "#datepicker" ).datepicker({
yearRange: '-120:+0',
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true
});
} );
</script>
<script>
$('.timepicker').timepicker();
</script>
Is there anyway I can limit datepicker to today() as I am using it for birthdate.
Is there any way to output error in jquery.
And what is wrong with timepicker. Nothing happens when I click the form field.
I changes timepicker js to jquery.timepicker.js
Added maxDate: '0' to limit date to today's date.
Used Console to find jquery errors.
Related
Datepicker can´t run in this page, but the script of jquery-ui is imported.
Where is the conflict? Thanks.
Datepicker is not a function
This is my script
$( document ).ready(function() {
var fecha = "";
$( "#datepicker" ).datepicker({
dateFormat: "yy-mm-dd",
});
});
$( "#datepicker" ).change(function(){
fecha = this.value;
$.post( "tablaUsuarioPlanta.php",{fecha : fecha},function(data){
$("#tabla").html(data);
});
});
This is the HTML
<p>Date: <input type="text" id="datepicker" size="30"></p>
And the scripts load on the page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<!-- Bootstrap Core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../css/simple-sidebar.css" rel="stylesheet">
<!--JQUERY-->
<!--<script src="../js/jquery.js"></script>-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
You are using two version of JQuery that creates the confliction . Use only one instead of two.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../css/simple-sidebar.css" rel="stylesheet">
<!--JQUERY-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
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'
},
});
});
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
i need guide on how to apply this restriction for back dates for the date picker as i am new to this javascript.
<script type="text/javascript" src="javascript/datepickr.min.js"></script>
<input class="" type="Text" size="30" name="Date" id="Date" placeholder="yyyy-mm-dd"/>
<script type="text/javascript">
new datepickr('Date',
{
'dateFormat': 'Y-m-d'
}
);
</script>
i do saw some people post about solution like this code, but i don't know how to apply in my code
$(function() {
$( "#datepicker" ).datepicker({ minDate: 0});});
i have tried this as well, still not working, and it is more worst as the date picker can't be show
<link rel="stylesheet" href="css/jquery-ui-1.9.2.css" type="text/css" />
<link rel="stylesheet" href="style/jquery-ui-1.9.2.min.css" type="text/css" />
<script type="text/javascript" src="javascript/jquery-ui-1.9.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-1.8.3.js"></script>
<input type='text' id='datepicker'></input>
<script type="text/javascript">
$("#date").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate:mdate() });
function mdate(){
var str = "-0Y";
return str; }
</script>
Take look at this. In it I have used JQuery UI 1.9.2
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<input id="datepicker" type="text" />
<script>
$( "#datepicker" ).datepicker({
minDate: 0
});
</script>
I am setting minDate on load. Use this code and this will work for you. Click Run Code Snippet code if you want to see the code in action.
$( "#datepicker" ).datepicker({
minDate: 0
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<input id="datepicker" type="text" />
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();