Using CrossRider, I want to add a DatePicker to page's DOM, here's my code:
appAPI.ready(function($) {
appAPI.dom.addRemoteCSS('http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css');
appAPI.dom.addRemoteJS('http://code.jquery.com/ui/1.9.2/jquery-ui.js');
$('<input type="text" id="datepicker" />').prependTo($('body'), function(){$( "#datepicker" ).datepicker();});
});
But it didn't work, I also tried
appAPI.ready(function($) {
appAPI.dom.addRemoteCSS('http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css');
appAPI.dom.addRemoteJS('http://code.jquery.com/ui/1.9.2/jquery-ui.js');
$('<input type="text" id="datepicker" />').prependTo($('body'));
$( "#datepicker" ).datepicker();
});
And it didn't work too, and I tried
appAPI.ready(function($) {
appAPI.dom.addRemoteCSS('http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css');
appAPI.dom.addRemoteJS('http://code.jquery.com/ui/1.9.2/jquery-ui.js');
$('<input type="text" id="datepicker" />').prependTo($('body'));
$('<script>$(function(){$("#datepicker").datepicker();});</script>').appendTo('head');
});
But none of them worked, meanwhile if we test this on simple page it will work ?!
For example:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/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>
How to make the datepicker works using CrossRider ?
The easiest way to include jQueryUI is to use Crossrider's native support for jQueryUI via the appAPI.resources.jQueryUI method.
For those who are interested, here's the solution:
appAPI.ready(function($) {
appAPI.resources.includeRemoteJS("http://code.jquery.com/ui/1.9.2/jquery-ui.js") ;
appAPI.dom.addRemoteCSS("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/eggplant/jquery-ui.css");
$('<input type="text" id="dateFrom" />').prependTo($('body'));
$( "#dateFrom" ).datepicker();
});
Related
I am using the input mask jQuery plugin but I am unable to see placeholder text by default but on hover it will be displayed.
$("input[name='birth_year_1']").inputmask("dd/mm/yyyy", {
placeholder: "dd/mm/yyyy"
});
Set the clearMaskOnLostFocus option
$(document).ready(function(){
$("#date").inputmask("99/99/9999",{ "placeholder": "dd/mm/yyyy", clearMaskOnLostFocus: false});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/jquery.inputmask#5.0.6/dist/jquery.inputmask.min.js" type="text/javascript"></script>
</head>
<body>
<input id="date" type="text" value="" />
</body>
</html>
I have this input type date in here and currently, the datepicker will only show once the user clicks the arrow down button in its field. What I want to happen is that, open the datepicker every time the user clicks the input field.
<input type="date" id="date_of_purchase" name="date_of_purchase" class="input-field input-date" placeholder="Inköpsdatum">
from the jQuery UI page for datepicker:
<!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>
EDIT
Creating a datepicker with fall back on jquery
I have this script which uses Datepicker from jqueryui and want to change it to Persian Datepicker
<html lang="en">
<head>
<link rel="stylesheet" href="css/persian.datepicker.css"/>
<script src="js/jquery.js"></script>
<script src="js/persian.date.js"></script>
<script src="js/persian.datepicker.js"></script>
<script src="js/pwt-date.js"></script>
<script src="js/pwt-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".example1").pDatepicker();
});
</script>
</head>
<body>
<input type="text" class="example1" />
</body>
</html>
The above code works fine alone in a html file, but when i try to implement it into the script i'm modifing, then it does not work. Here is the code from the scripts i want to change:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="form-group">
<label class="col-md-3 control-label">News Date :-</label>
<div class="col-md-6">
<input type="text" name="news_date" id="datepicker" value="" class="form-control">
</div>
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Both of the codes above work for them self! I'm going insane here. I can't find a solution for why i can't simply remove the old code and replace it with new.
UPDATE: I added the script... and link to the footer.php and now i have the calender to choose. But when i chose today's date and save, then i want to edit the saved news i get the result on the right hand side!
1 is the calender form add news page, 2 is the calender from edit new page
I want to show datepicker in input box.4 days before This code show datepicker.Now I modified unknownly.I dont know What I changed.Here I attached my code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://www.jscodes.com/codes/calendar_javascript/demo/css/datePicker.css" />
<script src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery.datePicker-min.js" type="text/javascript"></script>
<title>Content Delv Logs</title>
<script type="text/javascript">
$(window).ready(function() {
$('#date-pick').datePicker({clickInput: true});
});
</script>
</head>
<body>
<input type="text" name="date" id="date-pick" value=""/>
</body>
Add this link in your head tag. You are missing jQuery UI library:
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
$(function() {
$( "#datepicker" ).datepicker();
});
<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.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
use jquery UI with alot of functions and more to give;;;
http://jqueryui.com/
http://jqueryui.com/datepicker/
You just need to enable jQuery UI.
Have a look at this JSFiddle
$(function() {
$( "#datepicker" ).datepicker();
});
Please note how jQueryUI is enabled.
Okay, So I'm new to using frameworks and js libraries and I'm wanting to us bootstrap and bootstrap datepicker for a form and I have no clue if I have the file order correct but the links is how the files are setup, and I know very little about javascript, pretty much all I code in is php but I need this for a form.
Here's my testing form for the bootstrap datepicker:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link rel="stylesheet" href="_css/datepicker.css">
<link rel="stylesheet" href="_css/bootstrap.css">
<link rel="stylesheet" href="_css/bootstrap-responsive.css">
<script type="text/javascript" src="datepicker/bootstrap-datepicker.js"></script>
</head>
<body>
<center>
<h1>BootStrap Datepicker</h1>
<form>
<div class="well span12 main">
<input type="text" id="dp1" class="span2 datepicker" placeholder="Date..."
name="date"> <br>
</div>
<input type="submit" value="Search" class="btn">
</form>
</center>
<!-- JAVAscript ----------------------------------------------------------------->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="_js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="_js/bootstrap.js"></script>
</body>
</html>
What exactly am I doing wrong?
You should include bootstrap-datepicker.js after bootstrap.js and you should bind the datepicker to your control.
$(function(){
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
man you can use the basic Bootstrap Datepicker this way:
<!DOCTYPE html>
<head runat="server">
<title>Test Zone</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Css/datepicker.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../Js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#pickyDate').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
and inside body:
<body>
<div id="testDIV">
<div class="container">
<div class="hero-unit">
<input type="text" placeholder="click to show datepicker" id="pickyDate"/>
</div>
</div>
</div>
datepicker.css and bootstrap-datepicker.js you can download from here on the Download button below "About" on the left side.
Hope this help someone, greetings.
I believe you have to reference bootstrap.js before bootstrap-datepicker.js
Just add this below JS file
<script type="text/javascript">
$(document).ready(function () {
$('your input's id or class with # or .').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
Couldn't get bootstrap datepicker to work until I wrap the textbox with position relative element as shown here:
<span style="position: relative">
<input type="text" placeholder="click to show datepicker" id="pickyDate"/>
</span>