My autocomplete and datetimepicker scripts conflicts. It is, therefore, datepicker not work. I try noConflict() method but, it's not work for me. I must use these two script codes.
My script codes
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
$("#projeadi").autocomplete("projeler.php", {
selectFirst: true
});
});
</script>
<script src="jquery-ui.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel="stylesheet" href="jquery-ui.structure.css">
<link rel="stylesheet" href="jquery-ui.structure.min.css">
<link rel="stylesheet" href="jquery-ui.theme.css">
<link rel="stylesheet" href="jquery-ui.theme.min.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
$.datepicker.regional['tr'] = {
closeText: 'kapat',
prevText: '<geri',
nextText: 'ileri>',
currentText: 'bugün',
monthNames: ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran',
'Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'],
monthNamesShort: ['Oca','Şub','Mar','Nis','May','Haz',
'Tem','Ağu','Eyl','Eki','Kas','Ara'],
dayNames: ['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi'],
dayNamesShort: ['Pz','Pt','Sa','Ça','Pe','Cu','Ct'],
dayNamesMin: ['Pz','Pt','Sa','Ça','Pe','Cu','Ct'],
weekHeader: 'Hf',
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['tr']);
});
</script>
<script>
$(function() {
$( "#datepicker2" ).datepicker({dateFormat: "yy-mm-dd"});
});
</script>
How I solve this problem. Sorry for my bad English.
OK I solved my problem. I edited jquery.js and autocomplete.js, I changed "$" to "jQuery" in the these jquery.js and autocomplete.js . After these I change my script code to
<script>
var $cakisma = jQuery.noConflict();
$cakisma(document).ready(function(){
$cakisma("#projeadi").autocomplete("projeler.php", {
selectFirst: true
});
});
</script>
and it's worked like a charm. Thanks for help everyone.
Related
Original Question
I have read jQuery Datepicker Japanese Calendar, jquery japanese datepicker,
https://jqueryui.com/datepicker/#localization and other sources but still cannot get my calender to display the days correctly.
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/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.0/jquery-ui.js"></script>
<script src="i18n/datepicker-ja.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "ja" ] );
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker">
</p>
</body>
</html>
Update
I think there was a weird glitch with my Google Chrome, I had to go into settings and click 'Reset and clean up'. I talk about it more here.
You can include built-in support for languages like this :
/* Japanese initialisation for the jQuery UI date picker plugin. */
jQuery(function($){
$.datepicker.regional['ja'] = {
closeText: '閉じる',
prevText: '<前',
nextText: '次>',
currentText: '今日',
monthNames: ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'],
monthNamesShort: ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'],
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
dayNamesMin: ['日','月','火','水','木','金','土'],
weekHeader: '週',
dateFormat: 'yy/mm/dd',
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'};
$.datepicker.setDefaults($.datepicker.regional['ja']);
});
$( function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "ja" ] );
} );
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/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.0/jquery-ui.js"> </script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Other solution, you can use the option to change the region of datepicker :
$(function() {
$("#datepicker").datepicker();
$("#datepicker").datepicker("option", $.datepicker.regional["ja"])
});
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
Date: <input id="datepicker" type="text">
Use the "option" to change the region of the datepicker to "ja" and add the following script with your jQuery and jQuery-UI script
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
Here is a working example:
$(function() {
$("#datepicker").datepicker();
$("#datepicker").datepicker("option", $.datepicker.regional["ja"])
});
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
Date: <input id="datepicker" type="text">
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>
I am using date-time picker and datatable in my website.
The datatable don't work if I use date-time-picker at the same time. And if I delete the date-time-picker, the dataTable will work.
Please help me, I am not that good in customizing javascript code.
Here is my code:
<script type="text/javascript" src="http://api2.prodigy.co.id/plugins/jquery/jquery.js"></script>
<link rel="stylesheet" href="plugins/jquery-ui/jquery-ui.css">
<link rel="stylesheet" href="plugins/jquery-ui/jquery-ui-timepicker-addon.css">
<script src="plugins/jquery-ui/jquery-ui.js"></script>
<script src="plugins/jquery-ui/jquery-ui-timepicker-addon.js"></script>
<script>
$(function() {
$( ".datepicker" ).datetimepicker({
dateFormat: "yy-mm-dd"
, timeFormat: "HH:mm:ss"
});
});
$(document).ready(function() {
$('#register_and_login').DataTable();
} );
How can the two will run?.If I put first the datepicker the bxslider will not run and if the bxslider I put first the datepicker wil not run..thanks..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function(){
$( "#datepicker" ).datepicker();
$("#icon").click(function() {
$("#datepicker").datepicker( "show" );
})
});
</script>
<!-- bxslider -->
<link href="bxslider/jquery.bxslider.css" rel="stylesheet" />
<script src="bxslider/jquery.js"></script>
<!-- bxSlider Javascript file -->
<script src="bxslider/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
});
});
</script>
How can the two will run?.If I put first the datepicker the bxslider will not run and if the bxslider I put first the datepicker wil not run..thanks..
You're including jQuery twice. Don't do that; including jQuery a second time will overwrite the jQuery object and any plugins that have been attached to it. Include jQuery only once and then include your plugins.
<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" />
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
$('.datepicker').datepicker({
showOn: 'button',
buttonImage: 'images/dp.png',
buttonImageOnly: true,
});
});
</script>
</body>
Hi I saw a tutorial about creating a datepicker using an image. Ive copied and pasted the exact codes (except for the image path) but the calendar image does not show., can anyone help me please .. :D
here is the code
<HTML>
<HEAD>
<style type="text/css">
body
{
font-size: 10pt;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#txtDate").datepicker({
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'calendar.jpg',
dateFormat: 'dd/mm/yy',
constrainInput: true
});
$(".ui-datepicker-trigger").mouseover(function() {
$(this).css('cursor', 'pointer');
});
});
</script>
</HEAD>
<BODY>
<input type='text' id='txtDate' />
</BODY>
</HTML>
You need to include both jQuery and jQuery UI libraries for this to work
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Ex:
<HTML>
<HEAD>
<style type="text/css">
body {
font-size: 10pt;
}
</style>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#txtDate").datepicker({
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'calendar.jpg',
dateFormat: 'dd/mm/yy',
constrainInput: true
});
$(".ui-datepicker-trigger").mouseover(function() {
$(this).css('cursor', 'pointer');
});
});
</script>
</HEAD>
<BODY>
<input type='text' id='txtDate' />
</BODY>
<HTML>
Demo: Plunker
Add JQuery library and ui like this:
<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.10.3.custom.min.js"></script>
You must include jQuery UI path
Complete working code here
<HTML>
<HEAD>
<style type="text/css">
body
{
font-size: 10pt;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#txtDate").datepicker({
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'calendar.jpg',
dateFormat: 'dd/mm/yy',
constrainInput: true
});
$(".ui-datepicker-trigger").mouseover(function() {
$(this).css('cursor', 'pointer');
});
});
</script>
<head>
<body>
<input type="text" id="txtDate" />
</body>