Solved

AnyTime Date/time picker validation

Posted on 2012-04-04
9
3,118 Views
Last Modified: 2012-05-03
I am using AnyTime dateTime plugin. I set to use 2 fields start time and end time. Now I need to validate these 2 fields. So the end time never greater than the start time. Also the first time the popup does not show up only once i click on either startTime or endTime

<script>
$(document).ready(function() {
  $("#startTime").AnyTime_noPicker().removeAttr("disabled").AnyTime_picker({format:"%l:%i %p",earliest:new Date(2000,0,1,0,0,0)});
  $("#endTime").AnyTime_noPicker().removeAttr("disabled").AnyTime_picker({format:"%l:%i %p",earliest:new Date(2000,0,1,0,0,0)});
         
  var rangeDemoFormat = "%l:%i %p";
  var rangeDemoConv = new AnyTime.Converter({format:rangeDemoFormat}); 
  var oneDay = 60*1*1000;
  
   $("#startTime").change( function() {
     var fromDay = rangeDemoConv.parse($("#startTime").val()).getTime();
     var ToDay = rangeDemoConv.parse($("#endTime").val()).getTime();
     //alert(fromDay);
     //alert(ToDay);
     if (fromDay > ToDay) {
       var ninetyDaysLater = new Date(fromDay + oneDay);
       $("#endTime").AnyTime_noPicker().removeAttr("disabled").val(rangeDemoConv.format(ninetyDaysLater)).AnyTime_picker({
         earliest: ninetyDaysLater,
         format: rangeDemoFormat
       });
     }
  });
  
  $("#endTime").change( function() {
    var fromDay = rangeDemoConv.parse($("#endTime").val()).getTime();
    var ToDay = rangeDemoConv.parse($("#startTime").val()).getTime();
    if (fromDay < ToDay) {
      var ninetyDaysLater = new Date(fromDay - oneDay);
      $("#startTime").AnyTime_noPicker().removeAttr("disabled").val(rangeDemoConv.format(ninetyDaysLater)).AnyTime_picker({
        earliest: ninetyDaysLater,
        format: rangeDemoFormat
      });
    }
  });
});       
</script>

Open in new window

0
Comment
Question by:erikTsomik
  • 4
  • 3
  • 2
9 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37809716
What is the format you want? Where did you get your code example from???

Currently you set up the picker to show time only

  var rangeDemoFormat = "%l:%i %p";
  var rangeDemoConv = new AnyTime.Converter({format:rangeDemoFormat});
  var oneDay = 60*1*1000;

and one day is 24*60*60*1000
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 37810486
You could use javascript to put a default date in there (make it the current date by default), that should help it show up. As for validating it, if you turn both times into a timestamp (numbers) you can check easily to make sure the start date/time is not higher than the end date/time. I haven't used the control element so I'm not sure how to do it off the top of my head but the logic should be correct.
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 37816723
I need a time format. Please provide some examples of validation
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 37819178
You can format the date and/or time however you like. Javascript has a date object you can use to get whatever details you need from it. Check this out.

var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear()
document.write("<b>" + day + "/" + month + "/" + year + "</b>")

That will display the date as 7/5/2012 but once you have the different date parts and time parts you can display them however you want. The same date object can return time components like this

var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()

if (minutes < 10)
minutes = "0" + minutes // pad the minutes if less than 10

if (seconds < 10)
seconds = "0" + seconds // pad the seconds if less than 10

  document.write("<b>" + hours + ":" + minutes + ":" + seconds + " </b>")

That will give you 10:35:00 in (bold type) once again you can display this any way you want.

The important thing to note is that the date object will give you all of your information about the date and the time.
Working out am and pm is easy. Here is a list of everything you can do with the date() object.

http://www.quackit.com/javascript/javascript_date_and_time_functions.cfm
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37822419
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 405 total points
ID: 37837092
Something like this (found here: http://trentrichardson.com/examples/timepicker/#example16_start )

    onSelect: function (selectedDateTime){
        var end = $(this).datetimepicker('getDate');
        $('#endtime').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
    }
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 37919936
I am usin anyTime Date/time picker
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37919960
and I gave you an alternative
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 37920043
I can only use Any Time Date?time picker since it was used all over my system
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

867 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

23 Experts available now in Live!

Get 1:1 Help Now