Develop Reference

Manual typing format of date

I am using ng-pick-datetime for selecting and displaying dates. I have changed to format of the date to DD/MM/YYYY using dateTimeAdapter.setLocale('en-IN') in constructor. If I click the calendar and select the date Its in format of DD/MM/YYYY but If I manually type 03/28/2019, it still accepts. I want to restrict other format except DD/MM/YYYY even on typing. Please help me out.
Code
<input (ngModelChange)="onChangeDate($event)" [(ngModel)]="dob" name="date" [owlDateTimeTrigger]="dt1" [owlDateTime]="dt1" required>
<owl-date-time class="" [pickerType]="'calendar'" [startView]="'multi-years'" #dt1></owl-date-time>
import { DateTimeAdapter } from 'ng-pick-datetime';
constructor(dateTimeAdapter: DateTimeAdapter<any>){dateTimeAdapter.setLocale('en-IN');}

There are several ways to validate your input. Here I have provided solution to your problem.
https://stackblitz.com/edit/ng-pick-datetime-format-i18n-qwhyb3?embed=1&file=src/app/app.component.html
I have added type of input as "text", pattern as you needed "DD/MM/YYYY" and background css to get valid and invalid status of input tag.
<input type="text" pattern="^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$" (ngModelChange)="onChangeDate($event)" [(ngModel)]="dob" name="date" [owlDateTimeTrigger]="dt1" [owlDateTime]="dt1" required>

Disable date selection by setting the current date - DatePicker

as written in the title I have implemented two DatePicker.
Via MDBootstrap: (https://mdbootstrap.com/docs/jquery/forms/date-picker/).
My intent was to not allow the user to select a date that is before the current date.
I have searched in their support, but no command corresponds to what interests me.
In addition, what I would like the second DatePicker, can not select a date that occurred before the date that is selected in the first DatePicker.
The code is here on JSFiddle.
The part of Javascript, you can call it how you want for the test.
Thank you all.

You can try with min and max property of MDBootstrap. here i am using min function to achieve your task.
<div class="md-form">
<input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
<input placeholder="Selected date" type="text" id="date-picker-example2" class="form-control">
<label for="date-picker-example">Try me...</label>
</div>
// Data Picker Initialization
$('.datepicker').pickadate({
min : new Date(),
onClose: function(){
$('#date-picker-example2').pickadate({
min : $('.datepicker').val()
})
}
});
you can see example here
for more options you can refer this document

Try adding
minDate: new Date()
into your DatePicker initialiser function

You can add something like this make your datepicker disable dates before current date
$('.datepicker').pickadate({
min: new Date(),
});
It seems like if your second date picker reacts with the changes of the first one then there might be the name conflict.

input [type=time] expected to be a date

I have an input like this :
<input type="time" ng-model="reunion.startHour" name="time"
placeholder="HH:mm:ss"
min="08:00:00" max="20:00:00"
class="form-control"
id="time" required />
and I'm getting data from the server where the object has a field time=08:00:00. And I want the input to set to that value when loading the page.But I get this error :
Error: [ngModel:datefmt] Expected 08:00:00 to be a date
Now I've tried this :
$filter('date')(new Date(data.startHour), 'HH:mm');
but I got invalid date.
Any help will be appreciated.Thank you

Well, unfortunately JS doesn't support dates with just a time. HH:mm is not a valid date format: https://www.w3schools.com/js/js_date_formats.asp
You can either handle it manually or use a fake date for the date part you don't care about.
(I tried to find a good time-object solution for you, but I don't see much out there. Hopefully someone else has a smoother solution.)

Works in AngularJS 1.6
<input type="time" ng-model="startHour" name="time"
placeholder="HH:mm:ss"
min="08:00:00" max="20:00:00"
class="form-control"
id="time" required />
<br><p ng-show="startHour">{{startHour | date : 'shortTime' }}</p>
<br><p ng-hide="startHour">Enter Valid Time</p>
app.controller("myVm",function($scope) {
var vm = $scope;
vm.startHour = new Date(0);
vm.startHour.setHours(8);
});
The DEMO on PLNKR.

Date picker with custom start date

I am working on a form, for a web application. I have been researching on customizing a date picker plugin. I want to use a JavaScript/php date picker. But the issue is that the user can only choose date from a particular number. For instance: Today is 02/08/2016, the user can only be allowed to choose a date from 10/08/2016. Any date before the 10/08/2016 cannot be selected. How can i use php to control such functionality? Or is there any better way i can achieve this?

I don't know if you are looking for this but it is a very simple to use.
HMTL
<!-- Enter a date after 2016-10-08 (you can make this variable with some php code): -->
<input type="date" name="bday" min="2016-10-08">
With PHP eg.
<input type="date" name="bday" min="<?php echo date('Y-m-d', (time() + 86400)); ?>">
86400 is one day in seconds.
See also W3Schools.

Check Out this link for bootstrap calendar:- http://eternicode.github.io/bootstrap-datepicker/. You will all the necessary methods to populate dates in your calendar.
<input type="text" class="form-control">
$('#sandbox-container input').datepicker({
format: "dd-mm-yyyy",
startDate: "-1d",
endDate: "+5d",
autoclose: true,
todayHighlight: true
});

try this:
$('#datepicker').datepicker({
startDate: new Date()
});

jQuery validation engine js daterange custom function needed

Am using the following validation plugin: https://github.com/posabsolute/jQuery-Validation-Engine
I have two fields start date and end date.
I want the start date to choose any future/past dates. However, I want the end date to compare with start date and it should be able to choose same date and future dates only based on the start date.
So, if I select start date as March 12,2014 then my end date should be able to choose same date March 12,2014 and future dates from March 12,2014.
So, I used the below code to validate:
<input type="text" class="validate[required,dateRange[grp1],custom[date] text-input datepicker" name="daterange" id="start_date" value="">
<input type="text" class="validate[required,dateRange[grp1],custom[date] text-input datepicker" name="daterange" id="end_date" value="">
However, the above code is not validating for the same day.
Also done all the methods in the following link https://stackoverflow.com/questions/22339338/start-and-end-date-validation-using-jquery-validation-engine-js . However, nothing worked for me??