Geek Answers Handbook

Is it possible to find out if input type = datetime-local is halfway full?

Is it possible to find out if input type = datetime-local is halfway full? For example, if only a date or time is populated?

<input type="datetime-local" class="form-control input-lg" id="dueDate" ng-model="jobDueDate" min="{{currentMin | date:'yyyy-MM-ddTHH:mm'}}" placeholder="Due Date" >

The value of the element element of the input tag is empty, regardless of whether it is empty or half full.

 var valuedate = document.getElementById('dueDate'); console.log(valuedate.value());

Date.parse returns NaN for both cases as well. Is there a possible solution? I use jQuery and AngularJS if they can help. Feel free to send cleaner solutions using other input types (no extra libraries). The goal is for the user to fill in both fields.

EDIT: the field can be empty or completely filled. I need to know if it is half full so I can request the user or calculate the required date.

+5
source share
2 answers

You may find a semi-filled field:

 document.querySelector('#dueDate').validity.badInput
+1
source

Well, besides, I don’t know why you need to check if it is halfway full, I really doubt that there is a way to do this without any hacking solution.

However, if you want to simplify these things, you can use ngMessages to check if it is complete or not.

Check out this simple demo. .

 (function() { angular .module('app', ['ngMessages']) .controller('MainCtrl', MainCtrl); MainCtrl.$inject = ['$scope']; function MainCtrl($scope) { $scope.currentMin = new Date(); // Just an example } })(); 
 <!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.8/angular-messages.min.js"></script> </head> <body ng-controller="MainCtrl"> <form role="form" name="form" novalidate> <div class="col-md-12"> <div class="form-group" ng-class="{ 'has-error' : form.dueDate.$dirty && form.dueDate.$invalid }"> <label for="dueDate">Local date time</label> <input type="datetime-local" class="form-control input-lg" id="dueDate" name="dueDate" ng-model="jobDueDate" min="{{currentMin | date:'yyyy-MM-ddTHH:mm'}}" placeholder="Due Date" required> <div class="help-block" ng-messages="form.dueDate.$error" ng-if="form.dueDate.$dirty"> <p ng-message="required">This field is required</p> <p ng-message="datetimelocal">This needs to be a valid datetime</p> </div> </div> </div> <pre ng-bind="form.dueDate | json"></pre> </form> </body> </html>

I would recommend you check out this tutorial .

Hope this helps!

0
source

More articles:


All Articles