I have searched for this error, in the context of jQuery and data tables, and none of the suggestions worked (in case this is marked duplicate immediately!)
I have .Net project (C#) and in master page I have references to jQuery, Datatables and date picker (among other things):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link href="assets/themes/base/jquery.ui.all.css" rel="stylesheet" />
In a page that uses the the master page I have a datatable and date pciker. I also try to set the modal pop up's title to be draggable. Using any of them causes "Object does not support property or method xxxx" error, where xxxx can be "draggable", "dataTable" or "datepicker".
I can't see why I get the errors when I am referencing jQuery. I even tried the ".noConflict" approach but it did't help either.
<script>
function pageLoad() {
$('#tbStartDate').unbind();
$("#tbStartDate").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
showOn: "button",
buttonImage: "../assets/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select Statrt Date",
option: "mm/dd/yy",
onSelect: function (dateStr) {
$("#tbEndDate").val(dateStr);
$("#tbEndDate").datepicker("option", { minDate: new Date(dateStr) })
}
});
}
</script>
or
<script>
$(document).ready(function () {
var j$ = jQuery.noConflict();
j$(".modal-dialog").draggable({
handle: ".modal-header"
});
})
</script>
Try...
$(window).load(function(){
})
instead of document.ready.
In the "Scripts" folder of the project, I had jquery-1.10.2.js and jquery-1.10.2.min.js while in my master page I was referencing jQuery 1.12.4. Once I removed the 1.10 scripts from"Scripts" folder, the error went away.
Thank you nitsram and Brahma for taking time and responding; I up-voted your responses.
How would you change the date result format to be MM-DD-YY rather than MM/DD/YY in my code below?
<script>
$( function() {
$( "#input5" ).datepicker();
} );
</script>
I found this but I am not able to make it work with my code although I assume I am just doing something wrong :(
How to change date format (MM/DD/YY) to (YYYY-MM-DD) in date picker
As per the documentation, you should use this way:
$( function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker( "option", "dateFormat", "mm-dd-yy" );
} );
You can use the Bootstrap Datepicker library and set the format to 'mm-dd-yy' like this format: 'mm-dd-yy'.
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css">
<script>
$( document ).ready(function() {
$("#from-datepicker").datepicker({
format: 'mm-dd-yy'
});
$("#from-datepicker").on("change", function () {
var fromdate = $(this).val();
alert(fromdate);
});
});
</script>
<input type="text" id="from-datepicker"/>
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.
I have a date-picker in JavaScript as:-
<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>
Now I want the user to select date which are less than today i.e. to select any dates which are previous or before from today.how to apply such validation on date?
Date picker has maxDate property which will enable us to set the maximum date. As per your requirement the date must be previous from today. Then it will be like this
$(function() {
$( "#datepicker" ).datepicker({ maxDate: -1 });
});
<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({ maxDate: -1 });
});
</script>
<input type='text' id='datepicker'>
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>