Create a dynamic Datepicker Jquery - javascript

Is there any way I could create a dynamic data picker like the image given below
This is What I have tried. But I want more interactive date picker. Is there any way I could create I given in the Image. This was not as my staff needed. So, I need some good look date picker for my assignment submit
NaCH.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Design Challenge</title>
<!-- Viewport-->
<meta name="viewport" content="width=device-width" />
<!-- Favicons
<link rel="shortcut icon" href="img\favicon.png" type="image/x-icon"> -->
<!-- Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="js/date.js"></script>
<!-- Custom CSS-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="block2">
<div class="container">
<div class="well"></div>
</div>
</section>
<section id="nach">
<div class="container2" style="margin-top:40px">
<div class="col-md-8 col-md-offset-2">
<table class="table">
<tr class="header">
<td style="padding-left:25px;">Show</td>
<td>
<select>
<option value="" style="display:none;"></option>
<option value="0">KYC <span>COMPLETED</span></option>
<option value="1">MANDATE <span>SENT</span></option>
<option value="2">MANDATE <span>RECEIVED</span></option>
</select>
</td>
</tr>
<tr class="body">
<td >Sl.no</td>
<td style="text-align:left;">Customers</td>
<td>KYC COMPLETED</td>
<td>MANDATE SEND</td>
<td>CLEARED</td>
<td>DISAPPROVED</td>
</tr>
<tr id="calenderdate">
<td>01</td>
<td style="text-align:left;">Ellen <span>De generes</span></td>
<td><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td ><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td class="tick2"><input type="text" id = "datepicker" disabled placeholder="01/02/2016"></td>
<td class="wrong"><input type="text" id = "datepicker" disabled placeholder="01/02/2016"></td>
</tr>
<tr id="calenderdate">
<td>02</td>
<td style="text-align:left;">De generes</td>
<td><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td><input type="text" is-datepicker="1" placeholder="01/02/2016">
<img class="checked" src="img/gear.png" width="10px" height="10px">
</td>
<td class="tick3"><input type = "text" id = "datepicker" disabled placeholder="dd mm yy"></td>
<td class="wrong3"><input type = "text" id = "datepicker" disabled placeholder="dd mm yy"></td>
</tr>
</table>
</div>
</div>
</section>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</body>
</html>

<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
$(function() {
$("[is-datepicker=1]").each(function() {
$(this).datepicker({
showOn:"button",
buttonImage: "img/calendar.png",
buttonImageOnly: true
});
});
});
Here, we're giving an attribute for the inputs is-datepicker and telling the JS code to apply the datepicker function to each of these fields.

Use different id's like datepicker1, datepicker2 for multiple date
$( "#datepicker1" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
});
$( "#datepicker2" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
});
Or use foreach as suggested by Roc Khalil

Related

How can I design multiple buttons in a JSP each onclick, will display different input options

