I have a Date and Time picker that I want to further customize. I want to add an extra button that allows the user to jump to an existing request date and so that they only have to input the time, but I don't like the way the extra footer looks. Is there a way to move this button to the same footer as the OK button?
Or maybe change the "Now" functionality to jump to specified date instead of today? I've been able to change the text but I'm not sure if this is the best approach.
I know that there is a panelRender property on AntD Datepickers but I can't find any examples using it and am having trouble figuring it out.
<Form.Item name="requestDateTime">
<DatePicker format="YYYY-MM-DD h:mm A"
locale={{
...locale,
lang: {
...locale.lang,
now: "Request Date"
}
}}
renderExtraFooter={() =>
<Button onClick={()=> {
form.setFieldsValue({["requestDateTime"]: moment(initialRequestDate)})}
}> Request Date</Button>
}
showTime={{ defaultValue: moment('00:00:00', 'h:mm A') }}>
</DatePicker>
</Form.Item>
Related
How to disable dates between Min and Max dates in material UI date textField?
Example, Let's say minimum date is today's date 01/30/2023 and maximum date is next month's date 02/30/2023. I want to disable 01/31/2023, 02/01/2023 and 02/02/2023 dates in the calendar.
My code is:
<TextField
variant="outlined"
id={row?.id}
size="small"
onKeyPress={(e) => {
e.preventDefault()
}}
type="date"
inputProps={{
min: "01-30-2023",
max: "02-30-2023"
}}
></TextField>
Please help me to find the solution.
I think by using TextField with type='date', it's rendering just a text field and you are relying on browser native datepicker, using which it's difficult to achieve what you want. Instead if you change to DatePicker from mui, it has a property shouldDisableDate, which takes a function, where you can add the logic to disable specific date.
You can use mui datepicker and minDate and maxDate props
sth like this :
const [selectedDate,setSelectedDate] = useState();
return (
<DatePicker
placeholder="MM-DD-YYYY"
format={'MM-DD-YYYY'}
maxDate="02-30-2023"
minDate="01-30-2023"
value={selectedDate}
onChange={(date)=>setSelectedDate(date)}
animateYearScrolling={false}
autoOk={true}
clearable
/>
);
I am very new to React JS. I currently have a web page with the a simple DateTimePicker. It works fine. Currently, the datetimepicker shows up as blank, and you can select a date from the dropdown, it'll populate the input and display this date. So what I want to do is instead if having it blank, I want to set the input to today's date right away, so that when I go to the page the datetimepicker's input is not blank - it already displays today's date. I tried a lot of things but they didnt work, in my code below I tried to use setDate(), but it didn't work. I also tried setDate(new Date()), which also didn't work...
function MyDateFunction(props) {
const [canViewDatePicker, setCanViewDatePicker] = useState(
!!props.user.accountExpiryDate
);
const { t } = useTranslation();
return (
<Field>
<HorizontalFlex>
<DateTimePicker
cssClassModifiers={['column', 'is-one-third']}
time={false}
disabled={!canViewDatePicker}
label={t('myLabel')}
Date={('setDate', '0')}
/>
</HorizontalFlex>
</Field>
);
}
The DateTimePicker that I am using is from react-widgets/lib package
Any ideas much appreciated :)
Yay i figured it out! Inside my <DateTimePicker/> I had to put defaultValue={new Date()}
I am occupying the vue-datepicker component for an input that shows the date that I have in the form. I need to make the date start on the current day and not be able to choose previous days, also change the language, the component dont let me add style
This is the component I am using https://github.com/charliekassel/vuejs-datepicker
I leave part of the summary code:
<template>
<form>
<datepicker :bootstrap-styling="true"
class="form-control"
</datepicker>
</form>
</template>
<sctipt>
import Datepicker from 'vuejs-datepicker';
export default {
components: {
Datepicker,
},
data () {
return {
selectedDate: ''
},
method: {
}
}
</script>
Any ideas? I occupy Vuejs 2 and vuejs-datepicker
There is one syntax error in your codes, you need to move method: {} out of data(), and it is methods, not method.
After fixed it, just follow the tutorial to customize your calendar (check Available Props in the tutorial).
And remember to open your browser console to check any errors.
Below is one demo which allow you customize background, open date, bootstrap styling in the <datepick>.
PS: based on the tutorial, if directly using CDN, have to use <vuejs-datepicker> instead <datepicker>
PS: probably the props provided by datepicker can't meet your requirements, then you have to look into the dom tree for that calendar, then add your css selector to customize it, like what I did for changing background.
Update: clone out one new Date object when every time change open Date, otherwise it will not trigger the reactivity.
app = new Vue({
el: "#app",
components: {
vuejsDatepicker
},
data() {
return {
selectedDate: '',
bootstrapStyling: true,
openDate: new Date()
}
},
methods: {
changeBootstrapStyling: function () {
this.bootstrapStyling = !this.bootstrapStyling
},
changeLanguage: function () {
this.openDate = new Date(this.openDate.setDate(this.openDate.getDate() + 90))
}
}
})
.bg-red > div > div {
background-color:red
}
.bg-white > div > div {
background-color:white
}
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<div id="app">
<button #click="changeBootstrapStyling()">Change Bootstrap Styling</button>
<button #click="changeLanguage()">Change Open Date</button>
<form>
<vuejs-datepicker :bootstrap-styling="true" :open-date="openDate"
class="form-control" :class="{'bg-red':bootstrapStyling, 'bg-white':!bootstrapStyling}"></vuejs-datepicker>
</form>
</div>
Your questions can be divided to three portions and they are
1.How to Apply styling on the vue.js date picker
2.How to make the date start on current date( Disable the previous dates)
3.How to change the language
NB: Your code have a syntax error that is you have used the method property inside the data method , please solve this issue at first
1.Applying styling on your date picker
I had previously answered it on this link , do go through it
https://stackoverflow.com/a/71546906/18083887
2.How to Make your date picker calender to start from current date :
Answer: In the vue date picker package there are some available props which allows you to do so and it is :disabledDates props
see the following example
<datepicker
v-model="startDate"
placeholder="Ends On"
:open-date="new Date()"
:disabledDates="disabledDates">
</datepicker>
in your data property do the followings
data (){
return{
disabledDates:{
to: new Date(Date.now() - 8640000)
}
}
}
Then you will see the previous dates disabled in the calender
I'm using AngularJS and I want to divide a datetime-picker in two parts. By default, where you open the calender, you have to choose the day and then the time (hours and minutes). I want to make two datetime-picker, one for the day and one for the hours/minutes. I tried to change this, in the first form:
datetime-picker="dd/MM/yyyy HH:mm"
into
datetime-picker="HH:mm"
but it doesn't work.
The problem is that if you click on the first calendar to open the first datetime, it makes you choose the date before the time. Instead, I would like to choose only hours and minutes.
This is the plunker:
https://plnkr.co/edit/BLPsNszpUWjXuHXaj7hO?p=preview
You are using the datetimepicker component from this repo: https://github.com/Gillardo/bootstrap-ui-datetime-picker. It is mentioned in the documentation that you can use the following attributes:
enableDate - Whether you would like the user to be able to select a date. Defaults to true.
enableTime - Whether you would like the user to be able to select a time. Defaults to true.
So if you want to hide date picker part in the component, add enable-date="false" to your input field. Like this:
<input type="text" class="form-control" datetime-picker="HH:mm" enable-date="false" ng-model="ctrl.date.value" is-open="ctrl.date.showFlag"/>
Similarly, to hide the timepicker part in the component, add enable-time="false" to your input field. Like this:
<input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="ctrl.date.value" is-open="ctrl.date.showFlag"/>
Here is the update plunker: https://plnkr.co/edit/luMPl8aOFkzBuW4BeNkx?p=preview. Hope this helps.
Explanation:
I am building a plugin for an application that uses thisa Bootstrap Datepicker plugin here http://www.eyecon.ro/bootstrap-datepicker/
So I am trying to utilize the same plugin for a Date Picker in my plugin for the app that already uses that Date Picker library.
My app is a Project Management app that shows Project Tasks in a popup Modal window. IN the Task Modal, there is a Due Date field.
I want to show the Due Date value for a Task when the Modal is opened. When a user clicks on the text for an existing Due Date field, I want to reveal and show an inline Date Picker Calendar. Just like the linked to library above!
So a user clicks on the Due date to reveal the date picker. They then click a date value which make an AJAX post to server and saves the new date value. It then should update the text that they originally clicked on with the new date value and then hide/close the date picker.
All pretty simple however I can use a little help please!
I have a Working JSFiddle Demo: http://jsfiddle.net/jasondavis/dd1bmrrc/
My custom code is all shown below as well. All that is missing is the Bootstrap Date Picker library, jQuery, MockAjax library, and CSS. It is all loaded on the JSFiddle linked above though.
You can also see some options on the Date Pickers project page here http://www.eyecon.ro/bootstrap-datepicker/
The Problem
On my demo page here http://jsfiddle.net/jasondavis/dd1bmrrc/ you will see that I have a span holding a Date value.
Next to it is a text input which when clicked on shows the Date Picker Calendar.
After selecting a Date, my span is updated and Date Picker is hidden.
Clicking my span again shows the Date picker text box.
You then have to click the text box as well to see the Date Picker Calendar.
So my goal is to not have the Text Box. The Span value should open and close the Datepicker, without a textbox needing to exist!
Is this even possible?
The Code
HTML:
<span id="due-date-span">1/1/2015</span>
<input type="text" class="span2" value="02-16-2012" id="task-due-date-cal">
JavaScript for Date Picker:
$(function(){
// Show Date Picker Calaendar when "Due Date" SPAN text is clicked on:
$('#due-date-span').on('click', function(){
$('#task-due-date-cal').show();
});
// Instantiate and run Date Picker Calendar plugin
var dueDatePicker = $('#task-due-date-cal').datepicker({
format: 'mm-dd-yyyy',
// When Date Picker Date is clicked on to change a Date value:
}).on('changeDate', function(ev){
dueDate = new Date(ev.date);
// Make AJAX POST to save Due Date value to the server and update DOM.
$.ajax
({
type: "post",
url: "updateDueDate",
data: "date="+dueDate,
success: function(result)
{
// UPDATE SPAN #due-date-span with new Date value
$('#due-date-span').text(dueDate);
// Close/Hide Date Picker, until it is clicked to show again
$('#task-due-date-cal').hide();
$('#task-due-date-cal').datepicker('hide');
}
});
});
});
Mock AJAX request for Demo:
// Mock AJAX response for AJAX request to /updateDueDate to Update In-line Task Due Date Fields
$.mockjax({
url: '/updateDueDate',
responseTime: 900, // simulate lag
response: function(settings) {
//console.log(settings.data);
console.log('info', 'UPDATE TASK FIELD AJAX REQUEST SENT', settings.data);
if(settings.data.value == 'err') {
this.status = 500;
this.responseText = 'Validation error!';
} else {
this.responseText = '';
}
}
});
One way is to leave the input, lay it over top of the span but with css that makes it invisible to user. The events are still triggered on the input
#task-due-date-cal, #task-due-date-cal:focus{
position:absolute;
z-index:10000;
left:0;
top:0;
background:none;
font-size:0;
border:none;
margin:0;
box-shadow:none;
}
I used an extra wrapper with position relative around the input and span
DEMO