1

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

BhavikKama
  • 8,566
  • 12
  • 94
  • 164
  • adding `days` to the start date where `days = number of weeks * 7` – bart s Nov 30 '12 at 07:53
  • ya i knw..ultimately i want to add days..but my javascript not working..please see my updated question at last.. – BhavikKama Nov 30 '12 at 07:55
  • make sure your startdate is a `Date()` object. then you can simply add the number of days. See [this SO thread](http://stackoverflow.com/a/563470/474535) for some examples. With that you should be able to get things done – bart s Nov 30 '12 at 07:59
  • Note your javascript contains 2 time `#validBeforeDatepicker`. Did you mean to have at least one `#dataAfterDatePikcer`? – bart s Nov 30 '12 at 08:02

2 Answers2

4

Its simple. Try this:

function advurldisabled() {

    // Get the week from input
    var weeks = $('#weeks').val();

    // Get the selected date from datepicker
    var thisDate = $('#validBeforeDatepicker').datepicker('getDate');
    var d = new Date(thisDate);

    // Add weeks to the selected date, multiply with 7 to get days
    var weekLater = new Date(d.getFullYear(), d.getMonth(), d.getDate() + weeks * 7);

    // Set the new date to the datepicker
    $('#datepicker').datepicker('setDate', weekLater);

    //alert(weekLater);
}​

Thats it! ;)

palaѕн
  • 72,112
  • 17
  • 116
  • 136
  • Thanx palash some what is working but getting ouput date when week is 1 as like this Thu Jan 08 1970 00:00:00 GMT+0530 (India Standard Time) – BhavikKama Nov 30 '12 at 09:15
  • ok.one thing more i have find is var thisDate = $('#datepicker').datepicker('getDate'); coming null.. – BhavikKama Nov 30 '12 at 09:19
  • var thisDate = $('#validBeforeDatepicker').datepicker('getDate');//my id is this for selecting datepicker – BhavikKama Nov 30 '12 at 09:25
  • hey done man...thanx..may be it was because my browser cache not cleared..thx a lot man...can i ask one thing at last..i want that the result shows in another datepicker with id #validAfterDatepicker.but dont know how to disable user to select date from the resultet datepicker – BhavikKama Nov 30 '12 at 09:40
  • Simple enough. Just try this: `$('#datepickerID').datepicker('disable');` – palaѕн Nov 30 '12 at 10:24
  • and what about this date format i want jsut simple date dd-mm-yy..so how can i make it possible? – BhavikKama Nov 30 '12 at 10:38
  • simple `$( "#datepickerID" ).datepicker({ dateFormat: "dd-mm-yy" });` – palaѕн Nov 30 '12 at 10:50
1

Here a little fiddle that adds a number of weeks to a date.

HTML:

<input type="text" id="weeks"></input>
<br/>
<input type="text" id="from"></input>
<br/>
<p id="to"></p>
<br/>
<div id="calc">CALC!</div>​

JavaScript:

var today = new Date();
$('#from').val(today);
$('#calc').click(function() {
    var weeks = $('#weeks').val();
    var datefrom = new Date($('#from').val());
    var dateto = new Date();
    dateto.setDate(datefrom.getDate()+weeks*7);
    $('#to').text(dateto);
});​

Make sure that your dates are in correct format before you do the calculations.

bart s
  • 5,068
  • 1
  • 34
  • 55