Minimum and maximum dates for datepicker - javascript

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

Related

I don't want datetimepicker setting default value on click

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});

jQuery Datepicker .val() is blank however a date is displayed?

This is my first question.
I have looked for an answer but my searches seem to bring back a lot of ways to enforce the datepicker value is empty, or being able to access the selected value which is not an option here.
Background to the problem
I have a table with a dynamic amount of rows, each row contains a few datepickers (we'll call them A datepicker, B datepicker, C datepicker). It also contains a child row that is hidden until the 'Expand for more details' button is clicked, at which point there are a few more fields appearing. One of those fields is a 'Comments' field.
The requirement I have is that when the A datepicker is changed that a 'Comment' MUST be required to go along with that. I am able to tell when the datepicker is changed and therefore to send a message via the validator of the 'Comments' telling the user that it is now required.
The requirement
When entering details into the comments section, I need to be able to check if there is a date selected in the A datepicker so that we can dynamically warn the user that the comments section needs to be X many characters IF there is a date in the A datepicker.
The problem
It appears that when the jQuery datepicker is changed that the .value is not updated. When the row is populated it is possible that the A datepicker can be empty, not all fields require that particular date to be set and therefore not all 'Comment' fields need to be set either.
So I can tell when the datepicker is changed and get the 'Comments' field to be required. However a user can then fill out the 'Comments' field with a blank entry or enter a value that doesn't meet the X amount of characters limit. This behaviour is OK for when there is not a date selected. So when a date is selected I need to enforce the rule.
My problem is that I can't tell if a date is selected or not!
In the example below I had a blank datepicker, I then chose a date and opened developer tools. In the overview of the web page we can see that the date is set to 20th Jan 2018.
Overview of the web page
however through the developer tools we can see that the value is actually empty.
Datepicker value is set to ""
This behaviour is also true when the datepicker was not initially blank, rather than the value being the new date it still retains the old date. In the example below I changed the date from the 23rd of December 2017 to the 31st of December 2017.
Pre-Populated datepicker
And in developer tools the value is still set to the previous value.
Changed to new date
Technicalities
I am using MVC and jQuery, I am not looking for a solution that involves having to go back to the controller as that usually requires the user having to press a submit button and my requirement is that it needs to be able to respond upon selecting the date and entering comments. I'd just like a way to be able to get the displayed date from the datepicker and not it's previous value.
This matters because if it's going from previously having a date into now a blank date, it affects the requirement so that comments are no longer required as there isn't a date. Vice versa if going from a blank date to a selected date.
Things I have tried
I am trying to write this into the OnChange method of 'Comments', so that I can check if there is a date selected or not.
I have tried directly calling it in my .js file with the below. For option 4 and 5 it's contained in a .each loop that goes through ALL the rows in my table and finds the row relating to the 'Comments' field that was changed.
(Please note that parentRow refers to the selected table row which contains the dates (the row that contains the comments field is the child row)).
1) var dateValue = $(parentRow).find("input[name$='datepicker_A']").datepicker("getDate");
2) var dateValue = $(parentRow).find("input[name$='datepicker_A']").val();
3) var datepicker_A = document.getElementById('datepicker_A');
var dateValue = datepicker_A.val();
4) var dateValue = $.datepicker.parseDate("d/M/y", $(this).find("input[name$='datepicker_A']").val());
5) var dateValue = $(this).find("input[name$='datepicker_A']").val();
All of the above return the previous value of the datepicker and not the newly selected one. So my question is.. how do I get it to recognise the new value?
TL:DR
jQuery datepicker doesn't seem to change the .val() property of the input field when selecting a new date, instead the .val() is always the previous value. How can I access the new value via javascript/jQuery?
Your code should look something like this:
<div>
Select date: <input id="thedate" type="text" class="date-pick" />
</div>
And your JavaScript (I am using jQuery 1.9.1 with jQuery UI 1.9.2 here too)
$(function() {
$('.date-pick').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(dateText, inst) {
alert(dateText); // Put your code in here
}
});
});
Here's a JsFiddle

PHP select input calendar?

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

How to show the selected date in datepicker?

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.

Enter text in Datepicker textfield

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.

Categories

Resources