when i click in jquery calendar it display value first time and then when i click another time another value it doesn't work .
<script>
$(function(){
$( "#datepicker" ).datepicker();
$( ".ui-state-default" ).on('click',function(event){
alert(event.toElement.outerText);
})
});
</script>
check demo here http://jsfiddle.net/epHNZ/592
Just try this,
$(function() {
$("#datepicker").datepicker();
$("#datepicker").on('click', '.ui-state-default', function(e){
alert(e.toElement.outerText);
});
});
DEMO
or
May be above example unsupported in some browsers, in that case use this
$(function(){
$("#datepicker").datepicker({
onSelect: function(dateText, inst) {
var date =$(this).datepicker('getDate');
alert(date.getDate());
}
})
});
DEMO
Related
How can I change the setting of one datepicker inside of other datepicker?
This is what I tried
$('#from_date').datepicker({
autoclose:true,
}).on('changeDate', function() {
$('#to_date').datepicker({
minDate: $('#from_date').val(),
});
});
I also tried this
$('#from_date').datepicker({
autoclose:true,
}).on('changeDate', function() {
$('#to_date').datepicker('option', 'minDate', $('#from_date').val())
});
I want to disable the date before the from_date value if the from_date date is changed.
Thanks for the help
Try setStartDate method
Note: jquery-ui-datepicker and bootstrap-datepicker are different
$('#from_date').datepicker({
autoclose:true,
}).on('changeDate', function(e) {
$('#to_date').datepicker('setStartDate', e.date)
});
You should use the option api.
Use it like this:
example:
$( ".selector" ).datepicker( "option", "disabled", true );
With your code:
$('#to_date').datepicker( "option", "minDate", $('#from_date').val())
could anyone please help?
I am using jquery datepicker for several fields and in an update form in php and it updates dates in database. All seems to work great except the fact that if some of the date fields are already populated in DB, the datepicker does not display them and upon update it erases the value in DB too.
the php sample:
<script>
$( function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker("option", "dateFormat", "yy-mm-dd");
} );
</script>
...
<td><input type="text" id="datepicker" name="IM_request" value="'.$row["IM_request"].'"/></td>
So the variable $row["IM_request"] does not display if datepicker is enabled. if i disable it, it works fine, but a lot of manual work.
Any idea how to make the datepicker-enabled input field to display the value from DB?
<input type="text" id="txtSelectedDate" value="20-01-01" />
$('#txtSelectedDate').datepicker({
showButtonPanel: true,
dateFormat: 'dd-mm-yy',
});
JSFiddle example : http://jsfiddle.net/LgTZt/211/
I finally found the solution. Instead of:
$( function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker("option", "dateFormat", "yy-mm-dd");
} );
I should have used:
$( function() {
$( "#datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
} );
I'm trying to detect the select of a jquery datepicker. but it does not seem to work. It does not give any errors but does not execute the function.
HTML
<div id="datepicker" class="datepicker-tafeltje"></div>
JS
$(document).ready(function(){
$("#datepicker").datepicker({
onSelect: refreshOptions
});
});
I have also tried this
$(document).ready(function(){
$("#datepicker").datepicker({
onSelect: function(){console.log('test')}
});
});
But this does not log anything either!
Seems it is a problem in mapping! Thank you all for the answers
You should use this::
$("#datepicker").datepicker({
afterAdjustDate: function(i,o,p){
console.log('test');
}
});
OR
$("#datepicker").datepicker({
onSelect: function(e) {
console.log('test');
}
});
Try following code
$(document).ready(function() {
$("#datepicker").datepicker({
onSelect: function(e) {
alert(e);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"
integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE="
crossorigin="anonymous"></script>
<div id="datepicker" class="datepicker-tafeltje"></div>
I want to set maximum limit in JQuery Datepicker so that the user can't pick date after current date. Currently I'm using http://jqueryui.com/datepicker/ plugin.
How to set maximum limit in JQuery datepicker ?
you can validate by Jquery
$(document).ready(function(){
if($("#datepicker").val() == ''){
alert("Please Select Your date");
}
});
try this- just in the datepicker function you are using pass these parameters
$("#date").datepicker({
onSelect: function(selectedDate) {
$( "#date1" ).datepicker( "option", "maxDate", selectedDate);
}
});
Try
option-maxDate
Working Demo
$("#date").datepicker("option","maxDate",0);
or
$("#date").datepicker("option","maxDate",new Date());
Working Demo
$(function () {
$("#date").datepicker({
maxDate: 0
});
});
$("#date").datepicker({
dateFormat: 'dd/mm/yy',
minDate: 0,
maxDate: "+30M",
});
fore more look here
I am trying to change the date format in the JQM UI Datepicker.
It's got an input which display's the dates as you change them.
I need it to display in dd/mm/yyyy format.
Can anyone help please?
UPDATE:
I'm trying this, but nothing's changing:
<script>
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
<script language="javascript">
$(document).ready(function() {
$.datepicker.formatDate('dd/mm/yyyy'); //ADDED HERE
$("input[type='submit']").click(function(e) {
e.preventDefault();
});
});
</script>
Try this $.datepicker.formatDate('dd/mm/yyyy');
More reference here
Change the "jquery.ui.datepicker.mobile.js" file
add date format: dateFormat: "dd/mm/yy" Code shown below
//bind to pagecreate to automatically enhance date inputs
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input[data-type='date']" ).each(function(){
$(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: "dd/mm/yy" }));
});
});