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
Related
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
});
I would like to ask if there is any way to cancel the default behaviour of the jquery datepicker, that so when I click the input field where the datepicker is attached, my custom logic to flow and the datepicker calendar to not be shown.
I read the documentation and used the suggested "hide" option but it seems to not work flawless.
Here is a js fiddle that I used:
jquery datepicker jsfiddle
function hideIt(){
$( "#datepicker" ).datepicker( "hide" );
//custom logic
}
function showIt(){
$( "#datepicker" ).datepicker("show");
}
No need to add button. Just give it to handle datepicker.
$(function() {
$("#datepicker").datepicker({
constrainInput: true,
showOn: 'button',
buttonText: 'Show It !'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js
"></script>
<p>Date:
<input type="text" id="datepicker" /> </p>
Note : To prevent to write on text box make it disable if you want.
I have found a solution to the problem by using "fictional" button with imageOnly property.
Here is the jsfiddle: jsfiddle
Javascript:
$(function() {
$("#datepicker").datepicker({
showOn: 'button',
buttonImage: 'randomlocation/nonexisting-calendar-img.gif',
buttonImageOnly: true,
buttonText: ''
})
});
function hideIt(){
//custom logic
}
function showIt(){
$( "#datepicker" ).datepicker("show");
}
Html:
<p>Date: <input type="text" id="datepicker" onclick="javascript:hideIt();" /></p>
<input type="button" onclick="javascript:showIt();" value="Show It !" />
Try like this
function hideIt(){
}
function showIt(){
$( "#datepicker" ).datepicker();
$('#datepicker').focus();
$('#datepicker').prop('disabled', true);
}
I would like to add Today button in datetimepicker calender. I have an idea to add with the syntax "todayBtn:true". But i dont know how to implement it while showing with the below code
<html>
<body>
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
</body>
</html>
<script>
$("#shankar").click(function () {
$("#shankar").datetimepicker('show').on('changeDate',function(ev) {
$('.datetimepicker').hide();
});
});
</script>
Set following properties for your datepicker (todayBtn:"linked").
$('#dateFieldId').datepicker({
todayBtn: "linked",
todayHighlight : true,
orientation: "left",
autoclose: true
});
Include jquery-ui javascript and css and add the code
refer : http://jqueryui.com/datepicker/#buttonbar
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
And to put Todays date in the panel:
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide');
});
Refer here: https://forum.jquery.com/topic/jquery-ui-datepicker-today-button
Try showButtonPanel: true
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
JSfiddle
If you mean this datetimepicker it would be as simple as that:
<html>
<body>
<input type="text" id="shankar" class="form-control" name="from_validity" placeholder="select to validity">
</body>
</html>
<script>
$(function() {
$("#shankar").datetimepicker({
showTodayButton: true,
format: 'YYYY-MM-DD hh:mm'
});
});
</script>
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
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