I have a problem when I would like include a datepicker widget.
I would like do like here : enter link description here.
I download the zip but here : enter link description here
Here my html code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom"></script>
<script src="js/jquery-ui-1.10.4.custom.min"></script>
<script>
$(function () {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
</script>
</head>
<body>
<div><label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
</div>
<br />
<table id="table_campaigns" class="display">
<caption style="font-size:20px">Statistiek 6</caption>
<thead>
</thead>
<tbody>
</tbody>
</table>
<br />
<br />
<table id="table1" class="display">
<thead>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
I have this : SyntaxError: syntax error
Did I download the right zip? What's wrong?
<script src="js/jquery-ui-1.10.4.custom"></script>
<script src="js/jquery-ui-1.10.4.custom.min"></script>
Dont use both, just one of them...
And also you have wrong file name, you are missing .js
From http://api.jqueryui.com/1.8/datepicker/
Additional Notes:
This widget requires some functional CSS, otherwise it won't work.
If you build a custom theme, use the widget's specific CSS file as a starting point.
You should include jquery-ui.css
Related
My date picker is working but I want to add birthday text in the input box. please help
Here is my code:
$(function() {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
});
<div class="inputField half">
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly />
<span class="input-group-addon"><i class="material-icons">date_range</i>
</span>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
If I understand what do you need, You could simply do something like this(just change the value of input):
$(function() {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true,
}).datepicker('update', new Date());
$('#datepicker input').val('birthday: ' + $('#datepicker input').val());
});
then wrap updating input value in some update-callback if you need etc.
https://jsfiddle.net/re9zpu2g/
Hi i have Jquery datepicker with allowed to choose coming 6 days , but need to make it depended on select option for example :
if choose some select option, i want to datepicker let me choose 10 days instead of allowed 6days and e.t.c
did anyone know how to do this ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> -->
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 6d"} ).val();
var date=Number($("#date").val());
$("#date").change(function(){
var date=Number($("#date").val());
$("#datepicker").datepicker("destroy");
if(date===0)
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 6d"} ).val();
else
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 15d"} ).val();
$("#datepicker" ).datepicker("refresh");
console.log(date);
});
$(function() {
$("#datepicker").datepicker().val();
});
});
</script>
</head>
<body>
<select name="da" id="date">
<option value="0">no</option>
<option value="1">yes</option>
</select>
<button id="button">button</button>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
In your maxdate function is 6d defined. Maybe change it to 10d?
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 10d"} ).val();
Will work. Also instead of making a .change, you can call a javascript function by adding an onClick to the radiobuttons and setting it in the function. Reload the datepicker afterwards because else it's still using the old configuration.
For example
<option onClick('changeto5();') value="0">no</option>
<option onClick('changeto10();') value="1">yes</option>
I have the following code in my view:
<input type="text" class="form-control" id="date-from" name="date-from" value="" placeholder="Van" data-class="datepicker" />
I would like to retrieve the value of this field via AJAX for filtering.
The default format for input is mm/dd/yyyy (which i can't change either...)
So I tried getting the results in the format yyyy-mm-dd as i want them.
The following are my lines in javascript, they all return the exact input (mm/dd/yyyy)
alert($('#date-from').datepicker({ format: 'yy-mm-dd' }).val());
alert($('#date-from').datepicker({ format: 'yyyy-mm-dd' }).val());
alert($('#date-from').datepicker({ dateFormat: 'yy-mm-dd' }).val());
alert($('#date-from').datepicker({ dateFormat: 'yyyy-mm-dd' }).val());
Here is an example of a datepicker that outputs in yyyy-mm-dd Does that help?
$(function() {
$('#datepicker').datepicker({
onSelect: function(date) {
alert(date);
},
dateFormat: 'yyyy-mm-dd',
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="datepicker"></div>
Yo can use alt-format http://api.jqueryui.com/datepicker/#option-altFormat
. And then in your ajax call you can read value form hidden field that have date value in your desired format.
$(function(){
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#altdate',
altFormat: 'yy-mm-dd'
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date Field : <input id="datepicker" type="text" /><br />
Alt Hidden Field : <input id="altdate" type="text" /><br />
<input id="thesubmit" type="button" value="Submit" />
Or you can use manually do that by splitting string on the basis of "-" and the reverse it
$(function () {
$("#datepicker").datepicker({
dateFormat: "dd-mm-yy",
});
$("#datepicker").change(function () {
var currentDate = $("#datepicker").val();
console.log("Desired format : ",currentDate.split("-").reverse().join('-'));
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="datepicker" type="text">
<?php include('include_navigation.html');?>
.all code is right and work but when
i have use this code
in my page then date-picker is not working . why it's happen plz tell me Where the
datepicker should appear? and also
when i have remove this code date-picker code is working and i have not getting what
happen so plz tell me what is wrong in here.....
date-picker code here......
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness
/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.datepicker{
}
</style>
<script>
$(function() {
$( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
html code
<tr>
<td>Admission Date</td>
<td height="48">:</td>
<td height="48"><label><input type="text" name="AD_DT" id="AD_DT"
class="datepicker" style="width:80px;" /></label></td>
</tr>
`
Try this code
$(document).ready( function() {
$( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
I want to implement JQuery Datepicker. I added to my JSF code the JavaScript. This is the HTML output:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>DX-57 History Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia.com/images/favicon.ico" />
<link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.8.18.custom.min.js"></script>
<link href="resources/css/jquery-ui-1.8.18.custom.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/tabs.js"></script>
<script type="text/javascript">
$(function(){
// Datepicker
$('#datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
</script><script type="text/javascript" src="/test/javax.faces.resource/jsf.js.jsf?ln=javax.faces&stage=Development"></script></head><body>
<!-- demo inset for with validator -->
<h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ul class="dropdown dropdown-horizontal" style="margin: 0 auto">
<li>Home
<ul>
<li>Dashboard</li>
</ul>
</li>
<li>Sessions
</li>
<li>Application
<ul>
<li>Glassfish</li>
</ul>
</li>
<li>Linux
</li>
<li>Database
<ul>
<li>History</li>
</ul>
</li>
</ul>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;"><img src="resources/images/logo_databasez.png" alt="Demo Insert Form" style="position:relative; top:-20px; left:9px;" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMap" style="width:350px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<form id="j_idt13" name="j_idt13" method="post" action="/test/Database.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt13" value="j_idt13" />
<div id="settingsdiv" style="width:750px; height:400px; position:absolute; background-color:r; top:20px; left:1px"><table>
<tbody>
<tr>
<td>Session ID</td>
<td><input id="j_idt13:sessionid" type="text" name="j_idt13:sessionid" onblur="mojarra.ab(this,event,'blur',0,'j_idt13:sessionidMessage')" /><span id="j_idt13:sessionidMessage"></span></td>
</tr>
<tr>
<td>Date</td>
<td><input id="j_idt13:datepicker" type="text" name="j_idt13:datepicker" /></td>
</tr>
<tr>
<td>Login Time</td>
<td><input id="j_idt13:logintime" type="text" name="j_idt13:logintime" /></td>
</tr>
<tr>
<td>Last Refresh Time</td>
<td><input id="j_idt13:lastrefreshtime" type="text" name="j_idt13:lastrefreshtime" /></td>
</tr>
<tr>
<td>User IP</td>
<td><input id="j_idt13:userip" type="text" name="j_idt13:userip" /></td>
</tr>
</tbody>
</table>
</div>
<div id="settingstwodiv" style="width:150px; height:60px; position:absolute; background-color:transparent; top:380px; left:800px"><input type="submit" name="j_idt13:j_idt32" value="Create User" />
</div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7591771537138283258:6254434046150824528" autocomplete="off" />
</form>
</div>
</div>
</div></body>
</html>
But when I click on the input filed nothing happens. Is there something missing? Into the example that I found the calendar was using <div id="datepicker"></div> to be displayed. I use input field in my example.
Best Wishes
EDIT
I added div to visualize only the calendar.
I added the div here:
<h:panelGrid columns="2">
<h:panelGroup>Session ID</h:panelGroup>
<h:panelGroup>
<h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}"
validator="#{ValidatorController.validatebean}">
<f:ajax event="blur" render="sessionidMessage" />
</h:inputText>
<h:message id="sessionidMessage" for="sessionid" />
</h:panelGroup>
<h:panelGroup>Date</h:panelGroup>
<h:panelGroup>
<div id="datepicker"></div>
<h:inputText id="datepicker" value="#{DatabaseController.formMap['userid']}" >
</h:inputText>
</h:panelGroup>
<h:panelGroup>Login Time</h:panelGroup>
<h:panelGroup>
<h:inputText id="logintime" value="#{DatabaseController.formMap['logintime']}" >
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
</h:panelGroup>
<h:panelGroup>Last Refresh Time</h:panelGroup>
<h:panelGroup>
<h:inputText id="lastrefreshtime" value="#{DatabaseController.formMap['lastrefreshtime']}" >
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
</h:panelGroup>
<h:panelGroup>User IP</h:panelGroup>
<h:panelGroup>
<h:inputText id="userip" value="#{DatabaseController.formMap['userip']}" >
<f:validateLength minimum="0" maximum="15"/>
</h:inputText>
</h:panelGroup>
</h:panelGrid>
I would like to open the calendar like this example here - when I click on the input field.
It seems that there is other way to call the calendar in JSF.
EDIT 2
Is this JavaScript correct?
function calendar(){
// Datepicker
datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
}
I will call it with this code:
<h:inputText onclick="calendar" value="#{DatabaseController.formMap['userid']}" >
datepicker id is missed here. you are calling wrong id . try like this and you used : in your attribute, by using slash
$(function(){
$('#j_idt13\\:datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
You need to make "#datepicker" the ID of the input box.
e.g.
$(function(){
// Datepicker
$('#j_idt13:datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
I'd recomend researching jquery selectors.
HIya Demo http://jsfiddle.net/8Hp26/
your id is different it looks like you are using some kind of template or user controller to generate the html, in the demo I have added a new class = foo or you can try and escape the : in you JQuery.
Note to use escape add \\: but adding class should do the trick like shown in demo.
hope this helps.
code
$(function(){
// Datepicker
// $('#datepicker').datepicker({
$('.foo').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
<script type="text/javascript">
$(function(){
// Datepicker
$('#j_idt13:logintime').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
</script>
Change it to this. Your selector was wrong.
The id of your input field is not datepicker but j_idt13:datepicker.
You have to use this id when calling the datepicker component:
$(function(){
$('#j_idt13\\:datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
The \\ is for escaping the : as it is otherwise used by jQuery.
However I would recommend an using an id without : in it.
This is JSF specific. You have to use styleClass="datepicker" in order to call the #datepicker JS.