I would like to display the datepicker when i click on the button. I have tried but i couldn't make it work. I am using Materialize Css. I have tried to use input type text but i don't want it.
<div class="container">
<div class="row center">
<i>Date</i>
<button class="btn waves-effect waves-light datepicker" type="submit" name="action">PICK DATE</button>
</div>
</div>
jQuery:
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15
});
In order to show the datepicker from a button, you need to invoke the show option.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jDatapicker JQuery</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
function show_dp(){
$( "#datepicker" ).datepicker('show'); //Show on click of button
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<button onclick="show_dp();">Show Datepicker</button>
</body>
</html>
Another option to make it so you don't need an input field:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jDatapicker JQuery</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
function toggle_dp() {
dp = $("#datepicker");
if (dp.attr('datepicker')) {
dp.datepicker('destroy');
dp.removeAttr('datepicker');
} else {
dp.datepicker();
dp.attr('datepicker', 1);
}
}
</script>
</head>
<body>
<div id="datepicker"></div>
<button id="button" onclick="toggle_dp();">Toggle Datepicker</button>
</body>
</html>
I think a better way is to only show the picker when the button is clicked and not when the input is clicked. This enables the user to edit the input manually as well.
My trick is to use a hidden input to connect the picker to:
<div class="input-field datepicker-prefix">
<i class="material-icons prefix">perm_contact_calendar</i>
<input type="hidden" class="datepicker" />
<input />
</div>
And then setup the click even to show the picker:
$('.datepicker-prefix .prefix').click(function () {
$(this).parent().find('.datepicker').datepicker('open');
});
See my complete solution for both date and time pickers
https://codepen.io/dnote/pen/jXQNpg?editors=1010#0
You can use this code created by me
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jDatapicker JQuery</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Related
I use this plugin https://github.com/Mds92/MD.BootstrapPersianDateTimePicker
I tried every options. enableTimePicker, targetTextSelector, etc. 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Persian DateTime</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../Content/bootstrap-theme.min.css" />
<link rel="stylesheet" href="../Content/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.css" />
<script src="../Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container" style="max-width: 400px;">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="fromDate1" placeholder="از تاریخ"/>
</div>
</div>
<script src="../Scripts/MdBootstrapPersianDateTimePicker/jalaali.js" type="text/javascript"></script>
<script src="../Scripts/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.js" type="text/javascript"></script>
<script>
$('input').MdPersianDateTimePicker({
isGregorian: true,
enableTimePicker: true,
});
</script>
</body>
</html>
I would like to create a simple web page, where user can select a picture by choosing date in datepicker. The picture filenames consist date string. For example: img-2018-06-24.png. So far, I could get work this datepicker example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<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>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
//selecting the button and adding a click event
$("#alert").click(function() {
//alerting the value inside the textbox
var date = $("#datepicker").datepicker("getDate");
alert($.datepicker.formatDate("dd-mm-yy", date));
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<p>Alert the value: <button id="alert">Alert!</button>
</body>
</html>
which popups the selected date after clicking on the button. Instead, I would like to put a picture according to selected date. So, I need to somehow pass the date to filename string and use it in :
<img src= filename alt="myimage">
But, so far no luck...
Does following code work?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<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>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
//selecting the button and adding a click event
$("#alert").click(function() {
//alerting the value inside the textbox
var date = $("#datepicker").datepicker("getDate");
if(date) {
var imgSrc = 'img-' + $.datepicker.formatDate("dd-mm-yy", date) + '.png';
$('#show-image').show().attr('src', imgSrc);
}
});
});
</script>
</head>
<body>
<img src='' alt="myimage" id="show-image" style="display:none;">
<p>Date: <input type="text" id="datepicker"></p>
<p>Alert the value: <button id="alert">Alert!</button>
</body>
</html>
You need to set src attribute of img inside the click event like this -
$("img").attr("src",$.datepicker.formatDate("dd-mm-yy", date));
If you want to change the alt attribute as well, you can do it the same way -
$("img").attr("alt",$.datepicker.formatDate("dd-mm-yy", date));
See working Fiddle
This how you can add src on image
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<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>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker(); //selecting the button and adding a click event
$("#alert").click(function() { //alerting the value inside the textbox
var date = $("#datepicker").datepicker("getDate");
alert($.datepicker.formatDate("dd-mm-yy", date));
var src= $.datepicker.formatDate("dd-mm-yy", date);
$("#image").attr("src",src+".jpg").show();
});
});
</script> </head> <body>
<img id="img" src="" style="display:none;">
<p>Date: <input type="text" id="datepicker"></p> <p>Alert the value: <button id="alert">Alert!</button> </body> </html>
i am new to bootstrap, i am trying to implement bootstrap date picker, but somehow it is not happening. Can you please check which code of mine is going wrong. below is my .html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</body>
</html>
i think you are missing the DateTimepicker scripts please include this scripts
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
and you can just go through the demo http://code.runnable.com/UmOlOZbXvZRqAABU/bootstrap-datepicker-example-text-input-with-specifying-date-format2
somehow i got the work around.. but still it has some issues with time, if anyone has a better solution please post it
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</body>
</html>
Change this:
$(function () {
$('#datetimepicker1').datetimepicker();
});
to this:
jQuery(function($) {
$('#datetimepicker1').datetimepicker();
});
Reason:
Many JavaScript libraries use $ as a function or variable name, just as jQuery does.
In order to avoid conflicts, you need to specify the library alias of $ which in jQuery's case, $ is just an alias for jQuery.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
My code is not working .when i click my input box that time the onclick calender not appear.I think there may be use onclick() function .But i can not . Please help me. :(
Here is a basic example and look at the script needed include both jQuery and jQuery-ui. (source: http://www.tutorialspoint.com/jqueryui/jqueryui_datepicker.htm)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-13" ).datepicker();
$( "#datepicker-13" ).datepicker("show");
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-13"></p>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" type="text/javascript"></script>-->
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
My date picker works if I comment out the ajax.google line. I thought the date picker is part of the jquery UI. what am I doing wrong or missing?
I obviously can't tell what's in your local jQuery files, but Google's copy of 1.8.18 works just fine:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<div class="demo">
<input type="text" id="datepicker">
</div>
http://jsfiddle.net/eqd4x1rq/2/