My Requirement Description :: I am designing a webapp in JAVA which interacts with the DB (MySQL) and registers an employee, updates the employee information, query an employee with employee id and removes a record. In the backend I am using Hibernate framework.
So I should have 4 buttons in my webpage :
Add Employee
Update Employee
Remove Employee
Query Employee
On clicking "Add Employee" it should request the user for some info like employee id, name etc. And other 3 buttons should be on hidden mode.
Same case on clicking other buttons also.
My Problem :: I have designed my Webpage, how ever when I am clicking on any of the button, nothing is getting displayed. I am not sure where is the problem.
I have limited knowledge with JSP and CSS.
Please let me know where I am doing wrong and help me out in this situation
Here is my JSP code :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Employee Registration</title>
<style type="text/css">
.ui-jqgrid .ui-jqgrid-bdiv {
overflow-y: scroll;
background: #FBFBFB;
max-height: 220px;
}
</style>
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/js/jquery-ui-1.10.3/css/ui-lightness/jquery-ui-1.10.3.custom.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/js/jqGrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/button.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/design.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jquery.gritter.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jsn.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/main.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/s1.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/s2.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/style.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/somu.css">
<script type="text/javascript" src="/Employee/WebContent/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
function display_ct() {
var strcount
var x = new Date()
var x1 = x.getHours() + ":" + x.getMinutes() + ":" + x.getSeconds();
document.getElementById("time_div").innerHTML = x1;
tt = display_c();
}
function display_c() {
var refresh = 1000; // Refresh rate in milli seconds
mytime = setTimeout('display_ct()', refresh)
}
function showDiv(element){
var type = element.value;
var effect = 'slide';
var options = {direction: "left"};
var duration = 500;
if (type == 'Employee Registration') {
alert("hi");
$('#id_register').show();
$('#id_update').hide();
$('#id_removal').hide();
$('#id_query').hide();
alert("done");
}
else if (type == 'Employee Update'){
$('#id_register').hide();
$('#id_update').show();
$('#id_removal').hide();
$('#id_query').hide();
}
else if (type == 'Employee Removal'){
$('#id_register').hide();
$('#id_update').hide();
$('#id_removal').show();
$('#id_query').hide();
}
else if (type == 'Employee Query'){
$('#id_register').hide();
$('#id_update').hide();
$('#id_removal').hide();
$('#id_query').show();
}
}
</script>
</head>
<body onload=display_ct();>
<div class="Bitmap">
<img src="Images/online-employee-registration.jpg" style="height: 800px; width: 1355px; position: absolute; z-index: -1;" />
</div>
<table width="1300" class="myTable">
<tr class="Labels">
<td align="center" width="800">
<b><font size="12"><label>Welcome to Employee Portal</label></font></b>
</td>
</tr>
</table>
<table width="1300" class="myTable">
<tr class="Labels">
<td align="right" width="200"><span id="time_div" class="clock2"></span></td>
</tr>
</table>
<center>
<form action="EmployeeRegistration" name="UserDetailsContract" method="post"
enctype="multipart/form-data" id="id_userDetailsContract">
<table>
<tr align="center">
<td>
<input value="Employee Registration"
type="button"
onclick="showDiv(this);" />
<input value="Employee Update"
type="button"
onclick="showDiv(this);" />
<input value="Employee Removal"
type="button"
onclick="showDiv(this);" />
<input value="Employee Query"
type="button"
onclick="showDiv(this);" />
</td>
</tr>
</table>
<div id="id_register" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Name:<td><input type="text" name="name"/></tr>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
<tr><td width="20%">Email ID:<td><input type="text" name="emailID"/></tr>
<tr><td width="20%">Phone:<td><input type="text" name="phone" size="30" /></tr>
<tr><td width="20%">City:<td><input type="text" name="city" size="30" /></tr>
</tbody>
</table>
<input type="submit" value="Register" />
</div>
<div id="id_query" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Search" />
</div>
<div id="id_update" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Update" />
</div>
<div id="id_removal" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Remove" />
</div>
<!-- <p /> -->
</form>
</center>
</body>
</html>

Can't get the time picker to grey out the dates in the Past

