vue2-datepicker disable days range date - vue.js

I using vue2-datepicker. I have range of date:
from: 02-10-2019
to: 07-10-2019
I need disabled all days without this range.
I used method disabled-days but I don't know how I can declare range in this function. I can only disable individual days, for example:
<date-picker
v-model="dateAccept"
range
:disabled-days="disabledDates2"
valueType="format">
</date-picker>
disabledDates2: [
new Date(2019, 10, 2), new Date(2019, 10, 6)
]
In vue-datepicker (version 1) isset function :disabled-dates but not working in version 2

I found resolve. Just I used in data function:
disabledBefore: new Date(2019, 10, 2),
disabledAfter: new Date(2019, 10, 6)
And in datepicker:
<date-picker
v-model="dateAccept"
range
valueType="format"
:not-before="disabledBefore"
:not-after="disabledAfter">
</date-picker>

have a look at ref
you can use the method
<data-picker ... :disabled-date="disabledRange" range></data-picker>
methods: {
...
disabledRange: function (date) {
return date < new Date(2019, 10, 2) || date > new Date(2019, 10, 6);
}
...
}

Related

How to recover Flux element in case of an error

Consider I have following code:
Flux.fromIterable(List.of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11))
.flatMap(integer -> {
if (integer == 5) {
throw new RuntimeException("error");
}
return just(Tuples.of(integer, new Random().nextInt()));
})
.onErrorContinue((throwable, o) -> just(Tuples.of(o, 0)))
.log()
.subscribe();
which outputs:
onSubscribe([Fuseable] FluxContextStart.ContextStartSubscriber)
request(unbounded)
onNext([1,-1752848133])
onNext([2,-1719473285])
onNext([3,819220275])
onNext([4,-725013418])
onNext([6,-1693809308])
onNext([7,1457499883])
onNext([8,-740589679])
onNext([9,1718349574])
onNext([10,-861794538])
onNext([11,1016444064])
onComplete()
Is there a way that so I can recover 5 with a default value instead of dropping it?
See onErrorReturn() and onErrorResume(). You probably need to use it inside a flatMap() on the inner Mono over the value to avoid loosing the rest of original Flux values.

React Native How Get first and last date of current month to DatePicker [duplicate]

