Solved

Javascript Anytime ajax plugin dateplus and dateminus buttons

Posted on 2013-02-06
2
515 Views
Last Modified: 2013-02-07
I'm trying to create an up/down button control which will advance or subtract the from and to date fields by 1 day. This should be simple but my issue lie's somewhere in my referencing #rangeFrom

    dplus.setHours(0,0,0,0);
//    dplus.setDate(dplus.getDate()+1);
//    dplus.rangeConv.parse($("#rangeFrom").val()).getTime());
//    dplus.setDate(dplus.getdate()+1);
    $("#dayplus").click(function(e){$("#rangeFrom").val(rangeConv.format(dplus)).change(); } );
    $("#dayminus").click(function(e){$("#rangeFrom").val(rangeConv.format(dminus)).change(); } );

<html>
  <head>
    <title>Reporting</title>
    <link rel="stylesheet" type="text/css" href="anytime.css" />
    <link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css" type="text/css"/>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="anytime.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxlistbox.js"></script>
  </head>

   <style type="text/css">
    #rangeFrom, #rangeTo {
    background-image:url("calendar.png");
    background-position:right center;
    background-repeat:no-repeat; }
   </style>

   <style type="text/css">
    #rangeFromTime, #rangeToTime {
    background-image:url("clock.png");
    background-position:right center;
    background-repeat:no-repeat; }
   </style>

   <style type="text/css">
    #main { margin : 0 auto; }
   </style>

   <style type="text/css">
    #dayplus {
    background-image:url("uparrow.png"); }
   </style>

   <style type="text/css">
    #dayminus {
    background-image:url("downarrow.png"); }
   </style>

   <body>
    <div id="main">
    <form action="reporting.php" method="post">
    </br>
    <table border="0">
    <tr width='50%'>
    <td align='center' valign='top'>
      <table border="0">
        <tr>
         <td>FROM:</td>
         <td align='left'><input type="text" id="rangeFrom" name="rangeFrom" value="" size="22" /><input type="button" id="dayplus" style="width:20px" /><input type="button" id="rangeToday" value="today" style="width:70px" /><input type="button" id="rangeYesterday" value="yesterday" style="width:70px" /></td>
        </tr>
        <tr>
         <td>TO:</td>
         <td align='left'><input type="text" id="rangeTo" name="rangeTo" value="" size="22" /><input type="button" id="dayminus" style="width:20px" /><input type="button" id="rangeClear" value="clear" style="width:70px" /></td>
        </tr>
      </table>
      <div id='jqxlistbox'>
      </div>
        <div style="margin-top: 20px;">
         <input id="button" type="submit" value="Run Report" />
         </br>
         </br>
         </br>
         <div id="eventlog"></div>
        </div>
      </form>
      </div>
    </body>

    <script>
    $(window).load(function(){$('#rangeTo').val('').attr('disabled','disabled');})
    var oneDay = 24*60*60*1000;
    var rangeFormat = "%m/%d/%Z %r";
//"%d-%b-%Y";
    var rangeConv = new AnyTime.Converter({format:rangeFormat});
    var d = new Date();
    d.setHours(0,0,0,0);
    d.setDate(d.getDate()-1);
    var d2 = new Date();
    d2.setHours(0,0,0,0);
    var dplus = new Date($("#rangeFrom"));
    dplus.setHours(0,0,0,0);
//    dplus.setDate(dplus.getDate()+1);
//    dplus.rangeConv.parse($("#rangeFrom").val()).getTime());
//    dplus.setDate(dplus.getdate()+1);
    $("#dayplus").click(function(e){$("#rangeFrom").val(rangeConv.format(dplus)).change(); } );
    $("#dayminus").click(function(e){$("#rangeFrom").val(rangeConv.format(dminus)).change(); } );
    $("#rangeToday").click( function(e){$("#rangeFrom").val(rangeConv.format(d2)).change(); } );
    $("#rangeClear").click( function(e){$("#rangeFrom").val("").change(); } );
    $("#rangeYesterday").click( function(e){$("#rangeFrom").val(rangeConv.format(d)).change(); } );
    $("#rangeFrom").AnyTime_picker({format:rangeFormat});
    $("#rangeFrom").change( function(e) { try {
      var fromDay = rangeConv.parse($("#rangeFrom").val()).getTime();
      var dayLater = new Date(fromDay);
      dayLater.setHours(23,59,59,999);
      var ninetyDaysLater = new Date(fromDay+(90*oneDay));
      ninetyDaysLater.setHours(23,59,59,999);
    $("#rangeTo").AnyTime_noPicker().removeAttr("disabled").val(rangeConv.format(dayLater)).AnyTime_picker({ earliest: dayLater,format: rangeFormat,latest: ninetyDaysLater });
      } catch(e){ $("#rangeTo").val("").attr("disabled","disabled"); } } );
            // below code is for listbox
            $(document).ready(function () {
                var source = [
                    "REPORT: TESTREPORT",
                        ];
                // Create a jqxListBox
                $("#jqxlistbox").jqxListBox({ source: source, width: '400px', height: '200px' });
                // disable the sixth item.
                //$("#jqxlistbox").jqxListBox('disableAt', 6);
                // bind to 'select' event.
                $('#jqxlistbox').bind('select', function (event) {var args = event.args;
                    var item = $('#jqxlistbox').jqxListBox('getItem', args.index);
                    $("#eventlog").html('Report Selected:  ' + item.label);
                });
                $("#button").jqxButton();
                $("#button").click(function () {var item = $('#jqxlistbox').jqxListBox('getSelectedItem');
                });
            });
    </script>