I have a JSP Page where i want the time picker to grey out the past days and only show the dates from today to furture . i have tried the endDate option but it is not working .
Heres my jsp page
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib prefix="sec"
uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Categories</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href='<c:url value="/static/css/header.css" />'>
<!-- <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-datepicker.de.js" charset="UTF-8"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
th {
text-align:center;
}
#categorySelect {
text-align: center;
}
#categorySelect {
margin: auto;
width: 30%;
}
#123 {
margin: auto;
width: 50%;
}
p {
font:bold;
}
</style>
</head>
<body>
<jsp:include page="../shared/header.jsp">
<jsp:param value="editCategories" name="currentPage" />
</jsp:include>
<div class="row">
<div class="text-center">
<h2>Select Category</h2>
<div class="text-muted">
<h4>Choose a Category to Edit, Update and Schedule Changes</h4>
</div>
</div>
</div>
<div class="form-group" id="categorySelect">
<select class="form-control" id="categoryMenu">
<option value="" disabled selected>Select Category</option>
<c:forEach items="${category}" var="catitem">
<option>${catitem}</option>
</c:forEach>
</select>
</div>
<br></br>
<form class="form-horizontal" role="form" action="updateCategory" method=POST id="form1">
<div class="table-responsive">
<table class="table table-bordered table-striped table-highlight">
<tr>
<th style="width:15%" >Property</th>
<th style="width:40%">Present Value</th>
<th style="width:45%">Edited Value</th>
</tr>
<tr>
<td align="center"><strong>Id</strong></td>
<td><p class="text-danger" id="id1">Id</p></td>
<td><input type="text" class="form-control" id="id" name="id" placeholder="Enter Id" disabled></td>
</tr>
<tr>
<td align="center"><strong>Cat Key</strong></td>
<!-- <td><input type="text" class="form-control" id="catKey1" name="catKey1" placeholder="Enter CatKey" disabled></td> -->
<td><p class="text-danger" id="catKey1">Cat Key</p></td>
<td><input type="text" class="form-control" id="catKey" name="catKey" placeholder="Enter CatKey" disabled></td>
</tr>
<tr>
<td align="center"><strong>Name</strong></td>
<td><p class="text-danger" id="name1">Name</p></td>
<td><input type="text" class="form-control" id="name" name="name" placeholder="Enter Name"></td>
</tr>
<tr>
<td align="center"><strong>Icon</strong></td>
<td><p class="text-danger" id="icon1">Icon</p></td>
<td><input type="text" class="form-control" id="icon" name="icon" placeholder="Enter Icon"></td>
</tr>
<tr>
<td align="center"><strong>Icon White</strong></td>
<td><p class="text-danger" id="iconWhite1">Icon White</p></td>
<td><input type="text" class="form-control" id="iconWhite" name="iconWhite" placeholder="Enter IconWhite"></td>
</tr>
<tr>
<td align="center"><strong>Color</strong></td>
<td><p class="text-danger" id="color1">Color</p></td>
<td><input type="text" class="form-control" id="color" name="color" placeholder="Enter Color"></td>
</tr>
</table>
<p align="center"><strong>Success Messages Of Services Catering The Category</strong></p>
<table class="table table-bordered table-striped table-highlight" id="tab_logic">
<tbody>
<!-- <tr id='addr1'></tr> -->
</tbody>
</table>
<table class="table table-bordered table-striped table-highlight" id="tab_logic">
<tbody>
<tr>
<td> <div class="checkbox" style="text-align:center">
<label><input type="checkbox" value="schedule" id="schedule" name="schedule">Schedule</label>
</div>
</td></tr><tr>
<td align="center"><div class="form-group" style="width:30%">
<div class='input-group date' id='datetimepicker1' >
<input type='text' class="form-control" name="date" id="date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- <div class="checkbox" style="text-align:center">
<label><input type="checkbox" value="schedule" id="schedule">Schedule</label>
</div>
<div class="form-group" style="text-align:center;width:30%">
<div class='input-group date' id='datetimepicker1' style="text-align:center">
<input type='text' class="form-control" style="text-align:center"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div> -->
<table class="table table-bordered table-striped table-highlight">
<tr>
<td colspan="3" align="center">
<div class="form-group">
<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
var t;
$(function() {
jQuery.validator.addMethod("validHex", function(value, element) {
//return str.match(/^#[a-f0-9]{6}$/i) !== null;
if ( value.match(/^#[a-f0-9]{6}$/i) !== null)
return true
else
return false;
});
$('#form1').validate({
rules: {
icon: {
required: true,
url:true
},
color : {
required:true,
validHex: true
}
},
messages: {
icon:{
required: "Can't be empty."
},
color:{
required: "Can't be empty.",
validHex: " Enter valid hex color"
}
}
});
var date = new Date();
var d = new Date();
d.setDate(date.getDate());
$("#datetimepicker1").datetimepicker({
defaultDate: new Date(),
format:'YYYY-MM-DD HH:mm',
endDate: d,
});
$("#categoryMenu").change(function() {
var category = $("#categoryMenu").val();
loadData(category);
loadPosm(t);
var y = $("#id1").text();
loadPosmData(y);
});
});
function loadPosm(num) {
$('#tab_logic').html("<tr id=addr1></tr>");
for (var i =1 ; i<=num ; i++)
{
$('#addr'+i).html("<td align='center' style='width:15%' id='pos"+i+"'><strong>"+ (i+1) +"</strong></td><td style='width:40%'><p class='text-danger' id='posm"+i+"'>"+i+"</p></td><td><input type='text' class='form-control' id='posmi"+i+"' name='posmi"+i+"' placeholder='Enter POSM'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
}
}
function loadPosmData(category_id) {
$.ajax({
type : "GET",
data : {
catId : category_id
},
dataType : 'json',
async : false ,
url : "printPosmDetails",
success : function(data) {
for(var i=1 ;i <=data.length ;i++) {
$("#pos"+i.toString()).html("<strong>"+data[i-1].name+"</strong>");
$("#posm"+i.toString()).html("<strong>"+data[i-1].message+"</strong>");
$("#posmi"+i.toString()).val(data[i-1].message);
}
},
error : function() {
alert("error");
}
});
}
function loadData(category) {
$.ajax({
type : "GET",
data : {
categor : category
},
dataType : 'json',
async : false ,
url : "printCategoryDetails",
success : function(data) {
$("#id1").html("<strong>"+ data.id + "</strong>");
// $("#id").val(data.id);
$("#id").attr('disabled','disabled');
// $("#catKey").val(data.catkey);
$("#catKey1").html("<strong>"+ data.catkey + "</strong>");
$("#catKey").attr('disabled','disabled');
$("#name").val(data.name);
$("#name1").html("<strong>"+ data.name + "</strong>");
$("#icon").val(data.icon);
$("#icon1").html("<strong>"+ data.icon + "</strong>");
$("#iconWhite1").html("<strong>"+ data.icon_white + "</strong>");
$("#iconWhite").val(data.icon_white);
$("#color1").html("<strong>"+ data.color+ "</strong>");
$("#color").val(data.color);
$('#123').html(data.posmNumber);
t=data.posmNumber;
},
error : function() {
alert("error");
}
});
}
</script>
</body>
</html>
Can anyone tell me as to why this is happening .
Add minDate: 0 in your datepicker initialisation code if you want to disable past dates.
$("#datetimepicker1").datetimepicker({
defaultDate: new Date(),
format:'YYYY-MM-DD HH:mm',
endDate: d,
minDate: 0
});

GAS button or input[submit] keeps refreshing page? why?

I've just started a new Google app script and created a simple form with some jQuery behind it to handle the validation, shown below.
But whenever I click on the <button> I created, it just refreshes the page. The same thing happens with a <input type='submit'> button.
Any ideas why this is doing his and how to prevent it?
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- https://developers.google.com/apps-script/add-ons/css -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- this CSS package is for the jquery datepicker -->
<div>
<h1>Use the form below to enter a new entry into the calendar</h1>
<table>
<form>
<tr>
<td>
Title: <input type='input' id='title' />
</td>
<td>
Description:<input type='input' id='description' />
</td>
</tr>
<tr>
<td>
Date: <input type='text' id='date_choice' value="" />
</td>
<td>
<label for="select">Time of day</label>
<select id="select">
<option value='before' >Before School Starts</option>
<option value='morning' selected>Morning</option>
<option value='lunchtime'>Lunchtime / Afternoon</option>
<option value='afterschool'>After School has ended</option>
</select>
</td>
</tr>
<tr>
<td colspan='2' style='text-align: center;'>
<button class="create">Insert</button>
</td>
</tr>
</form>
</table>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#date_choice" ).datepicker({
dateFormat: "dd/mm/yy"
});
$("#create").click(InsertIntoCal);
});
function InsertIntoCal(){
var title = document.getElementById("title").value;
var descr = document.getElementById("description").value;
var date = document.getElementById("date_choice").value;
var time = document.getElementById("select").value;
alert(title); alert(descr); alert(date); alert(time);
}
</script>
You've made a simple HTML / jQuery mistake. Your button has a class, but no unique id:
<button class="create">Insert</button>
^^^^^^^^^^^^^^
...yet you attempt to bind a click() handler to a specific element by id:
$("#create").click(InsertIntoCal);
^^^^^^^
As a result, InsertIntoCal() never gets called.
You want that class for styling, so keep it but add an id like so:
<button class="create" id="insert-entry">Insert</button>
Then modify the binding to use the new id:
$("#insert-entry").click(InsertIntoCal);
You can try it out in the snippet below.
WRT <input type='submit'> - that will not work in Google Apps Script, there's no POST handler waiting for form submissions. Instead, you need to keep extending your InsertIntoCal() handler to use google.script.run to send the form contents to a server-side handler.
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- https://developers.google.com/apps-script/add-ons/css -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- this CSS package is for the jquery datepicker -->
<div>
<h1>Use the form below to enter a new entry into the calendar</h1>
<table>
<form>
<tr>
<td>
Title: <input type='input' id='title' />
</td>
<td>
Description:<input type='input' id='description' />
</td>
</tr>
<tr>
<td>
Date: <input type='text' id='date_choice' value="" />
</td>
<td>
<label for="select">Time of day</label>
<select id="select">
<option value='before' >Before School Starts</option>
<option value='morning' selected>Morning</option>
<option value='lunchtime'>Lunchtime / Afternoon</option>
<option value='afterschool'>After School has ended</option>
</select>
</td>
</tr>
<tr>
<td colspan='2' style='text-align: center;'>
<button class="create" id="insert-entry">Insert</button>
</td>
</tr>
</form>
</table>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#date_choice" ).datepicker({
dateFormat: "dd/mm/yy"
});
$("#insert-entry").click(InsertIntoCal);
});
function InsertIntoCal(){
var title = document.getElementById("title").value;
var descr = document.getElementById("description").value;
var date = document.getElementById("date_choice").value;
var time = document.getElementById("select").value;
alert(title); alert(descr); alert(date); alert(time);
}
</script>
For the refresh, try to get the button outside of the form tags.

