I'm using jQueryUI to add a datepicker to a textfield. It all works fine, but because of this i'm not able to type any text into the textfield. I can only add a date through the datepicker.
But i want users to be able to also enter things like NOW in the textfield. But currently entering manual text is blocked as you can see in this example fiddle: http://jsfiddle.net/Kugzd/
Is there anyway to change this behavior?
Just add constrainInput: false to your datepicker option
$(function() {
$('.date').datepicker({
constrainInput: false
});
});
Check the documentation
Demo: http://jsfiddle.net/Kugzd/2/
In addition to using constraintInput option (as noted by another answer), consider combining the datepicker along with Date.js library, which allows you to work with words and expressions such as today, tomorrow, next Tuesday and turn them into dates.
Related
I have a text input to which I have applied a DateTimePicker plugin
But when I click on the input before opening the DateTimePicker, it sets default value as current date, I want the value to stay empty as long as the user selects it from the DateTimePicker.
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY',
});
The DateTimePicker Library which i am using is:
eonasdan.github.io/bootstrap-datetimepicker
I have mentioned the answer in the comments above but just posting it as an Answer for someone who might face the same issue in the future
Initialize the DateTimePicker with useCurrent as false as shown below:
$('.datepicker').datetimepicker({format: 'DD/MM/YYYY',useCurrent:false});
I've encountered a user interface issue with validation I really want to solve. For the website: http://fun-booths.co.uk/dev/
I'm using this simple plugin for validation: http://www.formvalidator.net/
The simple code behind this is as follows:
$.validate({
form : '#fscf_form1, #fscf_form2',
validateOnBlur : true,
scrollToTopOnError : false
});
The validateOnBlur property makes sure validation occurs when inputs loose focus.
There is a form in the right hand sidebar. When selecting a date and time the validation is not functioning correctly.
Fill out the town/city and postcode fields with the correct test data format for example. You will notice a green tick dynamically appear. Now for the date and time fields an end user does not actually type, the input is given to the form field by clicking on the responsive time picker / date picker respectively.
After selecting a date and time and focusing on other input elements this results in the following issue (even though a value has been selected a red cross is presented in the form field which is not desired behaviour.):
I believe this issue is stemming from the fact that the user does not actually enter text into the time or date fields. So the validation does not detect that actual text has been entered into the form.
Note: A strange behaviour is that a green tick does appear on the date/time fields if a value is chosen, then the same input is selected/given focus again.
Is there a JavaScript/jQuery solution that could fire with an event listener to solve this issue and ensure a green tick appears? Or would textual input need to physically be typed in to the date/time fields.
Try this hack, should work :
$('.picker__input').on('change', function(){
$(this).focus();
})
Hope this helps.
You are doing two plugins to work together. Try to give a callback to pickadate asking to reprocess the field:
$('#fscf_field2_12').pickadate({
//... add this parameter
onClose: function() {
$('#fscf_field2_12').blur();
},
//... or this one
onSet: function() {
$('#fscf_field2_12').blur()
}
})
You can also check the validateOnEvent method from jQuery-Form-Validator.
I'm Working with Asp .net MVC3.i'm having a text box with a datepicker image that textbox having a date filled in it.when i click select the datepicker image the popped up datepicker has to be pointing out the date which is in textbox instead of pointing the current date.Is there any jquery for this?
Use the setDate option :
$('element').datepicker({
defaultDate: '02/02/12'
}).datepicker('setDate', '02/02/12');
FIDDLE
Works just fine by default.
See fiddle: http://jsfiddle.net/ymLe2/1/
$('#dated').datepicker({showOn: "button"});
You need to post your code, so as to be able to identify the cause of your problem.
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
I have an input text field with a datepicker instance from jquery-ui with the following parameters:
'buttonImageOnly': true,
'showOn': 'button',
'buttonImage': 'gfx/calendar.gif'
It works well. When I click the "calendar.gif" datepicker image, the calendar is shown. However, when I select a date, the input field (which was disabled) is changed.
Is this a bug or am I doing something wrong? When I look at the instance object in Firebug, the disabled parameter is set to true.
Disabled mean you can't manually write in it. But you still can with javascript.
The textbox is where it saves the date value. If you don't want it to show, turn it to a hidden field or hide it with CSS (easier).
The buttonImageOnly is about using a button with an image type or just an image.
I don't see any bug nor error from your part. :)
If you don't care that the image will no longer show, try the following:
$('#myfield:not([disabled])').datepicker();