Develop Reference

How to restrict user to enter date manually in date field

I am working on an application in which i want to restrict user to manually enter the date in the type=date field in html page.
I want to restrict the user to select the date only from the calender display which is MM/DD/YYYY.
Below is the code in html page :
<input type="date" name="bankTrans" ng-model="orderAstro.paymentDate"
class="form-control" id="bankTrans"
ng-disabled="isDisabled" required />
Also attaching the image for error clarity :
Image for error clarity

use following line of code to restrict manual date field entry using jquery.
$("input[type='date']").keydown(function (event) { event.preventDefault(); });

Edit 1:
Your question makes sense.
The best way to work with a date is to disable manual entry and allow changes only using the Date Picker.
Add a 'readonly' attribute to the input field:
<input type="date" readonly name="bankTrans"
ng-model="orderAstro.paymentDate" class="form-control"
id="bankTrans" ng-disabled="isDisabled" required />
Do you want the code for above Angular js file and HTML as well or this much is fine.

Edit 2:
Disabling the manual Entry of Date and allowing only through Date Picker.
HTML code:
<input type="text" readonly class="form-control" datepicker-popup="{{clCtrl.format}}"
ng-model="clCtrl.QualityExpirationDate" is-open="clCtrl.openedQualityDate"
min-date="clCtrl.minDate" datepicker-options="clCtrl.dateOptions"
ng-required="true" close-on-date-selection="true"
show-button-bar="false" />
js file:
$scope.$watch('dt', function(val) {
$scope.isValidDate = isNaN(new Date(val).getTime());
});
self.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
self.formats = ['MM-dd-yyyy', 'MM/dd/yyyy', 'MM.dd.yyyy', 'shortDate'];
self.format = self.formats[0];
self.openQualityDate = function ($event) {
$event.preventDefault();
$event.stopPropagation();
self.openedQualityDate = true;
};
self.toggleMin = function () {
self.minDate = self.minDate ? null : new Date();
};
self.toggleMin();
self.clear = function () {
self.QualityExpirationDate = null;
};

Please ignore this, is not solving the issue, as intended.
This might help: https://jsdaddy.github.io/ngx-mask-page/main#prefix
<input mask="00/00/0000">

what worked for me!
added the following attributes to my date type input tags.
<input type="date" name="dob" "minlength": "10", "maxlength": "10", class="form-control" />

Getting the correct format of the datepicker

I have a column inside of my datebase that stores a date that user pick when they offer a job. It's currently formed in this way: "Fri Feb 15 2019".
I want to be able to compare it to the current date which is formed as: "2019-01-27"
I'm guessing that the best way to do this would be to transform the datepicker format to the date one, and then compare them. This is the code that I have for the date picker currently when someone registeres.
<div class="form-group">
<label for="location" class="control-label">DATE</label>
<input type="text" id="datepicker" class="form-control" placeholder="Pick a
date" name="datepicker">
</div>
<script>
var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>

Open the example in full page :
Use new Date and then you can extract the day the month and the year
and to compare with another date, you can just new Date("2006-05-1").getMonth() === new Date("2006-05-2").getMonth() && ...
var picker = new Pikaday({
field: document.getElementById('datepicker')
});
const dateInput = document.getElementById('datepicker');
function handleChange() {
const date = new Date(dateInput.value),
formattedDate = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
console.log(formattedDate)
}
dateInput.addEventListener("change", handleChange);
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<input type="text" id="datepicker">

I would suggest using the javascript plugin called Momentjs. It allows for easy formatting of dates, without the base javascript hassle.
Add this to your HTML, near the bottom of your page, but before your script tags:
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
Then to format your datepicker value, inside your script, use:
var myDate = moment(picker.value).format('YYYY-MM-DD');
Here is the Momentjs documentation:
Momentjs Docs

Read date value from Bootstrap Date/Time picker in a simpler format

I am using Eonasdan's Bootstrap Date/time picker:
https://github.com/Eonasdan/bootstrap-datetimepicker
I would like to be able to read the selected picked date in a format of my choosing which in this case is DD/MM/YYYY. However it seems to output with the day of week, month name, day, year, time and GMT offset.
I have created an example of the script here:
http://jsfiddle.net/0Ltv25o8/1649/
<div class="row">
<div class="col-md-12">
<p><input type="text" class="datefield" placeholder="Date 1" id="date1"/></p>
<p><input type="text" class="datefield" placeholder="Date 2" id="date2"/></p>
</div>
</div>
$('.datefield').datetimepicker({
format: 'DD/MM/YYYY'
})
$(document).on('dp.change', '.datefield', function(e) {
var id=$(this).attr('id');
var theDate=e.date;
alert(id + " / " + String(theDate));
});
When you select a date I output the ID of the date text field and the date string. I am able to set the date format for how the date appears in the date text field but not when I read it.

