I'm looking to see if there's anything that does this out there / someone has already done it and outsourced the code before I write the code myself.
I have the following date selection:
I want to make it so that when you select a month the correct amount of days for the month are automatically shown in the day drop down. My idea to do this myself is use JQuery to detect when a user selects a month and then manually .hide the select days that should not be there.
Anything else out there that does this?
You can solve this using HTML5 input type=date
<input type="date" />
Try it here Tryit Editor -W3Schools
Related
We have a form where users have to fill out time input fields and on change it auto saves the entries. We're nervous that some of our users won't know to select the am/pm option. Unfortunately, if I try to do a blur on the field and then check the value of it, even if it's set to something like 08:00 it has a value of empty. It doesn't actually have a value until am/pm is selected. Does anyone know of a way to force a selection of am/pm when there is some beginning of a time value in the field?
Here's a short snippet of the code in question.
<input type="time" class="form-control save_el">
$(".save_el").on("change", function () {
doSomething($(this));
});
The change event only fires once a time with am/pm is selected. Simply putting in 08:00 doesn't fire the change event.
I'm using the React-DatePicker package along with momentjs to let the user pick a date on an input which looks like this:
I want to display the time, but not let the user change it directly from the <input>. My date picker has an onChange() function:
onExpirationDateChange(date) {
this.setState({selectedTime: date.unix()});
}
Does anyone know how I can achieve displaying the time, but not letting the user change it?
I would recommend this way:
document.getElementsByTagName("inputdate")[0].setAttribute("readonly", "readonly");
As you can problably tell, it's set to readonly, so one can't write in the input anymore but they can still copy the text if needed.
As per the examples on this page: https://reactdatepicker.com/
You might try this to prevent the users from selecting times...
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
showTimeSelect
excludeTimes={[moment().hours(17).minutes(0), moment().hours(18).minutes(30), moment().hours(19).minutes(30)], moment().hours(17).minutes(30)}
dateFormat="LLL"
/>
Found the answer myself. Just set readOnly on picker and make sure to not include time select option.
I am building a webportal, where some of the text fields are date picker. When we click on datepicker, a date selection tab appears to select the date, but the field is not allowing to enter the date manually.
I require a way where the user can get both the option, select from date pop up or can enter manually.
Here is a simple code for same:
<input id="ae_point_2_date" placeholder="MM/DD/YYYY" class="fieldValue form-element hasDatepicker datePick datepickernew mandt">
Try this jquery example https://jqueryui.com/resources/demos/datepicker/default.html
you can enter the date manually like this
07/12/1993
You can find more information here -> https://jqueryui.com/datepicker/
I used this myself and I highly recommend it.
I am working on a project using Ruby + the Bootstrap framework, including the Bootstrap datetimepicker plugin.
I have a field in my form as thus:
<div class='datetimepicker-input input-group' id='logged_at'>
<input class='form-control' data-format='DD/MM/YYYY hh:mm A' name='logged_at' type='text' value='27/06/2014 05:08 PM'>
<span class='input-group-addon'>
<i class='fa fa-calendar'></i>
</span>
</input>
</div>
As you can see, I want my datetimepicker to use the DD/MM/YYYY hh:mm A formatting, however, when I enter a default date and time in the value attribute of the <INPUT> tag when generating the form, and then click on the calendar icon to pop up the picker, the picker window just gives me NaN in the heading and won't let me select a date or a time.
If however, I leave the value attribute blank when generating the form, the popup works just fine.
I have also noticed that if I type over the default date in the field, and swap the month and day around, i.e. asMM/DD/YYYY hh:mm A,the popup works fine, i.e. the calendar defaults to the right day, however when I choose a date, it displays in the input field as DD/MM/YYYY hh:mm A.
I am wondering if there is another way I have to set the default date/time in the field? Simply populating the value attribute seems to be confusing the plugin, as it appears to be wanting the initial date in mm/dd/yyyy..., but then happy to show it as dd/mm/yyyy... afterwards.
Ok, I think I have figured this one out. It appears to be related to moment.js which bootstrap-datetimepicker relies on for date parsing.
Without messing around with the language options, there was a line in bootstrap-datetimepicker.js (line 222) which had to be changed from:
if (dateStr) picker.date = moment(dateStr);
to
if (dateStr) picker.date = moment(dateStr, picker.format);
Basically we had to use the picker.format as the second parameter to force mention to parse the entered date using the supplied format that we had in the INPUT field.
I am using jQuery for making a datepicker and I am facing the following problem with it:-
I want to show a minimum date of 1970 in the drop down menu of the calender which I am not able to do.
I also want to show a maximum year of (current year - 20) in the same drop down.
How can these things be done?
Also, I want to monitor a text box using jQuery for keystrokes. When the third character is entered in the text box, I want to make an Ajax call to get all the fields from a db which matches those 3 starting characters and show them in a suggestion box.
Can anyone please tell me how these problems can be resolved?
have a look at the jquery ui docs - you'll find "yearRange" under options
http://jqueryui.com/demos/datepicker/
For the second question, also jquery ui:
http://jqueryui.com/demos/autocomplete/
You can use
$(function() {
$( "#datepicker" ).datepicker({ minDate: new Date(1970,1, 1), maxDate: "-20Y" });
});
See
http://jqueryui.com/demos/datepicker/min-max.html