If you provide 0 as the dayValue in Date.setFullYear you get the last day of the previous month:
d = new Date(); d.setFullYear(2008, 11, 0); // Sun Nov 30 2008
There is reference to this behaviour at mozilla. Is this a reliable cross-browser feature or should I look at alternative methods?
var month = 0; // January
var d = new Date(2008, month + 1, 0);
console.log(d.toString()); // last day in January
IE 6: Thu Jan 31 00:00:00 CST 2008
IE 7: Thu Jan 31 00:00:00 CST 2008
IE 8: Beta 2: Thu Jan 31 00:00:00 CST 2008
Opera 8.54: Thu, 31 Jan 2008 00:00:00 GMT-0600
Opera 9.27: Thu, 31 Jan 2008 00:00:00 GMT-0600
Opera 9.60: Thu Jan 31 2008 00:00:00 GMT-0600
Firefox 2.0.0.17: Thu Jan 31 2008 00:00:00 GMT-0600 (Canada Central Standard Time)
Firefox 3.0.3: Thu Jan 31 2008 00:00:00 GMT-0600 (Canada Central Standard Time)
Google Chrome 0.2.149.30: Thu Jan 31 2008 00:00:00 GMT-0600 (Canada Central Standard Time)
Safari for Windows 3.1.2: Thu Jan 31 2008 00:00:00 GMT-0600 (Canada Central Standard Time)
Output differences are due to differences in the toString() implementation, not because the dates are different.
Of course, just because the browsers identified above use 0 as the last day of the previous month does not mean they will continue to do so, or that browsers not listed will do so, but it lends credibility to the belief that it should work the same way in every browser.
I find this to be the best solution for me. Let the Date object calculate it for you.
var today = new Date();
var lastDayOfMonth = new Date(today.getFullYear(), today.getMonth()+1, 0);
Setting day parameter to 0 means one day less than first day of the month which is last day of the previous month.
I would use an intermediate date with the first day of the next month, and return the date from the previous day:
int_d = new Date(2008, 11+1,1);
d = new Date(int_d - 1);
In computer terms, new Date() and regular expression solutions are slow! If you want a super-fast (and super-cryptic) one-liner, try this one (assuming m is in Jan=1 format). I keep trying different code changes to get the best performance.
My current fastest version:
After looking at this related question Leap year check using bitwise operators (amazing speed) and discovering what the 25 & 15 magic number represented, I have come up with this optimized hybrid of answers (note the parameters m & y must obviously be integers for this to work):
function getDaysInMonth(m, y) {
return m===2 ? y & 3 || !(y%25) && y & 15 ? 28 : 29 : 30 + (m+(m>>3)&1);
}
Given the bit-shifting this obviously assumes that your m & y parameters are both integers, as passing numbers as strings would result in weird results.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/H89X3/22/
JSPerf results: http://jsperf.com/days-in-month-head-to-head/5
For some reason, (m+(m>>3)&1) is more efficient than (5546>>m&1) on almost all browsers.
The only real competition for speed is from #GitaarLab, so I have created a head-to-head JSPerf for us to test on: http://jsperf.com/days-in-month-head-to-head/5
It works based on my leap year answer here: javascript to find leap year this answer here Leap year check using bitwise operators (amazing speed) as well as the following binary logic.
A quick lesson in binary months:
If you interpret the index of the desired months (Jan = 1) in binary you will notice that months with 31 days either have bit 3 clear and bit 0 set, or bit 3 set and bit 0 clear.
Jan = 1 = 0001 : 31 days
Feb = 2 = 0010
Mar = 3 = 0011 : 31 days
Apr = 4 = 0100
May = 5 = 0101 : 31 days
Jun = 6 = 0110
Jul = 7 = 0111 : 31 days
Aug = 8 = 1000 : 31 days
Sep = 9 = 1001
Oct = 10 = 1010 : 31 days
Nov = 11 = 1011
Dec = 12 = 1100 : 31 days
That means you can shift the value 3 places with >> 3, XOR the bits with the original ^ m and see if the result is 1 or 0 in bit position 0 using & 1. Note: It turns out + is slightly faster than XOR (^) and (m >> 3) + m gives the same result in bit 0.
JSPerf results: http://jsperf.com/days-in-month-perf-test/6
My colleague stumbled upon the following which may be an easier solution
function daysInMonth(iMonth, iYear)
{
return 32 - new Date(iYear, iMonth, 32).getDate();
}
stolen from http://snippets.dzone.com/posts/show/2099
A slight modification to solution provided by lebreeze:
function daysInMonth(iMonth, iYear)
{
return new Date(iYear, iMonth, 0).getDate();
}
I recently had to do something similar, this is what I came up with:
/**
* Returns a date set to the begining of the month
*
* #param {Date} myDate
* #returns {Date}
*/
function beginningOfMonth(myDate){
let date = new Date(myDate);
date.setDate(1)
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
return date;
}
/**
* Returns a date set to the end of the month
*
* #param {Date} myDate
* #returns {Date}
*/
function endOfMonth(myDate){
let date = new Date(myDate);
date.setDate(1); // Avoids edge cases on the 31st day of some months
date.setMonth(date.getMonth() +1);
date.setDate(0);
date.setHours(23);
date.setMinutes(59);
date.setSeconds(59);
return date;
}
Pass it in a date, and it will return a date set to either the beginning of the month, or the end of the month.
The begninngOfMonth function is fairly self-explanatory, but what's going in in the endOfMonth function is that I'm incrementing the month to the next month, and then using setDate(0) to roll back the day to the last day of the previous month which is a part of the setDate spec:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setDate
https://www.w3schools.com/jsref/jsref_setdate.asp
I then set the hour/minutes/seconds to the end of the day, so that if you're using some kind of API that is expecting a date range you'll be able to capture the entirety of that last day. That part might go beyond what the original post is asking for but it could help someone else looking for a similar solution.
Edit: You can also go the extra mile and set milliseconds with setMilliseconds() if you want to be extra precise.
How NOT to do it
Beware of any answers for the last of the month that look like this:
var last = new Date(date)
last.setMonth(last.getMonth() + 1) // This is the wrong way to do it.
last.setDate(0)
This works for most dates, but fails if date is already the last day of the month, on a month that has more days than the following month.
Example:
Suppose date is 07/31/21.
Then last.setMonth(last.getMonth() + 1) increments the month, but keeps the day set at 31.
You get a Date object for 08/31/21,
which is actually 09/01/21.
So then last.setDate(0) results in 08/31/21 when what we really wanted was 07/31/21.
try this one.
lastDateofTheMonth = new Date(year, month, 0)
example:
new Date(2012, 8, 0)
output:
Date {Fri Aug 31 2012 00:00:00 GMT+0900 (Tokyo Standard Time)}
This works for me.
Will provide last day of given year and month:
var d = new Date(2012,02,0);
var n = d.getDate();
alert(n);
This one works nicely:
Date.prototype.setToLastDateInMonth = function () {
this.setDate(1);
this.setMonth(this.getMonth() + 1);
this.setDate(this.getDate() - 1);
return this;
}
You can get the First and Last Date in the current month by following the code:
var dateNow = new Date();
var firstDate = new Date(dateNow.getFullYear(), dateNow.getMonth(), 1);
var lastDate = new Date(dateNow.getFullYear(), dateNow.getMonth() + 1, 0);
or if you want to format the date in your custom format then you can use moment js
var dateNow= new Date();
var firstDate=moment(new Date(dateNow.getFullYear(),dateNow.getMonth(), 1)).format("DD-MM-YYYY");
var currentDate = moment(new Date()).format("DD-MM-YYYY"); //to get the current date var lastDate = moment(new
Date(dateNow.getFullYear(), dateNow.getMonth() + 1, 0)).format("DD-MM-YYYY"); //month last date
This will give you current month first and last day.
If you need to change 'year' remove d.getFullYear() and set your year.
If you need to change 'month' remove d.getMonth() and set your year.
var d = new Date();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var fistDayOfMonth = days[(new Date(d.getFullYear(), d.getMonth(), 1).getDay())];
var LastDayOfMonth = days[(new Date(d.getFullYear(), d.getMonth() + 1, 0).getDay())];
console.log("First Day :" + fistDayOfMonth);
console.log("Last Day:" + LastDayOfMonth);
alert("First Day :" + fistDayOfMonth);
alert("Last Day:" + LastDayOfMonth);
Try this:
function _getEndOfMonth(time_stamp) {
let time = new Date(time_stamp * 1000);
let month = time.getMonth() + 1;
let year = time.getFullYear();
let day = time.getDate();
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
day = 31;
break;
case 4:
case 6:
case 9:
case 11:
day = 30;
break;
case 2:
if (_leapyear(year))
day = 29;
else
day = 28;
break
}
let m = moment(`${year}-${month}-${day}`, 'YYYY-MM-DD')
return m.unix() + constants.DAY - 1;
}
function _leapyear(year) {
return (year % 100 === 0) ? (year % 400 === 0) : (year % 4 === 0);
}
const today = new Date();
let beginDate = new Date();
let endDate = new Date();
// fist date of montg
beginDate = new Date(
`${today.getFullYear()}-${today.getMonth() + 1}-01 00:00:00`
);
// end date of month
// set next Month first Date
endDate = new Date(
`${today.getFullYear()}-${today.getMonth() + 2}-01 :23:59:59`
);
// deducting 1 day
endDate.setDate(0);
Below function gives the last day of the month :
function getLstDayOfMonFnc(date) {
return new Date(date.getFullYear(), date.getMonth(), 0).getDate()
}
console.log(getLstDayOfMonFnc(new Date(2016, 2, 15))) // Output : 29
console.log(getLstDayOfMonFnc(new Date(2017, 2, 15))) // Output : 28
console.log(getLstDayOfMonFnc(new Date(2017, 11, 15))) // Output : 30
console.log(getLstDayOfMonFnc(new Date(2017, 12, 15))) // Output : 31
Similarly we can get first day of the month :
function getFstDayOfMonFnc(date) {
return new Date(date.getFullYear(), date.getMonth(), 1).getDate()
}
console.log(getFstDayOfMonFnc(new Date(2016, 2, 15))) // Output : 1
Here is an answer that conserves GMT and time of the initial date
var date = new Date();
var first_date = new Date(date); //Make a copy of the date we want the first and last days from
first_date.setUTCDate(1); //Set the day as the first of the month
var last_date = new Date(first_date); //Make a copy of the calculated first day
last_date.setUTCMonth(last_date.getUTCMonth() + 1); //Add a month
last_date.setUTCDate(0); //Set the date to 0, this goes to the last day of the previous month
console.log(first_date.toJSON().substring(0, 10), last_date.toJSON().substring(0, 10)); //Log the dates with the format yyyy-mm-dd
function getLastDay(y, m) {
return 30 + (m <= 7 ? ((m % 2) ? 1 : 0) : (!(m % 2) ? 1 : 0)) - (m == 2) - (m == 2 && y % 4 != 0 || !(y % 100 == 0 && y % 400 == 0));
}
set month you need to date and then set the day to zero ,so month begin in 1 - 31 in date function then get the last day^^
var last = new Date(new Date(new Date().setMonth(7)).setDate(0)).getDate();
console.log(last);
I know it's just a matter of semantics, but I ended up using it in this form.
var lastDay = new Date(new Date(2008, 11+1,1) - 1).getDate();
console.log(lastDay);
Since functions are resolved from the inside argument, outward, it works the same.
You can then just replace the year, and month / year with the required details, whether it be from the current date. Or a particular month / year.
If you need exact end of the month in miliseconds (for example in a timestamp):
d = new Date()
console.log(d.toString())
d.setDate(1)
d.setHours(23, 59, 59, 999)
d.setMonth(d.getMonth() + 1)
d.setDate(d.getDate() - 1)
console.log(d.toString())
The accepted answer doesn't work for me, I did it as below.
$( function() {
$( "#datepicker" ).datepicker();
$('#getLastDateOfMon').on('click', function(){
var date = $('#datepicker').val();
// Format 'mm/dd/yy' eg: 12/31/2018
var parts = date.split("/");
var lastDateOfMonth = new Date();
lastDateOfMonth.setFullYear(parts[2]);
lastDateOfMonth.setMonth(parts[0]);
lastDateOfMonth.setDate(0);
alert(lastDateOfMonth.toLocaleDateString());
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<button id="getLastDateOfMon">Get Last Date of Month </button>
</body>
</html>
This will give you last day of current month.
notes: on ios device include time.
#gshoanganh
var date = new Date();
console.log(new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59));
if you just need to get the last date of a month following worked out for me.
var d = new Date();
const year = d.getFullYear();
const month = d.getMonth();
const lastDay = new Date(year, month +1, 0).getDate();
console.log(lastDay);
try it out here https://www.w3resource.com/javascript-exercises/javascript-date-exercise-9.php
In my case, this code was useful
end_date = new Date(2018, 3, 1).toISOString().split('T')[0]
console.log(end_date)

Having trouble in reducer to get all api data together

I am in middle of setting up redux for managing state for all my api data. I have infinite flatlist that grow with query with offset and limit i pass to api param.
Now issue remain — I am able to get first set of data but never combine data of all api calls. I am sure i am doing something silly out there.
I am stuck badly here that investing day and night here. Any help will greatly appreciated here.
Reducer:
import { RECEIVED_NEWS } from './actions';
export const news = (state = [], action) => {
//console.log('action data is '+JSON.stringify(action));
switch (action.type) {
case RECEIVED_NEWS:
return [...state, action.apidata];
default:
return state;
}
};
Action:
export const RECEIVED_NEWS = 'RECEIVED_NEWS';
export const addNews = apidata => ({
type: RECEIVED_NEWS,
apidata
});
Sample api data : https://codebeautify.org/online-json-editor/cb73c978 or https://pastebin.com/rS8Aj4ex
Object dir that i print with console http://navgujaratsamay.co.in/wp-content/uploads/2019/02/Screenshot-2019-02-01-at-5.09.41-PM.png
I am expecting merging all all api calls and i am successfully calling store but every time getting only last call data.
You need to do:
return [...state, ...action.apidata]
because action.apidata is a array too, you need to spread it too otherwise it will get nested. If apidata was not an array just an object, then no need to spread it.
eg:
> let arr1 = [1, 2, 3, 4, 5]
> let arr2 = [6, 7, 8, 9, 0]
> [...arr1, arr2] // wrong
< [1, 2, 3, 4, 5, [6, 7, 8, 9, 0]] // gives a nested array
> [...arr1, ...arr2] // correct
< [1, 2, 3, 4, 5, 6, 7, 8, 9, 0] // merges properly
> let num = 10
> [...arr1, num] // no spreading required when it's not an array
< [1, 2, 3, 4, 5, 10] // merges properly

How to convert LocalDateTime to Date object in angular

I need to convert LocalDateTime to Date object in angular 5
How can I do that?
The date is in this format [2018,1,25,0,0]
If the date you are being provided is [ 2016, 1, 5, 0, 0 ] this is an array, so we can pull each item out and place it into the new Date() method.
See example below:-
d = [ 2016, 1, 5, 0, 0 ];
endDate = new Date(d[0], d[1] - 1, d[2])
console.log(endDate);
I am also guessing that the 1 is January, if not, please remove the - 1 inside the new Date() method.
So your code will look like:-
let data = {
endDate: [2016, 1, 5, 0, 0]
}
data['endDate'] = new Date(data['endDate'][0], data['endDate'][1] - 1, data['endDate'][2])
console.log(data)
new Date(LocalDateTime)
where LocalDateTime is your local date time

Role on dynamic google chart (interval)

How can I use this: https://developers.google.com/chart/interactive/docs/roles if I populate the graph dynamically?
This is part of my code:
...
data.addRows(dates.length);
for (i = 0; i < dates.length; i++){
if (i!=0){
data.setValue( i, 0, new Date(dates[i]) );
temp = graph[dates[i]];
var j = 0;
if (temp){
for (j = 0; j < groups.length; j++){
if ( groups[j] in temp){
var volume = parseFloat(temp[groups[j]]);
console.log(i + ' ' + j + ' ' + volume);
data.setValue( i, j+1, volume )
}
}
}
}else{
data.setValue( i, 0, new Date(dates[i]) );
var j = 0;
for (j = 0; j < groups.length; j++){
data.setValue( 0, j+1, 0 )
}
}
}
...
After I set the value with 'data.setValue', how can I set also the role? (I need for the interval value) Something like 'data.setRole' would be wonderful!! :-)
You can create the DataTable without any roles, and then create a DataView that assigns roles to the columns in the view. The documentation shows how to do this here:
DataView.setColumns Method
When creating a view, you can explicitly set the role of a column.
This is useful when creating a new calculated column. See
DataView.setColumns() for more information.
The DataView.setColumns() help file explains how to do this as follows:
setColumns(columnIndexes)
columnIndexes - An array of numbers and/or objects (can be mixed):
Numbers specify the index of the source data column to include in the view. The data is brought through unmodified. If you
need to explicitly define a role or additional column properties,
specify an object with a sourceColumn property.
Objects specify a calculated column. A calculated column creates a
value on the fly for each row and adds it to the view. The object
must have the following properties:
calc [function] - A function that will be called for each row in the column to calculate a value for that cell. The function
signature is func(dataTable, row), where dataTable is the source
DataTable, and row is the index of the source data row. The
function should return a single value of the type specified by
type.
type [string] - The JavaScript type of the value that the calc function returns.
label [Optional, string] - An optional label to assign to this generated column. If not specified, the view column will have no
label.
id [Optional, string] - An optional ID to assign to this generated column.
sourceColumn - [Optional, number] The source column to use as a value; if specified, do not specify the calc or the type property.
This is similar to passing in a number instead of an object, but
enables you to specify a role and properties for the new column.
properties [Optional, object] - An object containing any arbitrary properties to assign to this column. If not specified, the view
column will have no properties.
role [Optional, string] - A role to assign to this column. If not specified, the existing role will not be imported.
So if your interval column is column #3, for instance, you would say:
dataView.setColumns([0, 1, {sourceColumn: 2, role: 'interval'}]);
The above sets columns 0, and 1 as-is, without a role, while column 2 is assigned as an interval column.
EDIT
Responding to the comments, the intervals are in the data set. Here is an example:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Interval A', 'Interval B'],
['2003', 100, 95, 125],
['2004', 110, 96, 150],
['2005', 120, 97, 175],
['2006', 130, 98, 200],
['2007', 140, 99, 225],
['2008', 150, 100, 250]
]);
// Create Data View using columns 2 & 3 as intervals
var dataView = new google.visualization.DataView(data);
dataView.setColumns([0, 1, {sourceColumn: 2, role: 'interval'}, {sourceColumn: 3, role: 'interval'}]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(dataView,
{width:600, height:400,
hAxis: {title: "Year"}}
);
}
You include the interval values in the original data table as columns. You then use a dataview to change those columns to 'interval' role columns. Then you draw the dataview. This will provide error bars (interval columns) as expected.