I want to initially display the last month's last date, for example, this is November, I want to display 31/10/2019. How is it possible?
var date = new Date();
date.setMonth(date.getMonth())
const firstDayOfCurrent = new Date(date.getFullYear(), date.getMonth(), 0);
const firstDayOfCurrentMonth = moment(firstDayOfCurrent).format('MM/DD/YYYY')
console.log(firstDayOfCurrentMonth);
<td><input type="date" value={firstDayOfCurrentMonth} onChange={(e) => { this.state.invoice.InvoiceDateString = e.target.value; this.setState({ isset: true }); }} required /></td>
This code snippet will give you last date of last month
var date = new Date();
date.setMonth(date.getMonth())
var lastDay = new Date(date.getFullYear(), date.getMonth(), 0);
var lastDayOfLastMonth = lastDay.toISOString().substr(0, 10);
and your input tag
<input type="date" defaultValue={lastDayOfLastMonth } required />
You can take month from current date to take first day of current month and then subtract one day:
const today = new Date();
const firstDayOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), -1);
``
I would recommend to use date-fns, which has a ton of helper functions you could use for that use-case.
For example lastDayOfMonth, which returns the last day of the month.
It also allows tree-shacking, so that you do not import the whole library, but only the functions you use.
Related
I am trying to create a calendar which depends on a parameter. If the user wants a weekend pass I need to let him choose only one set of the days Friday, Saturday, Sunday in the period of one month.
Example:
If I choose to buy a weekend pass today 09/09/2021, I can have the options 10-12/09,17-19/09,24-26/09 for September.
The calendar has to be Infinite in order to be renewed every day. I have created the values date, month, year to get the current full date, which I parse to minDate maxDate in order to limit the options into only one month.
Code:
render() {
let newDate = new Date()
let date = newDate.getDate();
let month = newDate.getMonth();
let year = newDate.getFullYear();
let weeklyVignette = newDate.getDate();
const {label, t, value = '', loading, error, width, height, displayOptions, locale, key, required, validateOnBlur,
theme, name, proposed, disabled = false, onChange, minDateBeforeToday, setError, available=true,
minDate = new Date(year, month, date),
maxDate = new Date(year, month, date+30)} = this.props;
const {selected} = this.state;
const _locale ={...locale, ...{weekdays: locale.weekdays.map(day => t(day))}}
const resultCalendar =
this.state.open && !disabled
? <InfiniteCalendar
width={width}
height={height}
selected={value||selected||proposed}
displayOptions={displayOptions}
locale={_locale}
theme={theme}
minDate={minDate}
weeklyVignetteDays = { (weeklyVignette===4 && weeklyVignette===5 && weeklyVignette===6 )}
max = { new Date(year, month, date+30) } // Maximum month to render
min = { new Date(year, month, date) } // Minimum month to render
maxDate={maxDate}
onSelect={(e) => this.onClick(e, onChange)}
/>
: null;
How can I block all the days of the current month except Fridays, Saturdays and Sundays?
Any thoughts?
you should use the property of disabledDays
For example, to disable Monday and Sunday: [0, 6]
in your case you should use: disabledDays = [0,1,2,3]
I want date-picker to show the selected date in the format 15 Jun, 2019, but instead of the selected date it highlights today's date. But it shows the actual selected date when using the format 2019-06-15 instead.
I am using angularjs date-picker from this link
<input ng-show="toggleMe" type="text" readonly placeholder="Deadline"
class="date-picker" ng-datetime-picker="datePickerOptions"
ng-model="deadlineTask" ng-change="changeCurrentTime()" />
// in ng-model wanna show deadlineTask format here what to do that i show format in 'deadlinetask type format an it highlight selected date not the today's date'
angular.module('demo', ['ngDatetimePicker'])
.controller('datePickerCtrl',function($scope,$filter) {
$scope.dt = {};
var currentTime = new Date();
var year = currentTime.getFullYear();
var month = currentTime.getMonth() + 1;
var date = currentTime.getDate();
console.log(currentTime);
$scope.dt.datetime = '2019-06-15'; //showing correct date in this format
$scope.deadlineTask = $filter('date')($scope.dt.datetime, 'd MMM, yyyy');
//showing today's date in this format this format i want but not highlighting the selected date instead of it showing today's date
You want the datepicker to always be using a date format that you define?
Based on the documentation the datepicker you have chosen does not seem to be able to show the format '15 Jun, 2019'. Maybe have a look at another AngularJs datetime picker if that is the case such as this one
To test it I see from your html that you should have an object called datePickerOptions on $scope?
If that is the case define a property called dateFormat within the datePickerOptions object and give it a string value e.g. 'MM, YYYY'
Here you can see this is how they define the date format of an input field:
Here are the formatting options listed:
YYYY: Year, 4 digit
YY: Year, 2 digit
MM: Month, 01-12
M: Month, 1-12
DD: Day, 01-31
D: Day, 1-31
HH: Hour using 12-hour clock 01-12
H: Hour using 12-hour clock 1-12
hh: Hour using 24-hour clock 00-23
h: Hour using 24-hour clock 0-23
mm: Minute, 00-59>
m: Minute, 0-59
tt: am/pm
TT: AM/PM
<input ng-show="toggleMe" type="text" readonly placeholder="Deadline" class="date-picker" ng-datetime-picker="datePickerOptions" ng-model="dt.datetime" ng-change="changeCurrentTime()" />
<script>
angular.module('demo', ['ngDatetimePicker']).
controller('datePickerCtrl', function($scope,$filter) {
$scope.dt = {};
var currentTime = new Date();
var year = currentTime.getFullYear();
var month = currentTime.getMonth() + 1;
var date = currentTime.getDate();
currentTime = year + "-" + month + "-" +"29"+ " 9:00";
$scope.dt.datetime = '2019-06-15';
$scope.deadlineTask = $filter('date')($scope.dt.datetime, 'd MMM, yyyy');
$scope.toggleMe = false;
$scope.datePickerOptions = {
"closeOnSelected": true,
"firstDayOfWeek": 1,
"dateOnly": true
};
$scope.datetimePickerOptions = {
"closeOnSelected": true,
"firstDayOfWeek": 1
};
});
I want to get date of birth of a user, with predefined min and max date which is working fine.
And the date format i want is DD-MM-YYYY, for this i have defined following in config;
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('DD-MM-YYYY');
}}]);
and the controller has
$scope.user = {};
$scope.user.dob = new Date();
$scope.maxDate = new Date(
$scope.user.dob.getFullYear() - 10,
$scope.user.dob.getMonth(),
$scope.user.dob.getDate()
);
$scope.minDate = new Date(
$scope.user.dob.getFullYear() - 120,
$scope.user.dob.getMonth(),
$scope.user.dob.getDate()
);
and the HTML is;
<md-datepicker
ng-model="user.dob"
md-placeholder="Enter date of birth"
md-min-date="minDate"
md-max-date="maxDate">
</md-datepicker>
with this code the field shows current date by default, which i don't want,
i want the date field to be empty by default.
Also i want to get values in both ways as follows
1) date-month-year
And
2) date-month-year hour-minutes-seconds
When i tried to get the value it shows this "09-11-2016T18:30:00.000Z"
i want either "09-11-2016" or "09-11-2016 18:30:00"
Your mdDateLocaleProvider doesnt check for null values.
Your Problem is:
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('DD-MM-YYYY');
}}]);
it needs to be something like:
$mdDateLocaleProvider.formatDate = function(date) {
var m = moment(date);
return m.isValid()? m.format('DD-MM-YYYY') : '';
};
Then you can set
$scope.user.dob=null;
And get an empty Datepicker.
The problem is your ng-model. You're initializing it with the current date:
$scope.user.dob = new Date();
Simply empty this variable and you'll be good ;)
I'm new to angular js and moment.js i have the following code which gives the start day and end day of a week like January 17th-January 23rd. but i want all the 7 days in this format january 17, monday.
My code
var currentDate,
weekStart,
weekEnd,
shortWeekFormat = 'MMMM Do';
function setCurrentDate(aMoment){
currentDate = aMoment,
weekStart = currentDate.clone().startOf('week'),
weekEnd = currentDate.clone().endOf('week')
}
setCurrentDate(moment());
$scope.currentWeek = function(){ return currentDate.format(shortWeekFormat); };
$scope.currentWeekStart = function(){ return weekStart.format(shortWeekFormat); };
$scope.currentWeekEnd = function(){ return weekEnd.format(shortWeekFormat); };
HTML
<h2><i class="fa fa-arrow-left"></i>Week Of {{currentWeek()}}{{currentWeekStart()}}-{{currentWeekEnd()}}<i class="fa fa-arrow-right"></i></h2>
<button ng-click="prevWeek()">previous week</button>
<button ng-click="nextWeek()">next week</button>
The format you want can be achieved with below moment code.
moment('01/19/2016').format("MMMM Do,dddd");
Now, to get all dates between a week you need to use array which holds all the seven dates for you. With simple for loop adding days to start date you can achieve what you want. Take a look at below sample code.
var currentDate = moment();
var weekStart = currentDate.clone().startOf('week');
var weekEnd = currentDate.clone().endOf('week');
var days = [];
for (i = 0; i <= 6; i++) {
days.push(moment(weekStart).add(i, 'days').format("MMMM Do,dddd"));
};
console.log(days);
console.log(moment('01/19/2016').format("MMMM Do,dddd"));
Now to use it with angular you can assign days array to some scope variable and use ng-repeat to display dates.
JSFiddle
Improving J-D's answer. This will return an array of moment objects:
const getCurrentWeekDays = () => {
const weekStart = moment().startOf('week');
const days = [];
for (let i = 0; i <= 6; i++) {
days.push(moment(weekStart).add(i, 'days'));
}
return days;
}
Im using this Angular directive for date range picker
https://github.com/g00fy-/angular-datepicker
At the moment is sets the default date to current date
How can I set the first date range to be 1st day of the month. How to set the date?
<div date-range start="a" end="b"> </div>
{{(a|date)||"pick start"}} {{(b|date)||"pick end"}}
You could use
var date = new Date();
$scope.a = new Date(date.getFullYear(), date.getMonth(), 1);
$scope.b = new Date(date.getFullYear(), date.getMonth() + 1, 0);