locked
Time Validation is not working properly. RRS feed

  • Question

  • Time validation is not working properly

                                             

    But When i entered 9:59 AM PickUp Time and Drop Time 11:15AM then its not validating properly. As i validate drop time should be greater, But i already select greater time 11:15AM 

    $(function () {  
                    $('#pickTime').datetimepicker({
    ignoreReadonly: true,
                        format: 'LT'
                    });
                });

       $(function () {
                    $('#drpTime').datetimepicker({
                    ignoreReadonly: true,
                        format: 'LT'
                    });
                }); 

     if(pickTime>=drpTime && CheckPickUp=="Yes" && CheckDropUp=="Yes" &&  drpTime!="" && varPickDate >= varDrpDate)
                 {
                   isValid = false;
                   $('#drpTime').after('<div class="error">Drop time should be greater than pickup time</div>');
                 }

    HTML:-

    <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="traveller-name"><b>
    Time  <span class="ast">
    *</span></b></label>
                                                            </div>
                                                        </div>
                                                            <div class="col-md-4" id="divpickTime">
                                                                 <div class="form-group">
                                                              <input type="text" id="pickTime" readonly="readonly"  class="form-control"/>                                                         
                                                                    
                                                        </div>
                                                                </div>
                                                        <div class="col-md-4" id="divdrpTime">
                                                                <input type="text" id="drpTime" readonly="readonly"  class="form-control input-small"/>
                                                              
                                                                    
                                                        </div>
                                                    </div>
                                                </div>


    Shiv Sharma

    Tuesday, January 28, 2020 4:54 AM

Answers

  • Hi Shiv,

    The following example code for your reference.

    <!DOCTYPE html>
    <html>
    <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script>
    
    <script type="text/javascript">
    var isValid=true; 
    $(function () {
    	$('#pickTime').datetimepicker({
    		ignoreReadonly: true,
    		format: 'LT'
    	});
    	$('#drpTime').datetimepicker({
    		ignoreReadonly: true,
    		format: 'LT'
    	});
    	$('#drpTime').on('dp.change', function(e){
    		var date = new Date().toLocaleDateString();
    		if($('#pickTime').val()!=""){
    			var pickTime=Date.parse(date+" "+$('#pickTime').val());
    			var drpTime=Date.parse(date+" "+$('#drpTime').val());
    			if(pickTime>drpTime){
    				isValid = false;
    				$('#drpTime').after('<div class="error">Drop time should be greater than pickup time</div>');
    			}
    		}		
    	})
    });
    </script>
    </head>
    <body>
    <div class="row">
    	<div class="col-md-12">
    		<div class="col-md-4">
    			<div class="form-group">
    				<label for="traveller-name"><b>
    				Time<span class="ast">*</span></b></label>
    			</div>
    		</div>
    		<div class="col-md-4" id="divpickTime">
    			<div class="form-group">
    				<input type="text" id="pickTime"    class="form-control"/>
    			</div>
    		</div>
    		<div class="col-md-4" id="divdrpTime">
    			<input type="text" id="drpTime"   class="form-control input-small"/>
    		</div>
    	</div>
    </div>
    </body>
    </html>

    Best regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, January 28, 2020 8:34 AM

All replies

  • Hi Shiv,

    The following example code for your reference.

    <!DOCTYPE html>
    <html>
    <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script>
    
    <script type="text/javascript">
    var isValid=true; 
    $(function () {
    	$('#pickTime').datetimepicker({
    		ignoreReadonly: true,
    		format: 'LT'
    	});
    	$('#drpTime').datetimepicker({
    		ignoreReadonly: true,
    		format: 'LT'
    	});
    	$('#drpTime').on('dp.change', function(e){
    		var date = new Date().toLocaleDateString();
    		if($('#pickTime').val()!=""){
    			var pickTime=Date.parse(date+" "+$('#pickTime').val());
    			var drpTime=Date.parse(date+" "+$('#drpTime').val());
    			if(pickTime>drpTime){
    				isValid = false;
    				$('#drpTime').after('<div class="error">Drop time should be greater than pickup time</div>');
    			}
    		}		
    	})
    });
    </script>
    </head>
    <body>
    <div class="row">
    	<div class="col-md-12">
    		<div class="col-md-4">
    			<div class="form-group">
    				<label for="traveller-name"><b>
    				Time<span class="ast">*</span></b></label>
    			</div>
    		</div>
    		<div class="col-md-4" id="divpickTime">
    			<div class="form-group">
    				<input type="text" id="pickTime"    class="form-control"/>
    			</div>
    		</div>
    		<div class="col-md-4" id="divdrpTime">
    			<input type="text" id="drpTime"   class="form-control input-small"/>
    		</div>
    	</div>
    </div>
    </body>
    </html>

    Best regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, January 28, 2020 8:34 AM
  • Hi Shiv,

    Would you please provide us with an update on the status of your issue?

    Best Regards,
    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, February 3, 2020 8:17 AM