This is my jsp page and in that i am using date picker but instead of range from two date picker i just want to use week .if i have select start date and then i have to write no of weeks and then how can i calculate the end date on basis of that no of weeks and start date?
i m new in this jquery so any one can help me out?
<%@page import="com.liferay.portal.model.Role"%>
<%@page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@page import="com.liferay.portal.util.PortalUtil"%>
<%@page import="com.liferay.portal.model.Organization"%>
<%@ include file="/init.jsp"%>
<script src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/south-street/ui.all.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.validate.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.ui.datepicker.validation.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.validate.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.ui.datepicker.validation.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/lib/datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/lib/chosen/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#validBeforeDatepicker, #validAfterDatepicker').datepicker();
$('#validateForm').validate({
rules:{
startDate:{
required: true,
dpDate: true
}
}
});
});
</script>
<script type="text/javascript">
function newcamp(addToDo){
var camp_name =document.getElementById('camp_name').value;
var camp_description =document.getElementById('camp_description').value;
var weeks =document.getElementById('weeks').value;
////make new array to push all the selected value of restId from multi select box
var rest_list = new Array();
var mySelectrest = document.getElementById('rest_id');
while (mySelectrest.selectedIndex != -1) {
rest_list.push(mySelectrest.options[mySelectrest.selectedIndex].value);
mySelectrest.options[mySelectrest.selectedIndex].selected = false;
}
var str = "";
for ( var i = 0; i < rest_list.length; i++) {
str = str + rest_list[i];
if (i < rest_list.length - 1)
str = str + "-";
}
////make new array to push all the selected value of Standbyadlist from multi select box
var standbyad_list = new Array();
var mySelectstandbyad = document.getElementById('selectstandbyad');
while (mySelectstandbyad.selectedIndex != -1) {
standbyad_list.push(mySelectstandbyad.options[mySelectstandbyad.selectedIndex].value);
mySelectstandbyad.options[mySelectstandbyad.selectedIndex].selected = false;
}
var standbyad_str = "";
for ( var i = 0; i < standbyad_list.length; i++) {
standbyad_str = standbyad_str + standbyad_list[i];
if (i < standbyad_list.length - 1)
standbyad_str = standbyad_str + "-";
}
////make new array to push all the selected value of slideradlist from multi select box
var sliderad_list = new Array();
var mySelectsliderad = document.getElementById('selectsliderad');
while (mySelectsliderad.selectedIndex != -1) {
sliderad_list.push(mySelectsliderad.options[mySelectsliderad.selectedIndex].value);
mySelectsliderad.options[mySelectsliderad.selectedIndex].selected = false;
}
var sliderad_str = "";
for ( var i = 0; i < sliderad_list.length; i++) {
sliderad_str = sliderad_str + sliderad_list[i];
if (i < sliderad_list.length - 1)
sliderad_str = sliderad_str + "-";
}
////make new array to push all the selected value of eventbaseadlist from multi select box
var eventbasead_list = new Array();
var mySelecteventbasead = document.getElementById('selecteventbasead');
while (mySelecteventbasead.selectedIndex != -1) {
eventbasead_list.push(mySelecteventbasead.options[mySelecteventbasead.selectedIndex].value);
mySelecteventbasead.options[mySelecteventbasead.selectedIndex].selected = false;
}
var eventbasead_str = "";
for ( var i = 0; i < eventbasead_list.length; i++) {
eventbasead_str = eventbasead_str + eventbasead_list[i];
if (i < eventbasead_list.length - 1)
eventbasead_str = eventbasead_str + "-";
}
////make new array to push all the selected value of homescreenadlist from multi select box
var homescreenad_list = new Array();
var mySelecthomescreenad = document.getElementById('selecthomescreenad');
while (mySelecthomescreenad.selectedIndex != -1) {
homescreenad_list.push(mySelecthomescreenad.options[mySelecthomescreenad.selectedIndex].value);
mySelecthomescreenad.options[mySelecthomescreenad.selectedIndex].selected = false;
}
var homescreenad_str = "";
for ( var i = 0; i < homescreenad_list.length; i++) {
homescreenad_str = homescreenad_str + homescreenad_list[i];
if (i < homescreenad_list.length - 1)
homescreenad_str = homescreenad_str + "-";
}
$.ajax({
url : addToDo,
data : {
"camp_name" : camp_name,
"camp_description" : camp_description,
"weeks" : weeks,
"rest_list" : str,
"standbyad_adlist":standbyad_str ,
"sliderad_adlist":sliderad_str ,
"eventbasead_adlist": eventbasead_str,
"homescreenad_adlist": homescreenad_str,
"CMD" : "addToDo"
},
type : "POST",
timeout : 20000,
dataType : "text",
success : function(data) {
showMsg(data,'Campaign',1);
}
});
}
</script>
<%
String Role_name=null;
boolean flag=false; ///advertiser if flag is false else Reseller
long org_id_camp=0;
List<Role> role_list=themeDisplay.getUser().getRoles();
for(Role role_name:role_list){
if(role_name.getName().equals("Reseller")){
flag=true;
Role_name=role_name.getName();
break;
}
}if(!flag){
Role_name="Advertiser";
}
//Get Common Advertise List
List<advertise> adv_list;
if(flag)
{
adv_list = advertiseLocalServiceUtil.getAllAdvertiseByOrganizations(themeDisplay);
System.out.print("Reseller ad count " + adv_list.size());
}
else
{
adv_list = advertiseLocalServiceUtil.getAllAdvertiseByOrganizationId(themeDisplay);
System.out.print("Advertiser ad count " + adv_list.size());
}
//Get Banner Advertise List
List<advertise> banner_adv_list;
if(flag)
{
banner_adv_list = advertiseLocalServiceUtil.GetBannerAdvByOrganizations(themeDisplay);
System.out.print("Reseller banner_adv_list count " + adv_list.size() + "--------");
}
else
{
banner_adv_list = advertiseLocalServiceUtil.GetBannerAdvByOrganization(themeDisplay);
System.out.print("Advertiser banner_adv_list count " + adv_list.size() + "--------");
}
%>
<nav>
<div id="jCrumbs" class="breadCrumb module">
<ul>
<li><a href="#"><i class="icon-home"></i></a></li>
<li><a href="#"><%=Role_name %></a></li>
<li>Create Campaign</li>
</ul>
</div>
</nav>
<div class="span10">
<h3 class="heading">Create Campaign</h3>
<portlet:actionURL var="adCampaignURL" name="addCampaign"></portlet:actionURL>
<portlet:resourceURL var="addToDo" id="addToDo_camp"></portlet:resourceURL>
<div id="toDoList">
<div class="row-fluid">
<div class="span12">
<label>Campaign Name <span class="f_req">*</span></label> <input
type="text" name="camp_name" id="camp_name" class="span8" /> <span
id="restError" style="color: #C62626;" class="help-block"></span>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<label>Campaign Description </label>
<textarea name="camp_description" id="camp_description" cols="10"
rows="3" class="span8"></textarea>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<!-- <label>Start Date <span class="f_req">*</span></label>
<input type="text" name="start_date" id="start_date" class="span8" id="dp1" />
<span id="restError1" style="color: #C62626;" class="help-block"></span> -->
Select Date: From <input type="text" id="validBeforeDatepicker"
name="validTodayDatepicker" > To <input type="text"
id="validAfterDatepicker" name="validAfterDatePicker">
</div>
<div class="span3">
<label>Weeks<span class="f_req">*</span></label> <input type="text"
name="weeks" id="weeks" class="span8" id="dp1" onchange="advurldisabled();"/> <span
class="help-block">(List of week in incremental order)</span> <span
id="restError2" style="color: #C62626;" class="help-block"></span>
</div>
<div class="span3">
<label>Restaurants <span class="f_req">*</span></label>
<select id="rest_id" name="rest_id" data-placeholder="- Select Restaurants -" class="chzn-select" multiple>
<%
List <restaurant> rest_list=restaurantLocalServiceUtil.getAllRestaurantByOrganizationId(themeDisplay);
for(int i=0;i<rest_list.size();i++) {
%>
<option value=<%=rest_list.get(i).getPrimaryKey()%>><%=rest_list.get(i).getName().toString()%></option>
<%
}
%>
</select>
<span id="restError3" style="color: #C62626;" class="help-block"></span>
</div>
</div>
<br />
<br />
<h3 class="heading">Select Ad Location</h3>
<div class="row-fluid">
<div class="span12">
<table style="width: 675px;">
<tr>
<td style="font-weight: bold; width: 150px;">Stand By Ad
<a href="#" class="pop_over" data-content="<table><tr><td valign='top'>Lorem Ipsum Lorem Ipsum Lorem </br> Lorem Ipsum Lorem Ipsum Lorem </td><td><img src='img/vimeo.png' height='50' width='50'/></td></tr></table>"
data-original-title="( Ad name )" data-placement="left">
<sup style="font-size: 10px;"> ?</sup></a>
</td>
<td>
<select data-placeholder="Select Ad" class="chzn-select" multiple name="selectstandbyad" id="selectstandbyad">
<% for (int i = 0; i < adv_list.size(); i++) { %>
<option value=<%=adv_list.get(i).getPrimaryKey()%>><%=adv_list.get(i).getAdvertisename().toString()%></option>
<% } %>
</select>
</td>
</tr>
</table>
<div class="formSep"></div>
<table style="width: 675px;">
<tr>
<td style="font-weight: bold; width: 150px;">Slider Ad</td>
<td><select data-placeholder="Select Ad" class="chzn-select"
multiple name="selectsliderad" id="selectsliderad">
<%
for (int i = 0; i < adv_list.size(); i++) {
%>
<option value=<%=adv_list.get(i).getPrimaryKey()%>><%=adv_list.get(i).getAdvertisename().toString()%></option>
<%
}
%>
</select></td>
</tr>
</table>
<div class="formSep"></div>
<table style="width: 675px;">
<tr>
<td style="font-weight: bold; width: 150px;">Event Based Ad</td>
<td><select data-placeholder="Select Ad" class="chzn-select"
multiple name="selecteventbasead" id="selecteventbasead">
<%
for (int i = 0; i < adv_list.size(); i++) {
%>
<option value=<%=adv_list.get(i).getPrimaryKey()%>><%=adv_list.get(i).getAdvertisename().toString()%></option>
<%
}
%>
</select></td>
</tr>
</table>
<div class="formSep"></div>
<table style="width: 675px;">
<tr>
<td style="font-weight: bold; width: 150px;">Banner Ad</td>
<td><select data-placeholder="Select Ad" class="chzn-select"
multiple name="selecthomescreenad" id="selecthomescreenad">
<%
for (int i = 0; i < banner_adv_list.size(); i++) {
%>
<option value=<%=banner_adv_list.get(i).getPrimaryKey()%>><%=banner_adv_list.get(i).getAdvertisename().toString()%></option>
<%
}
%>
</select></td>
</tr>
</table>
<span id="restError4" style="color: #C62626;" class="help-block"></span>
<div class="formSep"></div>
</div>
</div>
<div class="form-actions">
<button class="btn" onclick="campaignList();">Cancel</button>
<button type="button" style="float: right;" class="btn"
name="btnback" onclick="customeValidationfornewcamp();">Save</button>
</div>
</div>
<!-- hide elements (for later use) -->
<div class="hide">
<!-- actions for datatables -->
<div class="dt_gal_actions">
<div class="btn-group">
<button data-toggle="dropdown" class="btn dropdown-toggle">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" class="delete_rows_dt" data-tableid="dt_gal"><i
class="icon-trash"></i> Delete</a></li>
<li><a href="javascript:void(0)">Lorem ipsum</a></li>
<li><a href="javascript:void(0)">Lorem ipsum</a></li>
</ul>
</div>
</div>
<!-- confirmation box -->
<div id="confirm_dialog" class="cbox_content">
<div class="sepH_c tac">
<strong>Are you sure you want to delete this row(s)?</strong>
</div>
<div class="tac">
<a href="#" class="btn btn-gebo confirm_yes">Yes</a> <a href="#"
class="btn confirm_no">No</a>
</div>
</div>
</div>
<script type="text/javascript">
function redirection(myurl){
window.location=myurl;
}
</script>
<script type="text/javascript">
function customeValidationfornewcamp() {
var flag = true;
var camp_name = $("#camp_name").val();
var startdate = $("#start_date").val();
var week = $("#weeks").val();
var rest_id=$("#rest_id").val();
var standby_ad=$("#selectstandbyad").val();
var slider_ad=$("#selectsliderad").val();
var event_ad=$("#selecteventbasead").val();
var homescreen_ad=$("#selecthomescreenad").val();
if (camp_name == '') {
$("#restError").html('Campaign name cannot be blank');
$("#camp_name").addClass('borderColor');
flag = false;
} else {
$("#restError").html('');
$("#camp_name").removeClass('borderColor');
}
if (startdate == '') {
$("#restError1").html('Start date cannot be blank');
$("#start_date").addClass('borderColor');
flag = false;
} else {
$("#restError1").html('');
$("#start_date").removeClass('borderColor');
}
if (week == '') {
$("#restError2").html('Week can not be blank');
$("#weeks").addClass('borderColor');
flag = false;
} else {
$("#restError2").html('');
$("#weeks").removeClass('borderColor');
}
if (rest_id == null) {
$("#restError3").html('Please Select atleast one restaurant');
$("#rest_id").addClass('borderColor');
flag = false;
} else {
$("#restError3").html('');
$("#rest_id").removeClass('borderColor');
}
if ((standby_ad==null)&&(slider_ad==null)&&(event_ad==null)&&(homescreen_ad==null)) {
$("#restError4").html('Please select atleast one Ad Location');
$('#selectstandbyad').addClass('borderColor');
flag = false;
} else {
$("#restError4").html('');
$("#selectstandbyad").removeClass('borderColor');
}
if (flag == true) {
newcamp('<%=addToDo%>');
}
return flag;
}
</script>
<script type="text/javascript">
// function to add number of days (accepts number of days to add)
function advurldisabled() {
var days= $("#weeks").val();
var thisDate = $("#validBeforeDatepicker").datepicker("getDate");
//thisDate.setDate(thisDate.getDate() + days);
alert(thisDate);
}
// call your function like this
</script>
<script type="text/javascript">
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({
allow_single_deselect : true
});
$(document).ready(function() {
$('#dp1').datepicker({
format : 'dd-mm-yyyy'
}).on('changeDate', function() {
$(this).datepicker('hide');
});
//* show all elements & remove preloader
setTimeout('$("html").removeClass("js")', 1000);
$("#addPrv").click(function() {
var url = $("#advurl").val();
if (url == '') {
alert('Please enter Adv url for redirection')
} else {
window.location = url;
}
});
});
</script>
</div>
this is my javascript i m using now…
<script type="text/javascript">
// function to add number of days (accepts number of days to add)
function advurldisabled() {
var days= $("#weeks").val();
var thisDate = $("#validBeforeDatepicker").datepicker("getDate");
d = $('#validBeforeDatepicker').datepicker('getDate');
d.setDate(d.getDate()+days); // add int nights to int date
alert(d);
//thisDate.setDate(thisDate.getDate() + days);
alert(thisDate);
}
but the d variable is coming null
I have made changes in following way in my java script
<script type="text/javascript">
// function to add number of days (accepts number of days to add)
function advurldisabled() {
var days= $("#weeks").val();
var thisDate = $("#validBeforeDatepicker").datepicker("getDate");
alert(thisDate);
thisDate.setDate(thisDate.getDate() + days);
alert(thisDate);
var d = $('#validBeforeDatepicker').datepicker('getDate');
d.setDate(d.getDate()+days); // add int nights to int date
alert(d);
}
// call your function like this
</script>
first allert is showing following date format
Thu Nov 08 2012 00:00:00 GMT+0530 (India Standard Time)
second alert showing following value which is taking no of weeks as input and i had inserted 1 number in weeks field and result is follows
Sun Jan 20 2013 00:00:00 GMT+0530 (India Standard Time)
right now i just adding weeks directly..withought doing multiply by 7 but just for testing but still instead of Nov 09 its giving difrent date..please guide me where am doing mistake
Its simple. Try this:
Thats it! 😉