I add this javascript code to select date and time.But it doesn't work. Can anybody help me?
<div class="input-append date form_datetime">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
autoclose: true,
todayBtn: true,
pickerPosition: "bottom-left"
});
</script>
Have you included the required js files?
<!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>
Feeding an internet search engine with the the property names in your code suggests you are using Bootstrap Datepicker by Sebastien Malot. More specifically, it's a verbatim copy of the Positionning example in the plug-in site.
To figure out what's going wrong you first need to check the browser console (not sure what your browser is but you can try F12). Since it's an exact copy of the sample code you'll most likely didn't care downloading it.
Apparently, the plugin author forgot to document the installation process as well as the dependencies. It seems it requires jQuery and, having a Bootstrap on its name, it may also need Twitter Bootstrap.
Related
I want to be able to set the initial date for the JavaScript date picker widget I'm using by taking the value from the input field.
The input field is accepting values of "YYYY-MM-DD", would like this value passed to the date picker I'm using and to pop up with the date.
<input id="date" type="text" name="date" placeholder="YYYY-MM-DD" />
...
$A.bind(window, 'load', function(){
// Syntax : setCalendar( ID , TriggeringElement , TargetEditField , EnableComments , clickHandler , config )
$A.setCalendar('UniqueCalendarId', $A.getEl('dateIcon'), $A.getEl('date'), false, undefined, {
// Allow a date that isn't today to be set as the initial date. If unset, this value is initialized to today's date
initialDate: new Date(),
});
If you want to grab the current date as part of a "date-picker" process, I would go with the HTML5:
<input id="date" type="date">
Which can be demonstrated here:
<form>
<input id="date" type="date">
</form>
Even though older browsers don't support this feature, I believe it's limited to IE only at this point. And it gracefully degrades to type="text" on non-supporting browsers, but then, the date will have to manually be entered.
Alternatively, MDN provides some great examples here of how to integrate with JS as a fallback for the HTML input type. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
If you absolutely want to stay "scripty", I recommend jQuery datepicker UI.
Where you could perform the same task as such:
<!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">
<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>
Give it a shot.
im new to javascript and Jquery and i just cant seem to get this working. I believe the problem in specific is the reference to the jquery files thats not working but i could be wrong. Below is the relavent code.
<head runat="server">
<title>Expense Report Admin Portal</title>
<link rel="stylesheet" type="text/css" href="Content/admin.css" />
<%--<script type="text/javascript" src="Scripts/jquery-ui-1.11.4/jquery-ui.js"></script>--%>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script>
$(function() {
$( '#<%=datepicker.ClientID%>' ).datepicker();
});
</script>
</head>
<asp:TableCell>
<asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
</asp:TableCell>
I was right, there was something wrong with the jquery references. I took Igor's advice above, and while i didnt copy ALL the code, i did replace all my references to jquery with the one in the example and it worked.
i think you comment jquery reference. uncomment this line. the belwo example work for me.
include => jquery-ui.css
include => jquery-1.10.2.js include =>
jquery-ui.js
<!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();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
i'm using sublime text 3 and i've tested other jQuery UI elements but decided to try using date picker today with a small project i'm putting together. I notice that when I wanted to try it out I first saved the default code from the example on jQuery's site locally in it's own .html file, then I tried to load it up.
default code from example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date:
<input type="text" id="datepicker">
</p>
</body>
</html>
unfortunately, this brings up an input field but, on clicking into the field, i get no ability to select a date. In fact the date selection dropdown doesn't show up at all but I can tell that the input field has been selected. I thought perhaps I had left something out when copying the code over to my test file so I loaded up JSBin and pasted the code there. Magically, it works. JSBin exampleI'm assuming i'm somehow not linking to the appropriate style sheet or the CDN for the jQuery UI. Is that assumption correct or why isn't this working locally?
<!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>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
P.S- I have removed link to css file as it might have been your local css file. You can add that back.
I trying to validate a text field whether the entered input type is in date pattern or not. I seen this and this but no result. So I want to get calender on button click and fill text filed with selected date. How to validate this?
Thanks in advance..
Its working for me try this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
I'm trying to implement the jQuery UI Date Picker with the Time Picker addon (http://trentrichardson.com/examples/timepicker/).
I have the js and css saved in the same directory as my script as timpicker.js and picker.css respectively.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="picker.css" />
<script src="timepicker.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$('#from').datetimepicker();
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from" />
</body>
</html>
Firebug keeps giving me these errors:
ReferenceError: jQuery is not defined
[Break On This Error]
})(jQuery);
datetimepicker.js (line 1919)
TypeError: $(...).datetimepicker is not a function
[Break On This Error]
$('#from').datetimepicker();
Has anyone else come across this problem. I'm sure I'm missing something simple, but I have been unable to find anyone with the same problem.
Thank you
You are loading the timepicker.js before you load jQuery. Your page is trying to run timepicker.js and doesn't know anything about jQuery. Rearrange your scripts like:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="timepicker.js"></script>