I have 2 datepicker which binds to textboxes Chkin and Chkout. I need to display dates in dd/mm/y JQuery datepicker format. Problem is that when I try to get getFullYear() method of a dd/mm/y formatted date, I get result as of 19th hundred(as I know default starts with 1900). So when ever I select a date in my first datepicker, second date picker year changes to 1913(August 1913 in month view of August in datepicker 2) what I expected is 2013.
Below is my code-
$("#Chkin").datepicker({
dateFormat: 'dd/mm/y',
minDate: '+0',
onClose: function (dateText, inst) {
if ($("#ctl00_ContentPlaceHolder1_hdnDateformat").val() == "dd/mm/y") {
var parts = dateText.split("/");
var cin = new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
} else {
var cin = new Date(dateText);
}
var chkout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate() + 1);
var maxCOut = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate() + 7);
$("#Chkout").datepicker('option', 'minDate', chkout);
$("#Chkout").datepicker('option', 'maxDate', maxCOut);
$("#Chkout").datepicker("setDate", chkout);
}
});
Check your system time. It must be pointing wrong date.
Also assign datepicker to Chkout
$("#Chkin, #Chkout").datepicker({
...
...
});
check this JSFiddle
Check this
It should work for you.
jQuery(function($){
$( "#Chkin" ).datepicker({
minDate: '+0',
changeMonth: true,
numberOfMonths: 1,
dateFormat: 'dd/mm/y',
onClose: function( selectedDate ) {
$( "#Chkout" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#Chkout" ).datepicker({
defaultDate: "+0",
dateFormat: 'dd/mm/y',
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#Chkin" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
Change this line:
var cin = new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
to this:
var cin = new Date(Number(20 + parts[2]), Number(parts[1]) - 1, Number(parts[0]));
Before creating the new date, you must turn it back into a four-digit year, so that the javascript Date() command knows which century to use.
Related
I'm trying to implement the JQuery DatePicker w/ week no and returning the selected date in format YYYYMMDD. When looking into the api for how to format date it says this could be done by using dateFormat: "yy-mm-dd". However, I'm not able to return the date in specified format.
I'm able to return the date in 'original format' with this code:
$(function DatePicker() {
$( "#datepicker" ).datepicker({
onSelect: function(date) {
var date = $(this).datepicker( 'getDate' );
alert(date);
( 'getDate' ).getDate();
},
showWeek: true,
//showOn:"button",
firstDay: 1
});
});
Here is my code for trying to return (show a pop up) wewith the format 'YYYYMMDD':
$(function DatePicker() {
$( "#datepicker" ).datepicker({
// dateFormat: 'yy-mm-dd',
onSelect: function() {
dateFormat: 'yy-mm-dd',
//var dateFormat = $(this).datepicker( "option", "dateFormat" );
//$.(this).datepicker("option", "dateFormat", "yy-mm-dd"); //Senast insatt
alert(dateFormat);
},
showWeek: true,
firstDay: 1
});
});
Obviously I'm new to JQuery, and fairly new to JavaScript as a language.
Thanks!
Check this:
$( "#datepicker" ).datepicker({
dateFormat: 'yymmdd',
onSelect: function(v){
alert(v);
},
showWeek: true,
firstDay: 1
});
Test code here: http://codepen.io/anon/pen/yOBwLo
i am trying to get multiple date inputs. What i want to do is that when user selects first date then he should not be able to select the same date + the dates previous then selected date in the second text box. here is my code.i am new to this. Not good at jquery ui
<script>
$(function() {//alert("getPricing just got called");
$( "#datepicker" ).datepicker({beforeShowDay: $.datepicker.noWeekends, dateFormat: 'yy-mm-dd',minDate: 0 });
//Date d1=new Date($("#datepicker").val());
$( "#datepicker1" ).datepicker({beforeShowDay: $.datepicker.noWeekends, dateFormat: 'yy-mm-dd',minDate: 0});
});
$("#button").submit(function() {alert("getPricing just got called");
var start = $('#datepicker').datepicker('getDate');
var end = $('#datepicker1').datepicker('getDate');
var days = (end - start)/1000/60/60/24;
alert(days);
});
</script>
now what i want is that user can not select the same date+previous dates (which is selected in #datepicker) at #datepicker1
Demo,try this,
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends,
dateFormat: 'yy-mm-dd',
beforeShow: function() {
$('.datepicker').datepicker('option', 'maxDate', $('#end_date').val());
}
});
$( "#datepicker1" ).datepicker({
beforeShowDay: $.datepicker.noWeekends,
dateFormat: 'yy-mm-dd',
beforeShow: function() {
$(this).datepicker('option', 'minDate', $('#datepicker').val());
}
});
From researching on this site, I found a way to use 2 datepickers. If you pick a date on the first one, the second one will automatically show with the selected date as new minDate. You can see this in action on my test server here: http://www.zinius.nl/trips
The issue I'm having occurs in this situation:
Select the Check-in-date field, but don’t select a date and click somewhere else. You won’t be
able to get the Check-in-date field datepicker pop-up back up again until you refresh the entire page or first select the Check-out-date.
This is the code I am using:
$( "#datepicker1" ).datepicker({
showOn: 'both',
buttonImage: 'images/ico/calendar.png',
buttonImageOnly: true,
minDate: 0,
firstDay: 0,
dateFormat: 'mm-dd-yy',
changeMonth: false,
numberOfMonths: 1,
onClose: function( selectedDate ) {
var minDate = $(this).datepicker('getDate');
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$( "#datepicker2" ).datepicker( "option", "minDate", newMin );
$( "#datepicker2" ).datepicker( "show" );
}
});
$( "#datepicker2" ).datepicker({
showOn: 'both',
buttonImage: 'images/ico/calendar.png',
buttonImageOnly: true,
minDate: '+1d',
changeMonth: false,
firstDay: 0,
dateFormat: 'mm-dd-yy',
numberOfMonths: 1,
onClose: function( selectedDate ) {
}
});
I tried replacing the onClose with onSelect. This solves the issue, but when I select a date on datepicker1, datepicker2 appears and disappears in a flash.
Does anyone have a solution to get this working properly?
Thank you,
Guilliano
Try to change your onClose function on the first datePicker with
...,
onClose: function( selectedDate ) {
var minDate = $(this).datepicker('getDate');
if(minDate){
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$( "#datepicker2" ).datepicker( "option", "minDate", newMin );
$( "#datepicker2" ).datepicker( "show" );
}
}
Looking at the console, I can see this error being logged:
Cannot call method 'getDate' of null
It means your statement:
var minDate = $(this).datepicker('getDate');
is causing the problem. What you can do is to first check if the selectedDate (passed to the onClose callback) is valid or not, before attempting to getDate on it.
onClose: function(selectedDate) {
if (selectedDate) {
...
}
}
I have two jQuery datepickers to select a from and to dates. I have the following code that if you select the 15th June in the first then in the second you now can only select from the 15th onwards.
The issue I have is I really need to set the to datepicker to +1 day. So the user could only select 16th onwards.
My skills are not advanced enough to add the date to the parseDate
$(function() {
var dates = $( "#from_date, #to_date" ).datepicker({
dateFormat: 'dd-mm-yy',
minDate: 0,
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
To limit one datepicker based on the other, one can set the minDate and maxDate settings to the date selected in the other datepicker etc.
Something like this
$(function() {
/* global setting */
var datepickersOpt = {
dateFormat: 'dd-mm-yy',
minDate : 0
}
$("#from_date").datepicker($.extend({
onSelect: function() {
var minDate = $(this).datepicker('getDate');
minDate.setDate(minDate.getDate()+2); //add two days
$("#to_date").datepicker( "option", "minDate", minDate);
}
},datepickersOpt));
$("#to_date").datepicker($.extend({
onSelect: function() {
var maxDate = $(this).datepicker('getDate');
maxDate.setDate(maxDate.getDate()-2);
$("#from_date").datepicker( "option", "maxDate", maxDate);
}
},datepickersOpt));
});
I want to change the date format from mm/dd/yyyy to dd/mm/yyyy.
After the date picker performs its action, I want the dd/mm/yyyy to display
in the text box.
<script>
$(function() {
var dates = $( "#from, #to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
</script>
Try this:
$('#from, #to').datepicker({ dateFormat: 'dd/mm/yyyy' });
it can help you...
.datepicker({ dateFormat: 'dd-mm-yy' })
using dateFormat option you can change the format of date,rest whatever option you want you can provide it