Multiple controls using the same javascript

I have a jquery calendar wherein there are js files stored in Calendar folder.When i select the date, the date is inserted into a textbox.It is working fine.But i have another textbox and i want to use the same script and function for that box too.I am new to jquery so help me out with this one.
Here is the scripting :
<head>
<meta charset="utf-8">
<link href="Calendar/jquery-ui.theme.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Calendar/jquery-ui.js"></script>
<link href="Calendar/jquery-ui.css" rel="stylesheet" />
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<tr>
<td class="unmaintable1">Registeration starts : </td>
<td class="unmaintable2"><input type="text" id="datepicker"/></td>
<td class="unmaintable3">Registeration ends :
<input type="text" id="datepicker0"/></td>
<td class="unmaintable4"> </td>
</tr>
I know this has something to do with the id but i am not sure how to solve this.Thanks in advance.
$("#datepicker, #datepicker0").datepicker();
Or you could give both elements the same class name and use that:
<input type="text" id="datepicker" class="datepicker"/>
<input type="text" id="datepicker0" class="datepicker"/>
$(".datepicker").datepicker();
Instead of id you can use css class Try this code
<head>
<meta charset="utf-8">
<link href="Calendar/jquery-ui.theme.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Calendar/jquery-ui.js"></script>
<link href="Calendar/jquery-ui.css" rel="stylesheet" />
<script>
$(function () {
$(".datepicker").datepicker();
});
</script>
</head>
<body>
<tr>
<td class="unmaintable1">Registeration starts : </td>
<td class="unmaintable2"><input type="text" class="datepicker" id="datepicker"/></td>
<td class="unmaintable3">Registeration ends :
<input type="text" class="datepicker" id="datepicker0"/></td>
<td class="unmaintable4"> </td>
</tr>
Assign same css class to both these textboxes and call attach datepicker by using class selector. Example:
<head>
<meta charset="utf-8">
<link href="Calendar/jquery-ui.theme.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Calendar/jquery-ui.js"></script>
<link href="Calendar/jquery-ui.css" rel="stylesheet" />
<script>
$(function () {
$(".date-picker").datepicker();
});
</script>
</head>
<body>
<tr>
<td class="unmaintable1">Registeration starts : </td>
<td class="unmaintable2"><input class="date-picker" type="text" id="datepicker"/></td>
<td class="unmaintable3">Registeration ends :
<input class="date-picker" type="text" id="datepicker0"/></td>
<td class="unmaintable4"> </td>
</tr>
you can use like if you don't want to use same class for all
$("input[id^=datepicker]").datepicker();
Or
<input type="text" id="datepicker" name="datepicker"/>
<input type="text" id="datepicker0" name="datepicker0"/>
$(function() {
$("input[name^=datepicker]").datepicker();
});

