How to Show jQuery DatePicker on button click?

How to Show jQuery DatePicker on button click? - javascript

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>

Related

jQuery UI Datepicker not displaying year and month drop-down

The jQuery UI date picker is not displaying the year and month drop-down. I am not using any custom CSS, just the jQuery UI CSS. Not sure what is causing this problem. Any help is appreciated.
<script>
$(function() {
$("#id_dob").datepicker({
beforeShow: function(input, inst) {
inst.dpDiv.css({
marginTop: -input.offsetHeight + 'px',
marginLeft: input.offsetWidth + 'px'
});
},
changeMonth: true,
changeYear: true,
});
});
</script>

$(document).ready(function () {
$("#txtdate").datepicker({
changeMonth: true,
changeYear: true,
});
});
<html>
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
Date :
<input id="txtdate" type="text">
</body>
</html>

jQuery daterange picker autoclose false not working

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>

Script Code Conflict

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&#x3e',
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.

jquery script link is bug?

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>

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?

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>

Develop Reference

JavaScript is the programming language of the Web.

How to Show jQuery DatePicker on button click? - javascript

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>

Related

jQuery UI Datepicker not displaying year and month drop-down

jQuery daterange picker autoclose false not working

Script Code Conflict

jquery script link is bug?

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?

Categories

Resources