</html>

Open in new window

0
Comment
Question by:Dalexan
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38863674
Your first error is line 73, you close the window.onload event

Test page : http://jsfiddle.net/jPwDa/
$(document).ready(function(e) {
	$('#rangeTo').val('').attr('disabled','disabled');
	var oneDay = 24*60*60*1000;
	var rangeFormat = "%m/%d/%Z %r";
	var rangeConv = new AnyTime.Converter({format:rangeFormat});
	$("#dayplus").click(function(e){
        var d = $("#rangeFrom").val();
        try { d = rangeConv.parse(d) } catch(e) { d = new Date() };
        d.setHours(0);
        d.setMinutes(0);
        d.setSeconds(0);
        var dplus = d.setDate(d.getDate()+1);
		$("#rangeFrom").val(rangeConv.format(new Date(dplus))).change();
	});
	$("#dayminus").click(function(e){
        var d = $("#rangeTo").val();
        try { d = rangeConv.parse(d) } catch(e) { d = new Date() };
        d.setHours(0);
        d.setMinutes(0);
        d.setSeconds(0);
        var dminus = d.setDate(d.getDate()-1);
		$("#rangeTo").val(rangeConv.format(new Date(dminus))).change();
	});
	$("#rangeToday").click(function(e){
        var d = new Date();
        d.setHours(0);
        d.setMinutes(0);
        d.setSeconds(0);
		$("#rangeFrom").val(rangeConv.format(d2)).change();
	});
	$("#rangeClear").click(function(e){
		$("#rangeFrom").val("").change();
	});
	$("#rangeYesterday").click( function(e){
        var d = new Date();
        d.setHours(0);
        d.setMinutes(0);
        d.setSeconds(0);
        d.setDate(d.getDate()-1);
		$("#rangeFrom").val(rangeConv.format(d)).change();
	});
	$("#rangeFrom").AnyTime_picker({format:rangeFormat});
	$("#rangeFrom").change( function(e) {
		try {
			var fromDay = rangeConv.parse($("#rangeFrom").val()).getTime();
			var dayLater = new Date(fromDay);
			dayLater.setHours(23,59,59,999);
			var ninetyDaysLater = new Date(fromDay+(90*oneDay));
			ninetyDaysLater.setHours(23,59,59,999);
			$("#rangeTo").AnyTime_noPicker().removeAttr("disabled").val(rangeConv.format(dayLater)).AnyTime_picker({ earliest: dayLater,format: rangeFormat,latest: ninetyDaysLater });
		} catch(e){ 
			$("#rangeTo").val("").attr("disabled","disabled");
		}
	});

	// below code is for listbox
	var source = [ "REPORT: TESTREPORT"];
	// Create a jqxListBox
	$("#jqxlistbox").jqxListBox({ source: source, width: '400px', height: '200px' });
	// disable the sixth item.
	//$("#jqxlistbox").jqxListBox('disableAt', 6);
	// bind to 'select' event.
	$('#jqxlistbox').bind('select', function (event) {var args = event.args;
		var item = $('#jqxlistbox').jqxListBox('getItem', args.index);
		$("#eventlog").html('Report Selected:  ' + item.label);
	});
	$("#button").jqxButton();
	$("#button").click(function () {
		var item = $('#jqxlistbox').jqxListBox('getSelectedItem');
	})

});

Open in new window

0
 

Author Closing Comment

by:Dalexan
ID: 38864042
Superior, Thanks much.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article will show, step by step, how to integrate R code into a R Sweave document
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now