I'm trying to create 1 or 2 or more datepicker.
I've created a jquery code to do that but when the script is executed, both input elements open a datepicker, but only the first one is updated.
When I click on the second datepicker, the first input is edited.
Any help?
that is the jquery code:
$(".datepicker" ).each(function (){
var max = "+0";
if(typeof($(this).data('limit')) != 'undefined'){
max = $(this).data('limit');
}
$(this).datepicker({
yearRange: '-100:'+max,
dateFormat: "dd-mm-yy",
maxDate: max,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
});
});
thank you!
See if this will work.
$(".datepicker" ).datepicker({
yearRange: '-100:'+max,
dateFormat: "dd-mm-yy",
maxDate: function(){
// do some logic here and return max
var max = "+0";
if(typeof($(this).data('limit')) != 'undefined'){
max = $(this).data('limit');
}
return max;
},
showButtonPanel: true,
changeMonth: true,
changeYear: true,
});
Related
I get this working it gets on week selection "Week number: #" on main field and on alternate field get "yy-mm-dd"
On load I get "yy-mm-dd" from current date (Today) On both fields, but I want on load "Week number: #" on main and "yy-mm-dd" on alternate, from current date.
$(function() {
var currentDate = new Date();
$( "#fecha" ).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showWeek: true,
firstDay: 1,
dateFormat: 'yy-mm-dd',
altField: "#date1",
altFormat: "yy-mm-dd",
onSelect: function(dateText, inst) {
$(this).val("Semana Numero: " + $.datepicker.iso8601Week(new Date(dateText)));
}
});
$("#fecha").datepicker("setDate", currentDate);
});
Any suggestion?
I'm not very familiar with the datepicker plugin, but it looks like it doesn't have any events you can trigger on it.
Anyways, this might not be the best approach, but what I did was loop through all the datepicker date <a>'s and trigger a click on the date that matches today's date.
https://jsfiddle.net/b3vstmef/
I was just looking over the datepicker and it doesnt look like you can trigger the onselect so I found that the code below will work instead.
$(function() {
var currentDate = new Date();
$( "#fecha" ).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showWeek: true,
firstDay: 1,
dateFormat: 'yy-mm-dd',
altField: "#date1",
altFormat: "yy-mm-dd",
onSelect: function(dateText, inst) {
populate(this, dateText)
}
});
$("#fecha").datepicker("setDate", currentDate);
});
function populate(field, d){
$(field).val("Semana Numero: " + $.datepicker.iso8601Week(new Date(d)));
}
populate($( "#fecha" ), $("#date1").val());
See it in action:
https://jsfiddle.net/y3llowjack3t/ycok5cwx/
I am using 2 datepickers in which return should not be less than
departure.
On selecting of the datepicker, it is executing onSelect
event functionality(pls check the datepicker script). But i want to make this while initial load
without on select. Because issue is return datepicker is showing
before date since i not select departure datepicker.This issue will happening when it is posted to another page, with same datepickers.
eg: In first page i have selected 22-12-2014 and return 30-12-2014 ,
if i post these values to another page having same datepickers for
return i can able to select before 22-12-2014.
$("#departure").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
minDate: '+1d',
numberOfMonths: 2,
showButtonPanel: true,
onSelect: function (selectedDate) {
var minDate = $(this).datepicker('getDate');
if (minDate) {
minDate.setDate(minDate.getDate());
}
$("#return").datepicker("option", {minDate: minDate}, selectedDate);
}
});
$("#return").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
minDate: '+1d',
numberOfMonths: 2,
showButtonPanel: true,
onSelect: function (selectedDate) { //alert($('#startPicker').val());
var minDate = $(this).datepicker('getDate');
if (minDate) {
minDate.setDate(minDate.getDate());
}
$("#departure").datepicker("option", {maxDate: minDate}, selectedDate);
}
});
You will need to add the minDate again on the new page.
You could add something like:
<?php if ($_SERVER['REQUEST_METHOD'] == "POST") { ?>
$( document ).ready(function() {
$("#return").datepicker("option", {minDate: <?=$_POST['departureDate']; ?>}, selectedDate);
});
<?php } ?>
Not tested but you get the idea.
I have to show a datepicker for date of birth, since the year range will be about 80 years I am using the following code.
$('#<%=txtdob.ClientID%>').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: 'c-100:c-20'
});
it is working but whenever we change the year range it goes back 100 years!. I think I am missing something . Fiddler code is-->
http://jsfiddle.net/MCheP/
Please help..
Edit: when textbox is clicked calender show up. but when I change year from 1914 to say 1920 it shows 1820 instead of 1920.
Try following for yearRange:
yearRange: "-80:+0",
DEMO
Why is there a c in there ?
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: '-100:-20',
defaultDate: '-100y'
});
FIDDLE
the leading c sets the range relative to the selected date, so when you select a date, it sets the range back another 100 years from that date. To keep the range static you remove the c
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: '-100:-20',
defaultDate: '-100y'
});
Demo
http://jsfiddle.net/MCheP/6/
please see the documentation
http://api.jqueryui.com/datepicker/#option-yearRange
the actual syntax/example is
$( ".selector" ).datepicker({ yearRange: "2002:2012" });
You can also use it like this also
yearRange: "-100:-20"
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
minDate: "-100Y",
maxDate: "-20Y"
});
I'm trying to make a jQuery datepicker set minDate depending on the value of a radio button.
When I try to write a function returning a string, my JavaScript keeps crashing. Any ideas on why this is not working?
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate: function() {
var str = "-35Y";
if($("#inputfield").val() == "value") {
str = "-33Y";
}
return str;
}
});
jsFiddle
This works fine.... you need to make sure that you have inputfield with a value
<input type='text' id='datepicker'></div>
<input type='text' value='value' id='inputfield'>
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate:mdate()
});
function mdate(){
var str = "-35Y";
if($("#inputfield").val() == "value"){
str = "-33Y";
}
return str;
}
Edit:*
$('#inputfield').on('change',function(){
$('#datepicker').datepicker('option', 'minDate', mdate());
});
The option minDate expects a value, not a function. A datepicker will not automagically update the value of minDate whenever the selection of your radio button changes.
If you want the datepicker's minimum date to change whenever the radio button selection changes, then you must explicitly program this. Something along the following lines:
$('[name=myradiogroup]').change(function () {
var newMininumDate = /*insert logic here*/;
$('#datepicker').datepicker('option', 'minDate', newMininumDate);
});
See http://api.jqueryui.com/datepicker/#method-option
This works for me:
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate: $("#inputfield").val()
});
This code still sets the field to today's date
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "mm/dd/yy", changeMonth: true,
changeYear: true, yearRange: '1900:2020', defaultDate: ''
});
});
</script>
How do I universally configure the field to start as blank?
If the field is showing today's date it's because of how the input field is populated. The datepicker will start with whatever value the html element has, regardless of what that is:
Demo
If you cannot control the value of the input field through changing markup, but still needs the input field to be reset, you'll have to do this manually:
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "mm/dd/yy", changeMonth: true,
changeYear: true, yearRange: '1900:2020'
}).val('');
});
$("#start-date-filter").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yyyy-mm-dd',
yearRange: '-2:+4'
}).val('');