I know that there are other packages which help in picking multiple dates. But is there any way I can do this using react-datepicker only?
If you are referring to a date range you can use the following format,
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
minDate={moment()}
maxDate={moment().add(5, "days")}
placeholderText="Select a date between today and 5 days in the future"
/>
But if you want to pick multiple non continous dates, you will have to refocus on the Date picker component in the onChange function so that the date picker will reappear and pick a date again.
Related
I want to custumize my DatePicker and only show days cause i want the user to choose one or multiple day from 1 to 31 with ignoring the month and the year
I am using the date picker from "react-multi-date-picker"
<DatePicker
id={"startDate"}
className="form-control"
multiple
format="DD"
/>;
You could use a dropdown or select instead.
You can add following props as below
<DatePicker
id={'startDate'}
className="form-control"
multiple
format="DD"
buttons={false}
disableYearPicker
disableMonthPicker
/>
The prop button={false} helped, and I hid the month and the year too.
Finally, it's exactly as I wanted:
<DatePicker
id={"startDate"}
value={editedDates}
className="form-control"
multiple
format="DD"
buttons={false}
disableYearPicker
disableMonthPicker
hideMonth
hideYear
hideWeekDays
/>
date picker with only days
I'm using an existing directive to select start date and end date.
Requirement:
End Date always should be equal or greater than Start Date.
User may select start date as a future day or old day. min date of the End Date time picker should be set disabled based on start date selection.
Can anyone suggest me, how to set min date for end date dynamically based on start date?
start Date:
<input singledatepicker class="form-control" selected-date="startDateTime" placeholder="Date" format="DD/MM/YYYY" required readonly style="background:white;" max-date={{pastDate}}>
End Date:
<input singledatepicker class="form-control" selected-date="endDateTime" placeholder="Date" format="DD/MM/YYYY" required readonly style="background:white;" min-date={{IwantToSetThisValue}}>
From the documentation of daterangepicker, we can see that, there are options available to set
> minDate: (Date or string) The earliest date a user may select.
> maxDate: (Date or string) The latest date a user may select
but these values need to set while initializing the daterangepicker object. and u need to update this min date, according to the start date.
As this daterangepicker library not providing any methods to update the option on runtime, one quick solution is to reinitialize the 'end date picker' option with value of 'start date picker'.
You watch the start date model value and reinitilize the end date picker on the value change, something like this:
$scope.$watch('startDateTime', function (startDateValue) {
if (startDateValue) {
$('#endDateTime').daterangepicker({
minDate: startDateValue // Do corrections according to the requirements
});
}
});
Note: I'm not sure what your singledatepicker directive is doing, This is just a workaround, not the perfect way, But hope you got the idea.
I have an angular 1.5 application where i make use of a moment datepicker library from here : angular moment date picker
Everything has worked well until recently when we realized that the date pickers rendered dates wrongly across different user pc's .It appears this may have something to do with how JavaScript handles time zones:
In the image below October 1, 2017 is actually a Sunday but the date picker renders it as a Monday albeit I get the correct values rendered on my own pc running a more current version of google chrome perhaps this is also a browser issue ?
IE does show dates as I would expect.
see the html snippet for the input below:
<input class="form-control input-sm"
ng-model="vm.form.StartDateTime"
format="DD-MMM-YYYY, HH:mm:ss"
ng-model-options="{ updateOn: 'blur' }"
start-view="month"
moment-picker="vm.form.StartDateTime" />
JS: moment(self.form.StartDateTime)
The primary question is how can I ensure date-times are represented correctly across different time zones on the date picker ?
In my project I am using angularJS and momentJS for fixing the painful date formating part. I have two scenarios, here we go:
Retrieving the date from db and rendering it in UI:
I am getting the response from service in this formate "2016-01-31T20:30:00.000Z". I am using the above and rendering the date and time separately in the following way in UI
<input ng-model="data.startDate" type="date" name="startDate" disabled>
<input ng-model="data.startDate" type="time" name="startTime" disabled>
Its displaying like the image attached below
Its being displayed as YYYY-MM-DD in firefox and in the chrome as DD-MM-YYYY. I want to use the same object for displaying the date and time maintaining the date formate across all the browsers. How it can be achieved ?
I am using this datepicker. When the user selects the date I want show the date in the same format. In this scenario date and time inputs are taken separately and combined in the background.
So can someone help me in fixing the issue.
Convert all date format into string like .ToString("YYYY-MM-DD")
Format datepicker as dateFormat: "yyyy-mm-dd"
I am using bootstrap datepicker to for an input field "start date" . If the field is empty, another field "end date", which is also filled using a datepicker, should be disabled. Only after entering a date in the start date, the end date field should be enabled. I tried doing this using angular js. The sample code is below.
Start date
<input ng-model="startdate"/>
End date
<input ng-disabled="!(!!startdate)"
The end date remains disabled even after selecting a start date. Please help. If I try to get the value of the start date field it says "htmlinput element"
Please help
It's pretty easy!!
Try this out
Working Demo 1
Working Demo 2
Start Date :<input ng-model="startdate"/>
End Date :<input ng-disabled="!startdate"/>