datepicker interview questions
Top datepicker frequently asked interview questions
How do I hide the calendar after a date is selected? Is there a specific function that I can use? My code below:
$('#dp1').datepicker({
format: 'mm-dd-yyyy',
startDate: '-15d',
autoclose: true,
endDate: '+0d' // there's no convenient "right now" notation yet
});
Any help would be appreciated.
Source: (StackOverflow)
--- Note to moderators: Today (July 15), I've noticed that someone already faced this problem here. But I'm not sure if it's appropriate to close this as a duplicate, since i think I provided a much better explanation of the issue. I'm not sure if I should edit the other question and paste this content there, but I'm not comfortable changing someone else's question too much. ---
I have something weird here.
I don't think the problem depends on which SDK you build against. The device OS version is what matters.
Problem #1: inconsistency by default
DatePickerDialog was changed (?) in Jelly Bean and now only provides a Done button. Previous versions included a Cancel button, and this may affect user experience (inconsistency, muscle memory from previous Android versions).
Replicate: Create a basic project. Put this in onCreate:
DatePickerDialog picker = new DatePickerDialog(
this,
new OnDateSetListener() {
@Override
public void onDateSet(DatePicker v, int y, int m, int d) {
Log.d("Picker", "Set!");
}
},
2012, 6, 15);
picker.show();
Expected: A Cancel button to appear in the dialog.
Current: A Cancel button does not appear.
Screenshots: 4.0.3 (OK) and 4.1.1 (possibly wrong?).
Problem #2: wrong dismiss behavior
Dialog calls whichever listener it should call indeed, and then always calls OnDateSetListener listener. Canceling still calls the set method, and setting it calls the method twice.
Replicate: Use #1 code, but add code below (you'll see this solves #1, but only visually/UI):
picker.setButton(DialogInterface.BUTTON_NEGATIVE, "Cancel",
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Log.d("Picker", "Cancel!");
}
});
Expected:
- Pressing the BACK key or clicking outside the dialog should do nothing.
- Pressing "Cancel" should print Picker Cancel!.
- Pressing "Set" should print Picker Set!.
Current:
- Pressing the BACK key or clicking outside the dialog prints Picker Set!.
- Pressing "Cancel" prints Picker Cancel! and then Picker Set!.
- Pressing "Set" prints Picker Set! and then Picker Set!.
Log lines showing the behavior:
07-15 12:00:13.415: D/Picker(21000): Set!
07-15 12:00:24.860: D/Picker(21000): Cancel!
07-15 12:00:24.876: D/Picker(21000): Set!
07-15 12:00:33.696: D/Picker(21000): Set!
07-15 12:00:33.719: D/Picker(21000): Set!
Other notes and comments
- Wrapping it around a
DatePickerFragment doesn't matter. I simplified the problem for you, but I've tested it.
Source: (StackOverflow)
I have this javascript for automatically setting a date filter to the first and last day of the previous month:
$(document).ready(function () {
$("#DateFrom").datepicker({ dateFormat: 'dd/mm/yy' });
$("#DateTo").datepicker({ dateFormat: 'dd/mm/yy' });
var now = new Date();
var firstDayPrevMonth = new Date(now.getYear(), now.getMonth() - 1, 1);
var firstDayThisMonth = new Date(now.getYear(), now.getMonth(), 1);
var lastDayPrevMonth = new Date(firstDayThisMonth - 1);
$("#DateFrom").datepicker("setDate", firstDayPrevMonth);
$("#DateTo").datepicker("setDate", lastDayPrevMonth);
});
BUT now.getYear() is returning 111 instead of the expected 2011. Is there something obvious I've missed?
Source: (StackOverflow)
I have JS code that when you change a field it will call a search routine.... the problem is I can't find a Jquery event that will fire when the Datepicker updates the input field.
For some reason a change event isn't called when datepicker updates the field. When the calendar pops up it changes the focus so I can't use that either. Any ideas?
Source: (StackOverflow)
How do I use the jQuery Datepicker with a textbox input:
$("#my_txtbox").datepicker({
// options
});
that doesn't allow the user to input random text in the textbox.
I want the Datepicker to pop up when the textbox gains focus or the user clicks on it, but I want the textbox to ignore any user input using the keyboard (copy & paste, or any other). I want to fill the textbox exclusively from the Datepicker calendar.
Is this possible?
jQuery 1.2.6
Datepicker 1.5.2
Source: (StackOverflow)
How can I change the selected date of jquery Date picker dynamically on the fly?
I have say created a inline date picker.
Then after some time, I want to reflect a different date there without recreating the datepicker from the scratch.
I tried the setDate method, but did not work, and there is not much documentation in the doc.
There is another (extended?) plugin here, but I want to use the plugin which is shipped with jquery.ui.all.js.
Source: (StackOverflow)
With the jQuery datepicker, how does one change the year range that is displayed? On the jQuery UI site it says the default is "10 years before and after the current year are shown". I want to use this for a birthday selection and 10 years before today is no good. Can this be done with the jQuery datepicker or will I have to use a different solution?
link to datepicker demo: http://jqueryui.com/demos/datepicker/#dropdown-month-year
Source: (StackOverflow)
This question already has an answer here:
I decided to use the JQuery UI Datepicker script for picking dates. Below is part of my code, and the way I integrated it into my PHP page:
<link type="text/css" rel='nofollow' href="css/south-street/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Datepicker
$('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
And:
// date picker (embeds JQuery script)
echo '<label for="datepicker">Date: </label>';
echo '<input type="text" name="datepicker" id="datepicker" />';
echo '<div id="datepicker"></div>';
Pretty much according to the JQuery UI instructions.
Now my question is: how can I disable manual inputs in the text input field? I only want the JQuery Datepicker script to be able to fill the text field. As far as I can see, the script currently prevents the user from entering any non-numerical characters into the text field, but any combination of numbers is allowed (therefore, gibberish like "95460829468" is allowed).
Source: (StackOverflow)
I am currently using the Twitter Bootstrap framework, and when using the modal windows I cannot get over js elements to work like datepicker or validation, though chosen and uniform render correctly. please see my modal window below:
<div class="modal hide in" id="newMember" style="display: block; " aria-hidden="false">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h3>New Member Form</h3>
</div>
<form accept-charset="UTF-8" action="/players" class="form-horizontal" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="KdL6cc2Vb53qeMY+PpBUS70myT4HX1uWofMUBolLea8="></div>
<div class="modal-body">
<div class="widget-content nopadding">
<div class="control-group">
<label class="control-label" for="user_role">Role</label>
<div class="controls">
<select id="user_role" name="user[role]" style="display: none; " class="chzn-done"><option value="">Select member role</option>
<option value="1">Player</option>
<option value="2">Coach</option>
<option value="3">Parent</option>
<option value="4">Manager</option>
<option value="5">Non-player</option></select><div id="user_role_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a rel='nofollow' href="javascript:void(0)" class="chzn-single"><span>Select member role</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_role_chzn_o_0" class="active-result result-selected" style="">Select member role</li><li id="user_role_chzn_o_1" class="active-result" style="">Player</li><li id="user_role_chzn_o_2" class="active-result" style="">Coach</li><li id="user_role_chzn_o_3" class="active-result" style="">Parent</li><li id="user_role_chzn_o_4" class="active-result" style="">Manager</li><li id="user_role_chzn_o_5" class="active-result" style="">Non-player</li></ul></div></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_full_name">Full name</label>
<div class="controls">
<input id="user_first_name" name="user[first_name]" placeholder="First Name" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_last_name">Last name</label>
<div class="controls">
<input id="user_last_name" name="user[last_name]" placeholder="Last Name" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_email">Email</label>
<div class="controls">
<input id="user_email" name="user[email]" placeholder="Email Address" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_date_of_birth">Date of birth</label>
<div class="controls">
<input class="datepicker" data-date-format="dd/mm/yyyy" id="user_dob" name="user[dob]" placeholder="dd/mm/yyyy" readonly="readonly" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_gender">Gender</label>
<div class="controls">
<select id="user_gender" name="user[gender]" style="display: none; " class="chzn-done"><option value="">Select gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option></select><div id="user_gender_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a rel='nofollow' href="javascript:void(0)" class="chzn-single"><span>Select gender</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_gender_chzn_o_0" class="active-result result-selected" style="">Select gender</li><li id="user_gender_chzn_o_1" class="active-result" style="">Male</li><li id="user_gender_chzn_o_2" class="active-result" style="">Female</li></ul></div></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_team">Team</label>
<div class="controls">
<select id="user_team_id" name="user[team_id]" style="display: none; " class="chzn-done"><option value="">None</option>
<option value="4">Metro 3 East</option>
<option value="1">State League 3</option>
<option value="2">State League 4</option>
<option value="3">Metro 3 South</option>
<option value="5">Pennant E</option>
<option value="6">Under 9 White</option>
<option value="7">Under 9 Navy</option>
<option value="8">Under 13 Pennant South East</option>
<option value="9">Under 17 Pennant South East</option>
<option value="10">Under 15 South (1)</option>
<option value="11">Under 11 Pennant South East</option>
<option value="12">Under 11 South</option></select><div id="user_team_id_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a rel='nofollow' href="javascript:void(0)" class="chzn-single"><span>None</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_team_id_chzn_o_0" class="active-result result-selected" style="">None</li><li id="user_team_id_chzn_o_1" class="active-result" style="">Metro 3 East</li><li id="user_team_id_chzn_o_2" class="active-result" style="">State League 3</li><li id="user_team_id_chzn_o_3" class="active-result" style="">State League 4</li><li id="user_team_id_chzn_o_4" class="active-result" style="">Metro 3 South</li><li id="user_team_id_chzn_o_5" class="active-result" style="">Pennant E</li><li id="user_team_id_chzn_o_6" class="active-result" style="">Under 9 White</li><li id="user_team_id_chzn_o_7" class="active-result" style="">Under 9 Navy</li><li id="user_team_id_chzn_o_8" class="active-result" style="">Under 13 Pennant South East</li><li id="user_team_id_chzn_o_9" class="active-result" style="">Under 17 Pennant South East</li><li id="user_team_id_chzn_o_10" class="active-result" style="">Under 15 South (1)</li><li id="user_team_id_chzn_o_11" class="active-result" style="">Under 11 Pennant South East</li><li id="user_team_id_chzn_o_12" class="active-result" style="">Under 11 South</li></ul></div></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_mobile">Mobile</label>
<div class="controls">
<input id="user_mobile" maxlength="10" name="user[mobile]" placeholder="i.e 0421813529" size="10" type="tel">
<span class="help-block">
<input name="user[private_mobile]" type="hidden" value="0"><div class="checker" id="uniform-user_private_mobile"><span><div class="checker" id="uniform-user_private_mobile"><span><input id="user_private_mobile" name="user[private_mobile]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
<a rel='nofollow' href="javascript:void(0)" class="tip-bottom" data-original-title="Normally, all members of the team can see this information. If you don't want teammates to see this information, just click this checkbox. (Note: Team managers will always see this information.)">Private</a>
</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_manager_access">Manager access</label>
<div class="controls">
<input name="user[manager]" type="hidden" value="0"><div class="checker" id="uniform-user_manager"><span><div class="checker" id="uniform-user_manager"><span><input id="user_manager" name="user[manager]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_admin_access">Admin access</label>
<div class="controls">
<input name="user[admin]" type="hidden" value="0"><div class="checker" id="uniform-user_admin"><span><div class="checker" id="uniform-user_admin"><span><input id="user_admin" name="user[admin]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="pull-right">
<input class="btn btn-primary" name="commit" type="submit" value="Create User">
<a class="btn btn-danger" data-dismiss="modal" rel='nofollow' href="#">Cancel</a>
</div>
</div>
</form>
</div>
Source: (StackOverflow)
Date picker landed on Chrome 20, is there any attribute to disable it?
My entire system uses jQuery UI datepicker and it's crossbrowser, so, I want to disable Chrome native datepicker. Is there any tag attribute?
Source: (StackOverflow)
I have dynamically created textboxes, and I want each of them to be able to display a calendar on click. The code I am using is:
$(".datepicker_recurring_start" ).datepicker();
Which will only work on the first textbox, even though all my textboxes have a class called datepicker_recurring_start.
Your help is much appreciated!
Source: (StackOverflow)
How do I disable past dates on jQuery datepicker? I looked for options but don't seem to find anything that indicates the ability to disable past dates.
UPDATE: Thanks yall for the quick response. I tried that with no luck. Days were still not grayed out as I expected and still accept the selected past date.
I tried this:
$('#datepicker').datepicker({ minDate: '0' });
Doesn't work.
I tried this:
$('#datepicker').datepicker({ minDate: new Date() });
Still doesn't work either.
It displays the calendar widget just fine. It just won't gray out or prevent input of past days. I've attempted the minDate and maxDate in the past with no luck so I figured it must not be them.
Source: (StackOverflow)