I have a jQueryUI datepicker, which was created with dateFormat: 'dd/mm/yy'. If I use a regular HTTP POST or HTTP GET request, the input is passed effectively in dd/mm/yy format, but when I use the datepicker's getDate method in any script, I get something like 'Wed Oct 05 2011 00:00:00 GMT-0430 (Venezuelan Standard Time)'.
Is there a way I could get the date in the dateFormat of the datepicker (or any format)?
Of course I could use the value of the text input that contains the datepicker, but I would prefer using a method from the widget.
getDate() should be returning a JavaScript Date object, so any of the Date methods should work for you.
I.E.
var date = $("#yourId").datepicker('getDate');
console.log(date.getDay()); //Returns day of the week 0-6
console.log(date.getDate()); //Returns day of the month 1-31
//etc...
Date Object Reference
Try something like this:
var date = $('#datepicker').datepicker({ dateFormat: 'dd/mm/yy' });
To console.log and deal with datepicker function you can try this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Icon trigger</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
buttonImageOnly: true,
buttonText: "Select date"
});
$('#datepicker').datepicker()
.on("input change", function (e) {
console.log("Date changed: ", e.target.value);
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
This is how I do it :
jQuery("#select-date-id").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function (selected) {
var selectedDate = $(this).datepicker('getDate');
console.log(selectedDate); // log the value in the console
}
});
Related
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({ format: 'yy-mm-dd' });
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
This is the code from jquery UI website.
And like you can see, this format doesn't work at all!
do you know why it doesn't work?
The property is incorrect ... instead of format should be dateFormat:
So, instead of:
$( "#datepicker" ).datepicker({ format: 'yy-mm-dd' });
Should be:
$( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
API reference here.
After browsing a lot of topics over here and trying different approches I still have problems with disabling days and dates in the jQuery UI DatePicker.
I tried creating 2 arrays which I check in the beforeDayShow option, but what ever I try, none of the days return unavailable in the calendar.
What am I doing wrong?
$(document).ready(function(){
//Disable Arrays
var disableDays = [0,1,6], //su, mo, sa
disableDates = ["22-02-2019", "24-02-2019"] //dd-mm-yy
//Create DatePicker
$("#datepicker").datepicker({
beforeDayShow: function(date){
var day = date.getDay(),
dmy = $.datepicker.formatDate('dd-mm-yy', date);
//Disable day
if (disableDays.indexOf(day) != -1){
return [false];
//Disable date
} else if (disableDates.indexOf(dmy) != -1){
return [false];
//Enable date
} else {
return [true];
}
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
</head>
<body>
<div id="datepicker"></div>
</body>
</html>
Im sorry, i had made a "stupid" mistake.
I called the datepicker option "beforeDayShow" instead of "beforeShowDay"
It's working now
I saw another question that sets the first day to Monday by setting the first day to be 1.
While I want to set the first day to be Friday.
I tried to set the first date to 5, but not working as expected.
When I click on 1/2/8/9/15/16/22/23 it gives wrong start date, while if clicked other than them, it will display the right start date.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
firstDay: 5,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() - 2);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
</head>
<body>
<div class="week-picker"></div>
<br /><br />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
</body>
</html>
http://jsfiddle.net/sgfc5bz1/1/
Any suggestions?
I want to make a particular time helper. This is what the picker should look like
Mockup:
If anyone know the helper for this I'd be grateful. Thanks
I would take a look at at jQuery UI DatePicker to show month year only
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
http://docs.jquery.com/UI/Datepicker
i want to have a link with the choosen date to click at the datepicker
e.g:
<div type="text" id="datepicker"></div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$("#datepicker").datepicker({ <a href="/controller/view/" /> });
});
After I clicked i want to be at follwing adress: /controller/view/20091212
Is something with datepicker possible?
Thanks!
use the onSelect event:
$("#datepicker").datepicker({onSelect: openday});
function openday(dateText, inst) {
window.location = 'controller/action/' + encodeURIComponent(dateText);
}