Hiding jquery datepicker when clicking on button - javascript

I have a jquery datepicker and the problem I'm having is I want to be able to toggle the datepicker to open and close when the button/textfield is clicked, but right now I have to either select a day or click outside of the calendar (somewhere on the screen) to close the datepicker. I want to open and close it by pressing and pressing again (toggle) on the same button to open and close it.
FYI - I know there's a hide method for datepicker but not sure if that will work here
Here is link to the Fiddle and some code below
$('#date1').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "m/d/yy"
});
#ui-datepicker-div { font-size: 12px; }
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>

Try:
$('#date1').click(function(e) {
if ($(this).data('count')) { // toggle
if ($('#ui-datepicker-div').is(':visible')){
$('#date1').datepicker('hide');
} else {
$('#date1').datepicker('show');
}
} else { // first click
$(this).data('count', 1);
}
});
$('#date1').blur(function() {
$(this).data('count', '')
});
$('#date1').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "m/d/yy"
});
#ui-datepicker-div {
font-size: 12px;
position: relative !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>

Related

JQuery datepicker on click on label

I want a JQuery datepicker to show when I click on a specific label. I have a HTML like this:
<label id="kezd_datum_label">Data</label><input style="display:none;" id="kezd_datum" />
And some following JQueries like these:
$( function() {
$( "#kezd_datum" ).datepicker({
dateFormat:"yy-mm-dd"
});
} );
$("#kezd_datum_label").click(function() {
$("#kezd_datum").datepicker("show");
});
And
$(document).ready(function() {
$( "#kezd_datum" ).datepicker({
dateFormat:"yy-mm-dd"
});
$("#kezd_datum_label").click(function() {
$("#kezd_datum").focus();
});
});
I tried to copy the codes from here jQuery datepicker on click of icon, and it was accepted and everyone says it works, but it does not for some reason. However, if I make input visible, the datepicker appears as it should. Just not if I click on that label.
If a put in a window.alert("something"); into any of the click functions, they also run and appear.
Try to replace display: none to opacity: 0;width: 0 to show the input and use for to point to your input.
$(document).ready(function() {
$("#kezd_datum").datepicker();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<label for="kezd_datum" id="kezd_datum_label">Data</label><input style="opacity: 0; width: 0" id="kezd_datum" />
Well, I just want to clarify why your previous code was not working and how to make it work.
You're doing $("#kezd_datum").focus(); while you div is hidden. So you can't focus on a hidden element. And showing datapicker for that element again. As a result you got nothing.
You just need to show it first and then show the datapicker and this would work
Cheers!
$(document).ready(function() {
$( "#kezd_datum" ).datepicker({
dateFormat:"yy-mm-dd"
});
});
$( function() {
$( "#kezd_datum" ).datepicker({
dateFormat:"yy-mm-dd"
});
} );
$("#kezd_datum_label").click(function() {
$("#kezd_datum").show().focus();
setTimeout(()=>{
$("#kezd_datum").datepicker("show");
},20)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" />
<label id="kezd_datum_label">Data</label><input style="display:none;" id="kezd_datum" />

Date picker modal scrolls down the page

I am using Material Design and using its date picker. When date picker pops out, the page scrolls down. How can I load the date picker modal without the page scrolling down?
<input id="client-edit-birth-date" type="text" class="datepicker validate">
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year,
container: 'body'
});
I had the same problem and resolved it by setting container to html.
...
container: 'html',
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
demo http://jsfiddle.net/DBpJe/5106/
I do it by utilizing beforeShow function of datepicker:
$('.datepicker').datepicker({
...
beforeShow: function(input, inst)
{
inst.dpDiv.css({position: 'absolute'});
}
...
});
There you can set the position of datepicker's dialog. You have to experiment to find out what kind of css parameters would more suitable in you case/page layout.

jquery open calendar to specific month

On click of textbox, a calendar opens with current month. I want to open the calendar to specific date.Currently, the calendar opens opens to current month view. Can some one please help me with this? Thanks!
Select Date: <input type="text" id="datepicker"/>
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
onSelect: function (date, inst) {
//MyLogic
}
});
You can use the defaultDate option to open to a specific date. Let's assume you want it to open to July 1st, 2014:
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
defaultDate: new Date(2014, 6, 1)
onSelect: function (date, inst) {
//MyLogic
}
});
The format for date is year/month/day. Note: for the month, it is month - 1. So January (1st month) would be 0 and February (2nd month) would be 1.
Alternatively, you can also specify the same date like so:
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
defaultDate: new Date('1 July 2014')
onSelect: function (date, inst) {
//MyLogic
}
});
You can also define the defaultDate like so:
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
defaultDate: new Date('7/1/2014')
onSelect: function (date, inst) {
//MyLogic
}
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<script>
$(document).ready(function(){
$(function() {
$( "#datepicker" ).datepicker({
defaultDate: '-2m'
});
});
});
</script>
</body>
</html>

jquery UI datepicker is not showing up on html input text

The above input text or label doesn't seem to show the jQuery UI datepicker when click on either of it. I tried different combinations of solutions found here in SO and online. Not sure why none are working.
Html code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<label class="tmDtpicker">
<input id="dtinput" class="hasDatepicker" type="text" name="Start" placeholder='10/05/2014' data-constraints="#NotEmpty #Required #Date" />
</label>
CSS code:
.tmDtpicker #dtinput {
position: relative;
cursor: pointer;
width: 130px;
margin-bottom: -2px;
}
.tmDtpicker:after {
content:'\f073';
position: absolute;
z-index: 4;
cursor: text;
}
js code:
</body>
//other scripts
<script>
$(document).ready(
function () {
$("#dtinput").datepicker({ showWeek: true, firstDay :1,
showOtherMonths: true,
selectOtherMonths: true,
minDate: '0d', dateFormat: "dd-mm-yy"
});
}
);
</script>
You have included 2 jquery-ui.
...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
...
Remove the first one.
...
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
...
For a side note, always include jQuery first then other libraries like jqueryUI
Update
Remove class="hasDatepicker" from the input.

How to Prevent to open a Keyboard on input text in intel XDK?

Hi Friends I am new with intel XDK.
My Code :-
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script>
$(function() {
$( "#txt_date" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<input type="text" name="text-date" id="txt_date" value="" readonly="true" >
</body>
</html>
I Tried also read only property of input text but I could not solved My problem.
Problem :
Here My problem is that when I click on input text then I get fine Jquery Datepicker.But with Datepicker I also get Keyboard on my mobile device.So if somebody have solution of this problem so please help me.
Thanks in Advance!!
I think you should go this way:
$(function() {
$("#txt_date").keypress(function(event) {
event.preventDefault();
});
$( "#txt_date" ).datepicker({
changeMonth: true,
changeYear: true
});
});

Categories