Disable Previous Dates in Datepicker with Javascript - javascript

I Am Kinda New in Javascript and I want to Disable Previous Dates from Today
I used this code to display Datepicker
<input type="text" onfocus="(this.type='date')" id="leaveTo" name="leaveTo" placeholder="DD-MM-YYYY" style="width:fit-content;">

If I got your question right, you need to make some dates to be unselectable.
That can be done by using max, min attributes.
For more information take a look: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Additional_attributes
<input type="date" min="2020-12-23">

Related

Force a leading zero to show on page for input type="text" for time format hh:mm:ss

HTML markup <input type="text" value="00:00:00" class="datepicker-time" aria-invalid="false"> does not display the leading zero in a text input with time format hh:mm:ss. Even though the value for the input is 00:00:00, the page shows 0:00:00. How can I force the leading zero to display?
As #Paulie_D said - use type='time' instead of text..
<input type="time" value="00:00" class="datepicker-time" aria-invalid="false"/>
One thing to note is that developer.mozilla.org has a lot of good info on how you can use this, both in JS and the general HTML items.

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>

How to give specific range to datetime-local input type?

Working on Phonegap application, it requires to provide specific date range (for example, User should be able to pick only future dates up to 10 days from now).
Testing application into iPad. I have tried with min and max attributes but not working.
<span class="field_text">Preferred Date & Time</span>
<input id="checkout_datetime" type="datetime-local" class="text_box_cnt" required="required"/>
Please help...
This is an old question, but it's the first result that came up for me when Googling, so I wanted to leave a proper answer.
The min and max attributes are indeed the ones to use to restrict input to a given range:
<input type="datetime-local" id="meeting-time"
name="meeting-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2018-06-14T00:00">
Use date instead of datetime-local.Here is an example
<input id="checkout_datetime" type="date" min="2014-03-20" max="2014-03-30" class="text_box_cnt" />
Reference by http://www.w3.org/TR/html-markup/input.date.html

Dojo DateTextBox selectable text

I have a Dojo DateTextBox that per requirement will also allow a time after the date.
<input type="text" name="date1" id="date1" value="" dojoType="dijit.form.DateTextBox" constraints="{datePattern:'dd MMM yyyy HHmm'}" required="false" />
This all works fine. What I want to know is by default dojo has text selection disabled. I can not highlight the text or put the cursor where I want it. It always displays at the end of the selection and you have to use the arrow keys to move the selection. Is there a way to make it so the datetextbox works like a text box with a calendar? Thanks
looks like a bug. please file a ticket at bugs.dojotoolkit.org and reference checkin [24131]

Need Date/Time Picker with specific functions

I've looked around, and I do see previous questions where people ask about Date/Time pickers; unfortunately none of those threads matched my specific needs. I see a lot of people recommending Any+Time as well, but it seems a little "heavy" and I'm looking for lightweight.
Basically, I have the need for a date/time picker for "events". The event-search picker here (http://jqueryui.com/demos/datepicker/#event-search) is very nice, but it doesn't handle time. My form is built on jQuery, so I'm okay with using that.
Must be able to select both date and time
End time form should be hidden until the start time is selected.
After the start time is selected, end time should automatically be set for 6 hours later
Should not be able to select an end time that takes place before the start time
Should be able to handle timezones, and default to the user's current timezone
Should be able to send out a UTC timestamp (I will store in a hidden field; ex: 1291004863)
Your recommendations are appreciated... I dont know much about Javascript.
I would try extending the jQuery UI datepicker with the modifications made on the following page:
http://addyosmani.com/blog/the-missing-date-time-selector-for-jquery-ui/
The jQuery UI event search example code would only need the new parameters added as to make it work.
Hope that helps!
Edit:
Example code for datepicker range (using code from link above):
-HTML-
<p>
<label for="from">From:</label> <input class="datetime" type="text" name="from" id="from" value="" />
<label for="to">To:</label> <input class="datetime" type="text" name="to" id="to" value="" />
</p>
-js-
$(function() {
$('.datetime').datepicker({
duration: '',
showTime: true,
constrainInput: false
});
});
Here's a link to see in action:
http://bit.ly/hZTR84

Categories

Resources