I had a html5 calender of type="datetime". I want the past dates to make unselectable.
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
datepicker-options="dateOptions" min-view="date" maxlength="10" format="dd/MM/yyyy"
ng-model="$ctrl.DateInput" required="true">
All the dates inside the rectangle should be in disable state.
Can someone help me?
With Javascript, you can set the min attribute of the date control. You can also set this from your ViewModal.
var today = new Date().toISOString().split('T')[0];
document.getElementsByName("date-control")[0].setAttribute('min', today);
<input name="date-control" type="date">
Related
I'm working with HTML5 elements on my webpage. By default, on the click of the date picker icon, the current date is highlighted.
<input id="dateField" type="date" name="date-field"/>
How can I configure it to highlight a specific date instead of the current year? say 1st Jan of the current year?
I tried to do this
document.getElementById('dateField').defaultValue = '2021-01-01'
and
<input id="dateField" type="date" name="date-field" value="2021-01-01"/>
but this will not only highlights but also selects the date.
You can use the value attribute like this:
<input id="dateField" type="date" name="date-field" value="2017-06-01"/>
You can learn more about this here.
I have no idea why it's behaving like this so my example is simple I am using php from and to the date set up in date-range by default.
However, when they try to select to date as "30/09/2018" then they can't select that. Not sure why they can't select that.
Here is my code for date range picker from bootstrap datepicker:
<div class="form-group">
<div class="input-group input-large date-picker input-daterange" data-date="10/11/2012" data-date-format="dd/mm/yyyy">
<input type="text" class="form-control" name="from" value="<?php echo date("d/m/Y",$start_date);?>">
<span class="input-group-addon">
to </span>
<input type="text" class="form-control" name="to" value="<?php echo date("d/m/Y",$end_date); ?>">
</div>
</div>
Issue image
If I keep to date blank without any bydefault then work fine but also get broken if I select date range and once and then try to again select date-to as 30th of sept.:
So whenever I try to select 30th of sept its automatically select 29th of sept so not sure why its doing this.
I have a daterange picker in my HTML file
<input date-range-picker class="form-control date-picker" type="text"
ng-model="datePicker.date" options="onApplyDateRange"/>
I want to know that is it possible to validate it using moment.js .I have been trying to validate it but I'm not able to get it working. Please help
I have used https://www.npmjs.com/package/angular-daterangepicker https://github.com/fragaria/angular-daterangepicker
you can try using max in the html and get the maxdate from controller
<input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker.date" max="maxdate" options="onApplyDateRange"/>
Controller
$scope.maxdate = new Date();
Hi i need to Change the jstage Datebox Date box display format like day-month-year in UI ( Black display date box field ) not in html text.
That is first day, after month, after year should be displayed in datebox. Is that possible. how?
Second one is time box when click the plus icon in time need to increase the time value to 15 minutes (currently the value is increased by 1 minute like 10:01 , 10:02 i want 10:15 , 10:30). :)
currently able to change the header format
<div data-role="content">
<label for="mydate">Some Date</label> <input name="mydate"
id="mydate" type="date" data-role="datebox"
data-options='{"mode": "datebox", "useNewStyle":true,"overrideHeaderFormat": "%d.%m.%Y"}' />
</div>
Please refer this http://jsfiddle.net/FwRsq/3/
here is updated fiddle jsfiddle
<input data-role="datebox" data-options='{"mode": "datebox","dateFieldOrder":["d","m","y"], "useNewStyle":true,"overrideDateFormat": "%d.%m.%Y"}' name="mydate" id="mydate" type="date"/>
<input data-role='datebox' data-options='{"mode": "timebox", "useNewStyle":true,"overrideTimeFormat": "24","minuteStep": 15}' name="mydate" id="mydate" type="date"/>
For the time increment, use the minuteStep option:
<input name="mydate" id="mydate" type="date" data-role='datebox' data-options='{"mode": "timebox", "useNewStyle":true,"overrideTimeFormat": "24", "minuteStep": 15}' />
Updated FIDDLE
Today my challenge is this:
I have two inputs and a button:
Both inputs are date picker types. So When I pick a date from first input (for example I choose 11/19/2013) I want the second input to auto-complete to a one day later value. So the second one must pick 11/20/2013 automatically when I click the first input. I use these inputs to calculate a price(in my Magento store).
Below is the structure of my html (just a skeleton)
<div class="select_grid">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="from" id="from" class="hasDatepicker">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="to" id="to" class="hasDatepicker">
<input type="submit" name="Submit">
</div>
If you're happy to use JQuery You want to set something to the onChange handler of the from field.
Something like:
onChange="$('#to').attr('value',$(this).val());"
You'll have to modify it slightly. That syntax as it stands will just copy the value across. You'll need to use the javascript or jQuery date function to increment by one day/week etc.
An example of doing this is in this overflow question: Add +1 to current date