AnyTime Date/time picker validation

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

LVL 19
erikTsomikSystem Architect, CF programmer Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
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
Mark BradyPrincipal Data EngineerCommented:
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
erikTsomikSystem Architect, CF programmer Author Commented:
I need a time format. Please provide some examples of validation
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Mark BradyPrincipal Data EngineerCommented:
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
Michel PlungjanIT ExpertCommented:
0
Michel PlungjanIT ExpertCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
erikTsomikSystem Architect, CF programmer Author Commented:
I am usin anyTime Date/time picker
0
Michel PlungjanIT ExpertCommented:
and I gave you an alternative
0
erikTsomikSystem Architect, CF programmer Author Commented:
I can only use Any Time Date?time picker since it was used all over my system
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.