I want to add the functionality to Material Date picker to be able to select Weeks..
So when I select one date from a row,, I want it to output a date range from the beginning of the week to the end of the week.
I did that before, on a regular jquery calendar - -check the photo,, but I wonder if that is possible in mat-datepicker
OOOk i was experimienting a lot, and this its the result of my fuction
firts we set the monday, i have a function (filter week) that set the value of monday and sunday, for a request that a i send, i post it just for the example.
now in dateclass(), its a function for make the classes of the cells in the date picker change, in the html, on the "<mat-datepicker" use [dateClass]="dateClass()" for calling
now, inside this function i have 2 if, its for validate that the monday its not 30 or 31, in that case the rest of the day are 1,2,3,etc (now im thinking about it i need to fix this validation xD because if tusday are 30 or 31, the problem will persis) anyway, wehn u have the value of avery day of the week, use the function of time .valueOf() to compare de value of time between date (the date value are inside the if inside the if xD) and the value of the day of the week
write me if need help for applicate it. use this referend question for understanding better the way that i set the color of the special days
filterWeek(){
let d = this.selectedW
let day = d.getDay();
let diffm = d.getDate()-day +1;
let diffs = d.getDate()-day +7;
let mon = new Date(d.setDate(diffm));
let sun = new Date(d.setDate(diffs));
if(mon.getDate() > sun.getDate()){
this.monday=mon.getFullYear()+'-'+(mon.getMonth()+1)+'-'+mon.getDate();
this.sunday =sun.getFullYear()+'-'+(sun.getMonth()+2)+'-'+sun.getDate();
}else{
this.monday=mon.getFullYear()+'-'+(mon.getMonth()+1)+'-'+mon.getDate();
this.sunday =sun.getFullYear()+'-'+(sun.getMonth()+1)+'-'+sun.getDate();
}
}
dateClass() {
let l:any =new Date(this.monday);
var day = new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 0);
if(l.getDate() === day.getDate()){
let m:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 1);
let x:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 2);
let j:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 3);
let v:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 4);
let s:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 5);
let d:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, 6);
return (date: Date): MatCalendarCellCssClasses => {
if (date.valueOf() === l.valueOf() || date.valueOf() === m.valueOf() || date.valueOf() === x.valueOf()
||date.valueOf() === j.valueOf() || date.valueOf() === v.valueOf() || date.valueOf() === s.valueOf()
|| date.valueOf() === d.valueOf()) {
return 'special-date';
} else {
return;
}
};
}else{
let m:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 1, new Date(this.monday).getDate()+1);
let x:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 2, new Date(this.monday).getDate()+2);
let j:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 2, new Date(this.monday).getDate()+3);
let v:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 2, new Date(this.monday).getDate()+4);
let s:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 2, new Date(this.monday).getDate()+5);
let d:any =new Date(new Date(this.monday).getFullYear(), new Date(this.monday).getMonth() + 2, new Date(this.monday).getDate()+6);
return (date: Date): MatCalendarCellCssClasses => {
if (date.valueOf() === l.valueOf() || date.valueOf() === m.valueOf() || date.valueOf() === x.valueOf()
||date.valueOf() === j.valueOf() || date.valueOf() === v.valueOf() || date.valueOf() === s.valueOf()
|| date.valueOf() === d.valueOf()) {
return 'special-date';
} else {
return;
}
};
}
}
If like me you're using Moment for the date provider you could use this :
import { Injectable } from '#angular/core';
import { DateAdapter } from '#angular/material/core';
import {
DateRange, MatDateRangeSelectionStrategy
} from '#angular/material/datepicker';
import { Moment } from 'moment';
#Injectable()
export class WeekRangeSelectionStrategy<D> implements MatDateRangeSelectionStrategy<D>
{
constructor(private _dateAdapter: DateAdapter<D>) { }
selectionFinished(date: D | null): DateRange<D> {
return this._createFiveDayRange(date);
}
createPreview(activeDate: D | null): DateRange<D> {
return this._createFiveDayRange(activeDate);
}
private _createFiveDayRange(date: D | null): DateRange<D> {
let currentDate: Moment | Date;
if (date) {
currentDate = (date as unknown as Moment);
currentDate = currentDate.startOf('week');
const start = this._dateAdapter.addCalendarDays(currentDate as unknown as D, 0);
const end = this._dateAdapter.addCalendarDays(currentDate as unknown as D, 6);
return new DateRange<D>(start, end);
}
return new DateRange<D>(null, null);
}
}
In the component :
providers:[ {
provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
useClass: WeekRangeSelectionStrategy,
}]
Nota : This works for all locales
Related
can someone help me figure what's wrong with my logic?, i'm new using google script app and stuck around a week and got this error
Error message:
TypeError: d1.getTime is not a function (inDays)
var DateDiff = {
inDays: function(d1, d2) {
var t2 = d2.getTime();
var t1 = d1.getTime();
Logger.log("t1" + t1)
return parseInt((t2-t1)/(24*3600*1000)+1);
}
}
var dateStr = data[m][xMonth].toString() // the value here is =>1/10/2022
var todayDate = new Date();
if(dateStr.toString().includes('/')){
var yearA = '20'+dateStr.substring(6, 8)
var monthA = +dateStr.substring(3, 5)
if(monthA.toString() != '11' || monthA.toString() != '12') monthA = '0'+monthA
var dayA = +dateStr.substring(0, 2)
var tempDate = yearA + monthA + dayA
var Ryear = +tempDate.substring(0, 4)
var Rmonth = +tempDate.substring(4, 6)
var Rday = +tempDate.substring(6, 8)
var newDate = new Date(Ryear, Rmonth - 1, Rday)//because month start from 0
var realDueDate = DateDiff.inDays(todayDate, newDate) // error here in var newDate
}
Try this:
function myFunk() {
const D2 = new Date();
const D1 = new Date(D2.getFullYear(),D2.getMonth() - 2,D2.getDate());
var DateDiff = {
d1:D1,d2:D2,
inDays: function () {
let t2 = this.d2.getTime();
let t1 = this.d1.getTime();
return parseInt((t2 - t1) / (24 * 3600 * 1000) + 1);
}
}
Logger.log(DateDiff.inDays());
}
Execution log
10:58:41 AM Notice Execution started
10:58:39 AM Info 62.0
10:58:41 AM Notice Execution completed
I am making a spreadsheet that requires finding out if a certain cell range has been edited and then add the date that it was edited on. I have the range of cells needed to be edited, and I also don't want the date to change if I sort the table from a different column.
I would think the general idea would look something like this, not actual code just an idea:
cell_range=(b2:d2)
if (cell_range)==editted:
date()
if (table_sort==True):
date_change==False
If anyone knows how to do this, that would be greatly appreciated.
you need a script for this. try for example:
function onEdit(e) {
var s = SpreadsheetApp.getActiveSheet();
if( s.getName() == "Sheet1" ) {
var r = s.getActiveCell();
if( r.getColumn() == 2 ) {
var nextCell = r.offset(0, 8);
var newDate = Utilities.formatDate(new Date(),
"GMT+8", "MM/dd/yyyy");
nextCell.setValue(newDate);
}
if( r.getColumn() == 3 ) {
var nextCell = r.offset(0, 7);
var newDate = Utilities.formatDate(new Date(),
"GMT+8", "MM/dd/yyyy");
nextCell.setValue(newDate);
}
if( r.getColumn() == 4 ) {
var nextCell = r.offset(0, 6);
var newDate1 = Utilities.formatDate(new Date(),
"GMT+8", "MM/dd/yyyy");
nextCell.setValue(newDate1);
}}}
"Sheet1" = sheet name
r.getColumn() == 3 = column C / 3rd column
r.offset(0, 7) = offset timestamp 7 columns to the right on the same row eg column H
"GMT+8" = timezone
"MM/dd/yyyy hh:mm:ss" = date and time format
alternative (untested):
function onEdit(e) {
if ([2].indexOf(e.range.columnStart) != -1) {
e.range.offset(0, 7).setValue(new Date()); }
if ([3].indexOf(e.range.columnStart) != -1) {
e.range.offset(0, 6).setValue(new Date()); }
if ([4].indexOf(e.range.columnStart) != -1) {
e.range.offset(0, 5).setValue(new Date()); } }
I'm trying to disable the weekends (saturdays and sundays) and some dates (like '2018-05-11', '2018-05-21', '2018-05-24', etc.) in MaterializeCSS datepicker, but I want to disable those dates every year. I'm able to disable the days and dates with
$('.datepicker').pickadate({
disable: [
1, 7, new Date(2018,5,11), {from: [2018,5,11], to: [2018,5,22]}, {from: [2018,8,5], to: [2018,8,17]}
]
});
So I want to know if there's a way to made it repeat every year.
materializecss pickers
You can customize which days are disabled with the disableDayFn option when initializing the datepicker. This CodePen shows an example of the disableDayFn option being used to disable weekends, May 11th, 21st, and 24th of every year.
$('.disablePast').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 105, // Creates a dropdown of 15 years to control year,
today: 'Today',
clear: 'Clear',
close: 'Ok',
format : 'dd/mm/yyyy',
closeOnSelect: true,
min : true
});
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 105, // Creates a dropdown of 15 years to control year,
today: 'Today',
clear: 'Clear',
close: 'Ok',
format : 'dd/mm/yyyy',
closeOnSelect: true,
onSet: function(context) {
var id = this.$node[0].id;
var d = new Date(context.select);
var dd = d.getDate();
var mm = d.getMonth()+1; //January is 0!
var yyyy = '';
yyyy = new Date().getFullYear();
year1=yyyy;
month1=mm;
if(dd<10){
dd='0'+dd;
}
if(mm<10){
mm='0'+mm;
}
var df = mm+'/'+dd+'/'+yyyy;
var msec = Date.parse(df);
var d1 = new Date();
var d2 = new Date(msec);
var timeDiff = d2.getTime() - d1.getTime();
var DaysDiff = timeDiff / (1000 * 3600 * 24);
var dff = '';
var dft = '';
if(DaysDiff >= 0){
dff = dd+'/'+mm+'/'+yyyy;
} else{
yyyy = yyyy + 1;
dff = dd+'/'+mm+'/'+yyyy;
}
if(month1==1)
{
year1 = year1 - 1;
month1 = 12;
}
else if(month1<=10)
{
month1=month1-1;
month1='0'+month1;
}
else
{
month1=month1-1;
}
dft = dd+'/'+month1+'/'+year1;
/*if(df > 0){
dft = dd+'/'+mm+'/'+yyyy;
}
// if(mm = 01) {
// mm = 12;
// yyyy = yyyy - 1;
// dft = dd+'/'+mm+'/'+yyyy;
// }
else{
yyyy = yyyy + 1;
mm = mm - 1;
dft = dd+'/'+mm+'/'+yyyy;
}*/
console.log(dft);
if(id == 'dob')
$('#dob_rem_on').val(dff);
if(id == 'aniv_date')
$('#aniv_rem_on').val(dff);
if(id == 'passport_ren')
$('#pass_rem_on').val(dft);
if(id == 'insurance_ren')
$('#insurance_rem_on').val(dft);
if(id == 'life_insurance_ren')
$('#life_insurance_rem_on').val(dft);
Materialize.updateTextFields();
}
});
I'm trying to make the datepicker disable 1 week from the current date.
The code is for a datepicker for room reservation using an onRender function.
Please help me :(
$(function() {
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#ad').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dd').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');
});
I try to disabled the date for holidays and weekend but that not work
My code :
$(function() {
$('.thing12DatePicker').datepicker(
{
beforeShowDay: function (date) {
var startDate = "2017-06-17",
endDate = "2017-06-21",
dateRange = [];
for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
dateRange.push($.datepicker.formatDate('yy-mm-dd', d)&& $.datepicker.noWeekends);
}
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [dateRange.indexOf(dateString) == -1];
}
});
});
The date holidays are disabled but not the weekend !
I want disbled the weekend .
thx
I have found solution
var startDate = "2017-06-17",
endDate = "2017-06-21",
bankHoliDays = [];
for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)){
bankHoliDays.push($.datepicker.formatDate('yy-mm-dd', d));
}
function disableDates(date) {
var dt = $.datepicker.formatDate('yy-mm-dd', date);
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? (($.inArray(dt, bankHoliDays) < 0) ? [true] : [false]) : noWeekend;
}
$(function () {
$('#datepicker').datepicker({
beforeShowDay: disableDates
});
});