I am using a angular bootstrap datetimepicker from https://github.com/dalelotts/angular-bootstrap-datetimepicker.
I want to set the available select day from today and today + 7.
In the order words, disabled all other day.
Any suggestions will be appreciated.
Thanks.
Yes, you can use the before-render callback to disable any dates that are out of range.
There is an example in the demo page.
Something like this should work (not tested at all)
function renderOnBeforeRender($dates) {
var now = moment.valueOf();
var max = moment().add('day', 7).valueOf();
angular.forEach($dates, function (dateObject) {
dateObject.selectable = (dateObject.localDateValue() >= now && dateObject.localDateValue() <= max)
});
}
Related
I'm trying to write a userscript for a friend. The Website I'm writing it for (app.patientaccess.com) tells you what doctors appointments you have, (among other things). However, in order to write my userscript, I need to know how the app handle appointments for the following year.
At the moment, the only way to know is to wait until the end of the year when my friend starts making appointments for the following year. Since it's an Angular app, I'd rather, if possible, point it to a fabricated JSON file of my creation when the app requests that particular data. In that file I can give it some data for this year and next year and then I can see what happens with appointments made for the following year.
I'm hoping this can be done with an addon for Chrome or Firefox or perhaps some kind of free/open source software.
Thanks in advance.
I came up with a function that will accurately guess there year, given the day name, date and month, if it's within a couple of years either side of the current year.
function calculateYear(dayName, dayOfMonth, monthNum, returnDateObj) {
monthNum -= 1;
maxIterations = 3;
var startYear = (new Date()).getFullYear();
var dateObj = new Date(startYear, monthNum, dayOfMonth);
for (var i = 0; i < maxIterations; i++) {
dateObj.setYear(startYear + (1 * i));
if (dayName == daysOfTheWeek[dateObj.getDay()]) {
return (returnDateObj) ? dateObj : dateObj.getFullYear();
}
dateObj.setYear(startYear - (i + 1));
if (dayName == daysOfTheWeek[dateObj.getDay()]) {
return (returnDateObj) ? dateObj : dateObj.getFullYear();
}
}
return 'No Match';
}
It works a treat, as you can see here.
I was trying to make use of bootstrap date picker, and make the user to select next day or above in the calendar.
How to make the (data-date-start-date="12AM next day") instead of (data-date-start-date="+1d").
To be precise, the selected insurance policy needs be covered from next day 12AM.
I'm banging my head from last couple of days, tried most of the known probabilities.
It needs to be set via Bootstrap date picker! Any help would be highly appreciated.
<div class="input-group date" data-provide="datepicker" data-date-autoclose="true" data-date-start-view="0" data-date-force-parse="false" data-date-start-date="+1d"></div>
Try this:
<script type="text/javascript">
$(function () {
var d = new Date();
d.setDate(d.getDate() + 1); //this will set tomorrow
d.setHours(0, 0, 0, 0); //this will set 12 AM
$('#datetimepicker1').datetimepicker({
defaultDate: d,
});
});
</script>
bootstrap-datepicker is not designed to be concerned with time (search the documentation for the word "time").
There are other libraries that help with picking dates and times.
So I just found out that the datetime input fields I use all over my app are no longer working on IOS7, so I found that the datetime-local input type is still supported. Timezone is not important to the function of my app, so this is ok. The problem is, the code I was using to populate and retrieve the date values from the input fields does not work. Here is my code:
$("#date").val(pv.When);
To set it, where date is the id of my input and pv.When is a datetime object
theVisit.When = new Date($("#date").val());
To retrieve it, right now neither do anything, the field is empty when i load the form, and the value does not save. Do I need to do anything special to make this work?
OK, what I did was this, I wrote 2 utility functions, one to set the value of the datetime-local field and one to get the value out as a date. You will notice as part of the fix I am using the Moment.js date helper library.
Here are my 2 functions:
function getDateTimeForPicker(d) {
var offset = d.getTimezoneOffset() / 60;
d.setMinutes(d.getMinutes() - d.getTimezoneOffset())
return d.toISOString().replace("Z", "");
}
function getDateTimeFromPicker(d) {
var m = moment(d);
var ret = m.toDate();
return ret;
}
so I can set as easy as :
$("#dateTimeBox").val(getDateTimeForPicker(new Date()));
This is tested and working fine on iOS7
Is it possible to disable dates when I use
I want to disable current date for one scenario and future dates for other scenario.
How should I disable the dates?
You can add a min or max attribute to the input type=date. The date must be in ISO format (yyyy-mm-dd). This is supported in many mobile browsers and current versions of Chrome, although users can manually enter an invalid date without using the datepicker.
<input name="somedate" type="date" min="2013-12-25">
The min and max attributes must be a full date; there's no way to specify "today" or "+0". To do that, you'll need to use JavaScript or a server-side language:
var today = new Date().toISOString().split('T')[0];
document.getElementsByName("somedate")[0].setAttribute('min', today);
http://jsfiddle.net/mblase75/kz7d2/
Ruling out only today, while allowing past or future dates, is not an option with here. However, if you meant you want tomorrow to be the min date (blanking out today and all past dates), see this question to increment today by one day.
As in all other cases involving HTML forms, you should always validate the field server-side regardless of how you constrain it client-side.
In pure HTML, the only restrictions you can put on dates are its lower and upper bounds through the min and max attributes. In the example below, only the dates of the week I'm posting this question are allowed, other appear greyed out and clicking on them doesn't update the input value:
<input type="date" min="2019-06-02" max="2019-06-08"/>
You can also disable any invalid date by using a few lines of JavaScript, but this doesn't ship with all the native <input type="date"> features like greyed-out dates. What you can do is set the date value to '' in case of an invalid date, an error message could also be displayed. Here is an example of an input that doesn't accept weekend dates:
// Everything except weekend days
const validate = dateString => {
const day = (new Date(dateString)).getDay();
if (day==0 || day==6) {
return false;
}
return true;
}
// Sets the value to '' in case of an invalid date
document.querySelector('input').onchange = evt => {
if (!validate(evt.target.value)) {
evt.target.value = '';
}
}
<input type="date"/>
HTML datepicker (<input type=date>) supports min/max attribute, but it is not widely supported.
At the meantime you may consider using bootstrap-datepicker, v1.2.0 is on github.
References:
W3C spec
You could use this to disable future dates :
Inside you document.ready function, place
//Display Only Date till today //
var dtToday = new Date();
var month = dtToday.getMonth() + 1; // getMonth() is zero-based
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
$('#dateID').attr('max', maxDate);
and in form
<input id="dateID" type="date"/>
Here is the working jFiddle Demo
For react and similar libraries, you may use this to disable all dates before today.
<input type='date' min={new Date().toISOString().split('T')[0]} >
Depending on what you need, you can also use the step attribute to only enable specific dates - e.g. every Monday, or every other day. You can use it in combination with min and max
e.g. every Monday
<input type="date" step="7" value="2022-04-04">
Every Thursday
<input type="date" step="7" value="2022-04-07">
Every other day
<input type="date" step="2">
I am looking for a way of getting the start of the week relative to today in Actionscript using (and currently stuck with) Flex 4.1. In Java I would do this using the Calendar class via:-
Calendar cal = Calendar.getInstance();
cal.setTime(new Date());
cal.set(Calendar.DAY_OF_WEEK,
1);
return cal.getTime();
I can't seem to find any solution that is anywhere as elegant - am I missing something?
There are two classes, of the same name, DateTimeFormatter. One is a pure Actionscript class, the other is a new class added to Flex 4.5 that wraps the Actionscript version. The Flex version does some of the heavy lifting for you.
There is a getFirstWeekday() method, it will be respective of the locale you specify.
[Edit]
I got carried away, didn't answer your question specifically. I'm not aware of anything more elegant than the DateTimeFormatter. But from there you can use a Date object to get the current time, and get what you're after.
There are a handful of date utilities, but I'm not aware of this particular solution. Are you looking for something like this:
var timeFormatter:DateTimeFormatter = new DateTimeFormatter(LocaleID.DEFAULT, DateTimeStyle.NONE, DateTimeStyle.SHORT);
var firstDay:int = timeFormatter.getFirstWeekday()
var now:Date = new Date();
var dayDelta:int = now.day - firstDay;
var firstDayInMillis:Number = now.time - (dayDelta * 86400 * 1000);
// you can construct a new Date from here: var first:Date = new Date(firstDayInMillis);