I am working on a site your can see the demo here https://masborn.com/theretreatpalmdubai/
The data picker is calendar is not working here.
jQuery(function () {
jQuery("#bookdate").daterange({
showButtonPanel: true,
closeText: "X",
onClose: function () {
jQuery(".bookinginputs").css("display", "block");
},
onSelect: function (){
jQuery("#demodate").css("display", "none");
jQuery(".ui-datepicker-close").css("display", "none");
}
});
});
I have spend many time on it and not find what is the issue here. Can any one give some input?
From the jquery ui documentation, its called "datepicker" not "daterange".
Also, consider using the $ shortcut instead of jQuery, it makes it easier to read.
<!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="//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() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Related
I was trying to disable certain days in the date picker like Friday is off so I need to disble friday from the date picker
<!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="//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() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
Try this code to disable friday from the date picker
function DisableFriday(date) {
var day = date.getDay();
if (day == 5) {
return [false,"","Unavailable"] ;
} else {
return [true] ;
}
}
jQuery(function($){
$('input[name="chk_date"]').datepicker('option', 'beforeShowDay', DisableFriday).datepicker('refresh');
});
<!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="//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() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" name="chk_date" id="datepicker"></p>
</body>
I have this input type date in here and currently, the datepicker will only show once the user clicks the arrow down button in its field. What I want to happen is that, open the datepicker every time the user clicks the input field.
<input type="date" id="date_of_purchase" name="date_of_purchase" class="input-field input-date" placeholder="Inköpsdatum">
from the jQuery UI page for datepicker:
<!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="//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() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
EDIT
Creating a datepicker with fall back on jquery
i'm using jquery date rangepicker. while i select date from daterange picker i don't want to close the calendar. so i use this code. but it's not working. can any one help. please. here is my code
<div class="form">
<input id="d" class="form__daterange">
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="src/jquery-ui.js"></script>
<script src="src/jquery.daterange.js"></script>
<script>
$(function () {
$("#d").daterange({
numberOfMonths: 12,
minView: 2,
autoclose: false,
});
});
</script>
you need autoClose: false
<script>
$(function () {
$("#d").daterange({
numberOfMonths: 12,
minView: 2,
autoClose: false,
});
});
Try this code
<!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="//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() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
or modify yours like
<script>
$(function () {
$("#d").datepicker({
});
});
</script>
I want to disable days before tomorrow and set tomorrow as the default but I cant.my code shows today as the default and disabled days before today.
view:
<input id="date_modified" type="text" class="form-control" value="">
jquery:
$('#date_modified').persianDatepicker({
observer: true,
format: 'YYYY/MM/DD',
maxDate: new Date(),
})
.pDatepicker('setDate');
});
<!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="//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() {
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
//Following line of code is to set the default and minDate of datepicker.
$( "#datepicker" ).datepicker({minDate: tomorrow,defaultDate:tomorrow});
//Following line of code is to set value of default date on text box.
$("#datepicker").val($.datepicker.formatDate('mm/dd/yy', tomorrow));
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
When I insert this script link in my index.php
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
It turns into this..
This is what it normaly look like and supposed to be look like
Here's the whole code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<?php include ('title.php');?>
</title>
<link rel="icon" href="assets/img/LOGO.png">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<link href="assets/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id="wrapper">
<?php
session_start();
include ("checkSession.php");
include ("nav.php");
include ("pagecontent.php");
?>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins/metisMenu/metisMenu.min.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/jquery-1.3.2.min"></script>
<script>
$(document).ready(function(){
$('#listTable').DataTable();
});
</script>
<script>
$(document).ready(function(){
$('#print').DataTable({
"paging": false,
"filter": false,
"info": false
} );
});
</script>
<script language="javascript">
function Clickheretoprint()
{
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=1000, height=400, left=100, top=25";
var content_vlue = document.getElementById("content").innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('</head><body onLoad="self.print()" style="width: 1500px; font-size:11px; font-family:arial; font-weight:normal;">');
docprint.document.write(content_vlue);
docprint.document.close();
docprint.focus();
}
</script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</script>
</body>
</html>
Well If I remove the script link and put in the other source code, It doesn't work so I really need that script link to run the function :(
You've double (actually, triple) included jQuery.
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-1.3.2.min"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
It's likely some stuff in your jQuery 1.3.2-compatible code doesn't work in jQuery 1.10.2 (which as the last version loaded, overrides the others). Check your console for script errors.
You can use multiple versions of jQuery on a page using jQuery.noConflict but you'd really be better off solving the more fundamental issue.
I got it now, I just need to edit it into
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/jquery-ui.js"></script>
I believe it's because of the protocol used to access the CDN of jquery. Try this instead:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
if that doesn't work, try with HTTPS:
<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>