$(document).on('dp.change', '.datefield', function(e) {
var id=$(this).attr('id');
var theDate=e.date;
alert(id + " / " + e.date.format('DD/MM/YYYY'));
});
You can format this date anywhere

Knockout.js validation

I'm new to Knockout.js tech where I Googled many site to resolve my situation where I couldn't find a better option.
How to validate a date using Knockout.js? Where in my case if the user typed the date in a wrong format say for e.g if the valid date format is dd-M-yyyy but the user is typing M-dd-yyyy it should automatically convert it to a valid date format.
My sample code is this,
self.dateOfBirth = ko.observable(0).extend({
required: { message: 'Date of Birth is required', params: true },
date: { format: 'dd-M-YYYY' ,
message: 'Not a valid date format',params:true
}
My HTML design is this,
<input class="form-control" id="dateOfBirth" autocomplete="off" placeholder="Date of Birth" type="text" data-bind="value: dateOfBirth, format:'dd-M-YYYY', valueUpdate: 'afterkeydown'">

Take a look at "Writable computed observables" example 3 and example 4 on the official Knockout documentation site.
Example:
this.formattedDate = ko.pureComputed({
read: function () {
return this.date();
},
write: function (value) {
// convert date to dd-M-YYYY, then write the
// raw data back to the underlying "date" observable
value = convertDate(value); // add your own conversion routine
this.date(value); // write to underlying storage
},
owner: this
});
Also consider using the textInput binding, instead of value combined with valueUpdate, for consistent cross-browser handling.

Consider using Knockout event and capture its change event and then use moment.js library to convert it into any date format you like.
In HTML:
<input class="form-control" id="dateOfBirth" autocomplete="off" placeholder="Date of
Birth" type="text" data-bind="value: dateOfBirth, event: { change: dataChanged},
valueUpdate: 'afterkeydown'">
In javascript:
Inside your viewModel
//this function will be called when the date will be changed
self.dataChanged = function(){
//using moment .js here change the format to dd-M-YYYY as desired
var validFormat = moment(self.dateOfBirth()).format('dd-M-yyyy');
self.dateOfBirth(validFormat);
}
for further details check moment.js liberary

Format Angular Date for DB storage

Thank you in advance
Q.1
I would like to format the Angular-UI Bootstrap date and time pickers. Every time I change the time or date the output is in the following manner Today is: "2015-03-19T22:00:00.000Z". Obviously this is in correct. And my Node-Mysql is filled with this date formatting
What's more bizzar is that There is 1 day subtracted in the date, On the time it subtracts 2 hours. My Time zone is GMT+2 See MyBin.
When I click on the date again to change it I want the date to stay as 2015-03-20 and the time to 11:20
Q.2
How can I properly validate the following
<form name="BookingForm" ng-repeat="adult in myAdults">
<h4>Adults</h4>
<p>
<input required
ng-required="true"
name="adultName"
ng-model="adultItem.name"
type="text"
class="form-control"
ng-minlength = 3
placeholder="Name">
<div class="error" ng-show="BookingForm.adultName.$dirty && BookingForm.adultName.$invalid">
<small class="error btn-danger"
ng-show="BookingForm.adultName.$error.required">
Your name is required.
</small>
<small class="error btn-danger"
ng-show="BookingForm.adultName.$error.minlength">
Your name is required to be at least 3 characters
</small>
</div>
</p>
</form>
My js Looks like this
$scope.adults = 4;
$scope.children = 2;
$scope.myAdults = [];
for (i = 0; i < $scope.adults; i ++) {
$scope.myAdults.push({});
}
If I have just one form it works fine. But if I have more than one The validation messages only show up on the last one.
Most Important is Q1
Thank you again.

datepicker is using angularjs date filter and it's localised but returned values are in GMT so 2015-03-19T22:00:00.000Z is correct for 2015-03-12T00:00:00.000Z as it will subtract 2 hours from midnight back which changes date as well, if you need a specific format you can do it with date filter as per plunker so
{{'2015-03-19T22:00:00.000Z' | date:'dd-MMMM-yyyy'}} in your timezone shall return 20-March-2015
http://angular-ui.github.io/bootstrap/#/datepicker
http://plnkr.co/edit/CoIS2BFK5O5EAaTu4Vc2?p=preview
javascript
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];