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.
Related
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/>
I downloaded everything from this link (version 1.12.1).
After that I unzipped everything. So here's the thing, I have Wampserver downloaded and I'm working on a project in PHP with it. I dragged all of those items to the folder where my other codes are located.
I'm not good at Javascript or jQuery, but I want to use its "draggable" UI to make a moving "button"/image on a horizontal axis (so the person can agree or disagree). So, basically, how do I do that? Here's what I'm trying:
<script src="jQuery UI/jquery-ui.js"></script>
<script src="jQuery UI/jquery-ui.css"></script>
<script src="jQuery UI/jquery-ui.min.js"></script>
<script src="jQuery UI/jquery-ui.min.css"></script>
<script src="jQuery UI/jquery-ui.structure.css"></script>
<script src="jQuery UI/jquery-ui.structure.min.css"></script>
<script src="jQuery UI/jquery-ui.theme.css"></script>
<script src="jQuery UI/jquery-ui.theme.min.css"></script>
<script src="jQuery UI/external/jquery/jquery.js"></script>
<style>
#draggable {
width: 200px;
height: 200px;
padding: 1px;
background-color: green;
}
</style>
<script>
$(function() {
$( "#draggable" ).draggable({
axis: "x";
});
});
</script>
<br>
<div id="draggable" class="ui-widget-content">
<p>Text</p>
</div>
Could you please help by elaborating step-by-step for me?
Thanks in advance!
1.Ace editor is strong but not well documented. I use it as my SQL editor but the autocompletion comes in lower case, I edited the mode-sql.js keywords into uppercase but doesn't work, where I can change this?
2.In the future, I also want to read my db files and generate a list of the dbs, tables and so on and I want them in the autocompletion schema, which part of ace should I concentrate?
Currently I have:
<!DOCTYPE html>
<html>
<body>
<div id="editor" style="height: 500px; width: 800px">hahaha</div>
<div id="commandline" style="position: absolute; bottom: 10px; height: 20px; width: 800px;"></div>
</body>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="src-noconflict/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
var langTools = ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.session.setMode("ace/mode/sql");
editor.setTheme("ace/theme/tomorrow");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
</script>
</html>
I want the calendar to show as soon as I click the input textbox. I searched everywhere but couldn't get any help. I would be really appreciated if you will help me as I am a beginner.
Here is my code:
<link href="CSS_File/StyleSheet.css" rel="stylesheet" />
<link href="CSS_File/pickmeup.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
input.pickmeup({ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>
I've gone through with your code and this library, now the mistake you are making is you are using this library as jQuery plugin, this is not jQuery based plugin, that's why if you want to initialize the calendar with your input then use it like this: pickmeup('input', <optionObj>);,
Also one of your line is not making any kind of sense, as your requirement is to display the calendar when user click on input, and the line of code which you written :
$('.Reservation .demo').pickmeup({ flat: true })
first of all there is no demo class under Reservation dom, and another thing is as per the pickupme framework, if you want to show a calnder on UI (which will replace your UI element with the calander) then you need to initilize it same not as jquery plugin, below example
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
pickmeup('.Reservation',{ flat: true });
});
</script>
This is my asp.net code
<div class="Reservation"></div> <!-- it will replaced as calander on UI -->
BTW, here your Code, which I refined and it is started showing calendar:
Solution:
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
//$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
pickmeup('input',{ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>
I hope this will reach your requirement.. apply css for styles.
<!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>
<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>
I have a javascript and css style as below
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#startDate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#startDate').datepicker();
});
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true
});
});
</script>
<script type="text/javascript">
$(function () {
$('#endDate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#endDate').datepicker();
});
</script>
<script type="text/javascript">
$(function () {
$('#followUpDate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#followUpDate').datepicker();
});
</script>
<style>
.ui-datepicker th { background-color: #CCCCFF; }
</style>
<style type="text/css">
.search_textbx
{
background:url(calendar.jpg) right no-repeat;
background-color:white;
height:13px;
color:black;
}
</style>
Now my question is how to create an external javascript file and css file in eclipse so that i can use that in a jsp page especially in input type = "text".
<td style="padding-left:25px;">
<input type="text" id="startDate" name="startDate" class="search_textbx" size="15" readonly="readonly"/>
</td>
Now i need an external javascript file and css file and i want to use those files in the "input" tag.
Exactly the same way you are loading jquery and jquery-ui. Create a text file, save it as .css and as .js respectively, use a link and script tag to get them in your page.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
ps: you don't have to use a new script tag for each function, you can just merge your three literal script into one <script> tag and one $(function(){});
for good measure, place css files in your head tag and script tags as low in the body tag as you can, unless you need to execute the script earlier.