Block jQuery UI calendar dates when radio selected - javascript

I am trying to add a bit of functionality to a jQuery UI calendar but am fairly new to jQuery and am having a bit of problem with my code. This is what I have at the moment:
JS Fiddle code
<input name="button" type="radio" value="3days"/><label>Add 3 Days</label>
<p><input name="button" type="radio" value="0days"/></p>
<p>Date: <input type="text" id="datepicker" /></p>
Jquery:
$(function(){
$('input[value="3days"]').click(function(){
if ($(this).is(':checked'))
{
$('#datepicker').datepicker({ minDate: +3 });
}
else
{
$('#datepicker').datepicker({ minDate: 0 });
}
});
});
I basically want to block the first 3 days if a radio button is selected. If its not selected then I would like only the current date onward to be selectable.
If anyone could suggest some alterations to my code that would be great.

See my updates
$(function(){
$('input[type=radio]').click(function(){
$('#datepicker').datepicker("destroy");
if ($(this).val() == "3days") {
$('#datepicker').datepicker({ minDate: +3 });
} else {
$('#datepicker').datepicker({ minDate: 0 });
}
});
});
jsfiddle

Related

How to have the datepicker work for the dynamically created textboxes

I have an 'add' button that creates some dynamic textfields. The default start date and end date textfields displays the datepicker. However, the dynamically created textboxes are not displaying the datepicker. Any help would be appreciated.
$(document).ready(function() {
$('input[name="settings[start_date][]"]').datepicker({
maxDate: constants.MAX_YEAR + '-12-31',
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
});
$('input[name="settings[end_date][]"]').datepicker({
maxDate: constants.MAX_YEAR + '-12-31',
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
});
$('#container').on('click', '.remove', function() {
$(this).parent().remove();
});
$('#add').on('click', function() {
var row = $('div.addNew:first').clone();
$('#container').append(row);
});
});
<div id="container">
<div class="addNew" ?>
Start Date :
<?=form_input('settings[start_date][]', date('Y-m-d'), 'class="year-date-month-calendar input-small removetradingdates-block"')?>
End Date :
<?=form_input('settings[end_date][]', date('Y-m-d'), 'class="year-date-month-calendar input-small removetradingdates-block"')?>
<input type="button" class="remove" value="Remove" />
</div>
<input type="button" id="add" value="Add Periods" />
</div>
You can quite easily add a datepicker to the newly-created elements
N.B. In this example I have taken the liberty of adding a "datepicker" class to your text boxes, to make the code simpler, so make sure you alter your HTML as well. I have also reduced the amount of repetition in your code by making the datepicker options into a re-usable object:
HTML/PHP:
<div id="container">
<div class="addNew" ?>
Start Date :
<?=form_input('settings[start_date][]', date('Y-m-d'), 'class="datepicker year-date-month-calendar input-small removetradingdates-block"')?>
End Date :
<?=form_input('settings[end_date][]', date('Y-m-d'), 'class="datepicker year-date-month-calendar input-small removetradingdates-block"')?>
<input type="button" class="remove" value="Remove" />
</div>
<input type="button" id="add" value="Add Periods" />
</div>
jQuery:
//I have assumed this, just for the sake of an example:
var constants = {
MAX_YEAR: "2020"
};
//re-usable set of options
var datePickerOptions = {
maxDate: constants.MAX_YEAR + '-12-31',
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
};
$(document).ready(function() {
//set datepicker on all existing elements with "datepicker" class
$('.datepicker').datepicker(datePickerOptions);
$('#container').on('click', '.remove', function() {
$(this).parent().remove();
});
$('#add').on('click', function() {
var row = $('div.addNew:first').clone();
$('#container').append(row);
var pickers = row.find(".datepicker"); //find elements within the new row which have the "datepicker" class
//since we cloned them, remove the "id" attributes and "hasDatepicker" class, both of which were added by jQueryUI, otherwise the datepicker will not initialise properly on these new elements
pickers.removeAttr("id");
pickers.removeClass("hasDatepicker");
pickers.datepicker(datePickerOptions); //add a datepicker to each new element
});
});
You can also visit http://jsfiddle.net/yqr69eca/17/ to see a working demonstration of this code.
write your function like this
$(document).on('click','#targetid',function(){
/*Do something logically here*/
// On a side note it will always work on dynamic,static elements
});

How to allow only selection of Sundays on my datepicker?

How do I allow only selection of Sundays on my datepicker? I did a little bit of research and came across a lot of answers stating that I need to use beforeShowDay, These are my codes:
<div class="pickaDate" style="width:25%;">
<input type='text' id="date" />
<script>
jQuery(document).ready(function() {
jQuery('#date').datepicker({
beforeShowDay: function(date){
return [date.getDay()===0];
}
});
});
</script>
</div>
I got the codes from this link but changed the input type to date because that's the only way the datepicker would appear. But I can still select all the dates.
My knowledge on this is basic at best. Help is appreciated
beforeShowDay: A function that takes a date as a parameter and must return an array with true/false indicating whether or not this date is selectable
Try this:
$("#date").datepicker({
beforeShowDay: function(date) {
return [date.getDay() === 0];
}
});
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<input id="date" type="text">
Fiddle here

