I have the below piece of code for getting me the current date.
$('#txtSelectedDate').datepicker({
showButtonPanel: true,
currentText: "Today:" + $.datepicker.formatDate('dd mm yy', new Date())
});
How do i extract to alert day, month, year separately.
var d = new Date();
var date = d.getDate();
var month=d.getMonth()+1;
// we are adding 1 to getMonth Method, becoz it will return 0 to 11
var year=d.getFullYear();
Hope it helps..
Please try,
var today = new Date();
console.log(today.getDate());
console.log(today.getMonth());
console.log(today.getFullYear());
SoF reference
How to format a JavaScript date
So after looking on the web you can do that :
var date = $.datepicker.formatDate('dd mm yy', new Date());
alert("Day:" + date.getDay() + "month:" + date.getMonth() + "year:" + date.getFullYear());
Try this.
You can use the onSelect event
<html>
<head>
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(function ($) {
$("#dataPicker").datepicker({
onSelect: function (dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
alert("Day " + (new Date(dateText)).getDate() + " Month: " + (new Date(dateText)).getMonth() + " Year: " + (new Date(dateText)).getFullYear())
}
}).on("change", function () {
display("Got change event from field");
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
</script>
</head>
<body>
<div id="dataPicker">
</div>
</body>
</html>
I think you should do this way
$('#txtSelectedDate').datepicker({
showButtonPanel: true,
currentText: "Today:" + $.datepicker.formatDate('dd mm yy', new Date()),
onSelect: function(){
var day = $("#txtSelectedDate").datepicker('getDate').getDate();
alert(day);
var month = $("#txtSelectedDate").datepicker('getDate').getMonth() + 1;
alert(month);
var year = $("#txtSelectedDate").datepicker('getDate').getFullYear();
alert(year);
}
});
Initialize the datepicker with the altField option specified:
$( ".selector" ).datepicker({
altField: "#actualDate"
});
Initialize the datepicker with the altFormat option specified:
$( ".selector" ).datepicker({
altFormat: "yy-mm-dd"
});
Please refer for more detail:-
http://api.jqueryui.com/datepicker/
Related
I am trying to disable some dates along with that I, am trying to disable past dates as well.Kindly, give some help where I can delete past dates in date picker.
<div class='input-group date' id='datepicker1'>
<asp:TextBox runat="server" ID="txtdatepicker">
</asp:TextBox>
</div>
<script type="text/javascript">
$(function () {
var disableSpecificDates = ["19-8-2021", "28-8-2021", "26-
8-2021"];
$('#datepicker1').datepicker({
format: 'mm/dd/yyyy',
beforeShowDay: function (date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) +
"-" +
date.getFullYear();
if (disableSpecificDates.indexOf(dmy) != -1) {
return false;
}
else {
return true;
}
}
});
$('#datepicker1').datepicker("setDate", new Date());
});
</script>
Instead of deleting you can disable the past date.
$('#datepicker1').datepicker("minDate", new Date());
});
I need to set maximum date in datapicker field. I use jQuery UI
function zerofill(i) {
return (i < 10 ? '0' : '') + i;
}
$( function() {
var now = new Date();
var today = now.getFullYear() + '-' + zerofill(now.getMonth() + 1) + '-' + now.getDate();
$( "input[id^='datepicker']" ).datepicker({
dateFormat: "yy-mm-dd",
maxDate: "0",
minDate: "-60",
monthNames: [ "Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Pańdziernik", "Listopad", "Grudzień" ]
}).val(today);
});
Here I have maxDate: "0" field which work just fine:
but still it is possible to change date by hand in field.
I used
<input class="form-control" type="text" id="datepicker[2]" min="<%=LocalDate.now().minusMonths(2)%>"
max="<%=LocalDate.now()%>" name="calculationDate">
but it doesn't work as I expected.
when I use JQuery datapicker getDate, it returns null.
I need two datepickers, the second one should be smaller than the first one.
the JS file is like this:
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var today = d.getFullYear() + '-' +
(month<10 ? '0' : '') + month + '-' +
(day<10 ? '0' : '') + day;
var startDate;
$( function() {
$( "#start-date" ).datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
minDate:'2016-01-01',
maxDate:today,
});
startDate =$( "#start-date" ).datepicker("getDate");
if(startSDate==null){
startSDate = '2016-01-01'
}
$( "#end-date" ).datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
minDate:startDate,
maxDate:today,
});
} );
However, this does not work. Here is jsFiddle.
Please use the following code.
'use strict';
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var today = d.getFullYear() + '-' +
(month<10 ? '0' : '') + month + '-' +
(day<10 ? '0' : '') + day;
var fullSDate;
$( function() {
$( "#start-date" ).datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
minDate:'2016-05-12',
maxDate:today,
});
$( "#end-date" ).datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
minDate:fullSDate,
maxDate:today
});
$("#end-date").focusin(function(){
fullSDate =$( "#start-date" ).datepicker("getDate");
if(fullSDate==null){
fullSDate = '2016-01-01'
}
$( "#end-date" ).datepicker( "option", "minDate", fullSDate);
});
} );
Refer this Fiddle
it is null because you are assigning startDate variable at very first time when your jquery file is loading and that time there is no date in $( "#start-date" ) control when you are trying to get date.
You should assign your startDate variable on $( "#start-date" ).datepicker onselect event like this
var startDate;
$("#start-date").datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
minDate:'2016-01-01',
maxDate:today,
onSelect: function () {
startDate =$("#start-date" ).datepicker("getDate");
}
});
$("#end-date").datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
minDate:startDate,
maxDate:today
});
Is it possible to add tooltip only to the disabled dates in jQuery datepicker?
$(function() {
$('#datepicker').datepicker({
minDate : 0,
maxDate : +30,
beforeShowDay: function(date) {
return [true, 'highlight', 'The custom title'];
}
});
});
My code puts the tooltip to all dates.
Yes. It is possible. Check the below link to know more on disabling date.
http://api.jqueryui.com/datepicker/#option-beforeShowDay
Below is the code
var disabledDates = ["11-2-2016","19-2-2016","28-2-2016"];
function disableDate(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, disabledDates) < 0) {
return [true,"",""];
} else {
return [false,"","This is disabled"];
}
}
$('.datePicker').datepicker({ beforeShowDay: disableDate });
Demo : https://jsfiddle.net/j2caztgu/
I'm having date "1/19/12 00:00:00" (M/D/Y) .I want to change this date as "2012-01-19 00:00:00"(Y-M-D).
How can i do this.
I'm using jQuery ui date picker.Date picker formate is dateFormat:"m/d/y" I want to convert this date in on select.
onSelect: function( selectedDate ) {
//here i want to convert
}
$('#datepicker').datepicker({
onSelect: function(dateText, inst) {
var d = new Date(inst.selectedYear,inst.selectedMonth,inst.selectedDay);
var mydate = $.datepicker.formatDate( 'yy/mm/dd', d);
alert(mydate);
}
});
a jsfiddle for this
Documentation for formatDate
The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function
Code examples
Initialize a datepicker with the altFormat option specified.
$( ".selector" ).datepicker({ altFormat: 'yy-mm-dd' });
Get or set the altFormat option, after init.
//getter
var altFormat = $( ".selector" ).datepicker( "option", "altFormat" );
//setter
$( ".selector" ).datepicker( "option", "altFormat", 'yy-mm-dd' );
Date.format = 'yyyy-mm-dd';
$(function()
{
$('.date-pick').datePicker()
});
Try this
$valz123=YOUR INPUT DATE
var d =parseDate($valz123);
$valz123=d.format("yyyy-mm-dd");
function parseDate(input)
{
var parts = input.match(/(\d+)/g);
return new Date(parts[0], parts[1]-1, parts[2]);
}
If you just want to reformat the string:
var d = '1/19/12 00:00:00';
function convert(d) {
var b = d.split(/[\/ ]/g);
return '20' + b[2] + '-' + z(b[0]) + '-' + z(b[1]) + ' ' + b[3];
function z(n) {
n = Number(n);
return (n<10? '0' : '') + n;
}
}
alert( convert(d) ); // 2012-01-19 00:00:00