HighCharts is conflicting with jquery datepicker

I Had a working PHP page where the datepicker script from jquery would work with no issues. I decided to include HighCharts into the same page. As soon as I do, the datepicker stops working. If I remove highcharts the datepicker starts to work no issues. I tried putting noconflict for the datepicker and that did not work. Does anybody know how to have the jquery datepicker work with highcharts?
<link rel="stylesheet" href="../../style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../style/menustyle.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../scripts/datepicker/jquery-ui.css" />
<script src="../../scripts/datepicker/jquery-1.9.1.js"></script>
<script src="../../scripts/datepicker/jquery-ui.js"></script>
<style>
.auto-style1 {
font-family: "Lucida Calligraphy";
text-align:center;
}
</style>
<script>
$(function() {
$( "#Date1" ).datepicker({
changeMonth: true,
changeYear: true
});
});
$(function() {
$( "#Date2" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body style="color: #black; background-color: #0000FF;">
<div align="center"id="MainWrapper" style="width: 90%">
<div id="Maincontainer" style="width:100%">
<div id="PageHeader">
<?php include_once("../../template/template_header.php");?>
</div>
<div id="leftcolumn">
<?php include_once("../../template/menu.php"); ?>
</div>
<div id="content" style="background-color:#EEEEEE;height:auto;width:70%;float:left;">
<h2 class="auto-style1">Call Exception Tracker - Reporting Portal</h2>
<form name="reportform" method="post">
<table class="auto-style1" width="100%">
<tr>
<td style="height: 30px; width: 231px;" valign="bottom">From <input name="Date1" id="Date1" type="text" /></td>
<td style="height: 30px; width: 193px" valign="bottom">to <input name="Date2" id="Date2" type="text" /></td>
</td>
</tr>
</table>
</form>
<br />
<div id="container" align="center" width="99%">
<?php include_once("pie.php"); ?> //This is where HighCharts comes in
</div>
<div id="info"></div>
</div>
<div id="PageFooter">
<?php include_once("../../template/template_footer.php");?>
</div>
</div>
</div>
</body>

Categories