Open two jquery datepickers simultaneously

I have two input fields containing a class that triggers a datepicker to open. Both work fine independently, i.e when I click on one or the other but I want for both datepickers to open when either input field is clicked.
Here is the script part of the code
$(document).ready(function() {
$( ".datefields" ).datepicker({ dateFormat: 'dd/mm/yy',numberOfMonths: 1, yearRange: "2012:2014", changeYear: true, changeMonth: true});
and this is the html
<div id="quoteformcollection">
<h1>Collection</h1>
<input type"text" class="startTbl locationfields" id="AutoLocStart" value="Please Type a Collection Location"onclick="clearVal(this);"/>
<input type="hidden" id="DepotStart" value=""/></td>
<input type="text" class="datefields" id="collectiondate" value="21/05/2012"/>
<input type"text" class="timefields" value="12:00" />
</div>
<div id="quoteformreturn">
<h1>Return</h1>
<input type"text" class="locationfields" value="Enter the city or location for return" />
<input type"text" id="returndate" class="datefields" value="21/05/2012" />
<input type"text" class="timefields" value="12:00" />
</div>
I have tried looking for an answer myself but am quite new to jquery and struggling a bit so any help would be much appreciated.
I would also like for whatever value is selected in the first datepicker, for the default date in the second to be incremented by x number of days, which again I am not sure of the best way to go about it.
Any advice would be hugely appreciated!
Try this code for instance to link the two datapickers:
$('#collectiondate').datepicker({
dateFormat: "#",
onSelect: function(dateText, inst) {
var dateText = eval(dateText);
var min = new Date();
min.setTime(dateText);
$('#end').datepicker('option', 'minDate', min);
}
});
$('#returndate').datepicker({
dateFormat: "#",
});
I think you'd have to use the calendar 'inline' and manage how it's popped up yourself through jQuery / Javascript. You need to point the cal to a div tag to use it inline.
http://jqueryui.com/demos/datepicker/#inline

Jquery date picker - want display date in an input field

Hava an jquery calendar:
$(function() {
$("#datepicker").datepicker({
minDate: 'today',
maxDate: "+90D",
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "D, dd MM, yy"
});
});
and
<form method="post">
<div id="datepicker">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
I want to display the date inside the input field...Please help me
The problem is that you have duplicated your id value datepicker. It's there twice.
IDs are supposed to be unique (one per page). Even if you were using classes, you'd be calling datepicker() on both the <div> and the <input>, which is surely not what you want.
Just remove the id from the div.
Working demo: http://jsfiddle.net/wesley_murch/PMFwg/
you cannot have two same id in a single page , use class for the same instead of ids
<form method="post">
<div id="datepicker1">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
above will work fine as div id you can change to datepicker1 or custom it

Jquery UI Datepicker on an image

Greetings,
I want to pop up the Jquery Datepick as the image is clicked and displaying next to it. Once a date is clicked, I want to post my form.
Here how I try this:
The HTML:
<form id="myform">
<span class="quickgo">
Quick Go:
<select>
<option value="1">Discovery Channel</option>
<option value="2">History Channel</option>
</select>
<img class="calenderpick" src="/img/calender.png" />
</form>
And the javascript part:
<script type="text/javascript">
$(function() {
$(".calenderpick").click(function() {
$(this).datepicker();
alert("it is clicked!");
});
});
</script>
Once this image is clicked, I can get the "it is clicked warning" however not the date picker. I also have no clue about how to trigger the form posting event once a date is picked. In the end I want to post the selected channel and the picked date so that I can switch the page.
Thanks
Hellnar,
here's what i use regularly in my mvc apps:
<input class="date" id="StartDate" name="StartDate" value="" type="hidden" />
<script type="text/javascript">
$(document).ready(function() {
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/img/calender.png'
});
});
</script>
hope this helps (notice i use an id and not a class selector). also, check the spelling on calender - should be calendar :)
edit - if you wanted to submit the form on selecting the date, change the javascript code to:
<script type="text/javascript">
$(document).ready(function() {
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/img/calender.png',
onSelect: function(dateText, inst) { $("#myform").submit(); }
});
});
</script>
Why its not opening on clicking the image
Look into the source over here JQuery Datepicker Icon Trigger
How to post the form on selecting a date
Look into the source over here JQuery Datepicker Events - onSelect
in the onSelect event you can do something like $("#form").submit()
Hope this helps

Categories