Change given date format in js - javascript

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

Related

Set max Date in datapicker field JSP

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.

Current day , month, year from datepicker

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/

jquery datepicker getdate return null

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
});

jQuery Datepicker UI Tooltip

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/

datePicker in jQuery UI not working

I want to call the beforeShowDay function in jquery UI datepicker, but I found that the location
of beforeShowDay matters and I have no clue.
Code would help:
<script>
var datePickerOptions = {
minDate: 'today',
beforeShowDay: available
};
/*This is a function only let datePicker show the dates in dateList*/
var available = function(date){
window.console.log("in");
var dmy = (date.getMonth() + 1) + "-" + date.getDate() + "-" + date.getFullYear();
if($.inArray( dmy, dateList ) !== -1 ) {
return [true, "", "Available"];
}
else {
return [false, "", "unAvailable"];
}
};
var init = function(availableDates) {
$('.datePicker').datepicker(datePickerOptions);
};
</script>
If I write it in this way, the minDate would work, but the beforeShowDay wouldn't, the console didn't print 'in'.
But if I write it in this way:
var init = function(availableDates) {
$('.datePicker').datepicker({
minDate: 'today',
beforeShowDay: available
});
};
it would work.I don't see the real difference between these two methods, and I really want to use the first method.
Any ideas? Thanks.
It is because when available is used to create the datePickerOptions object it is not initialized with a value, so it has a value of undefined which is same as not passing the option in this case. You can move the creation of datePickerOptions after the available variable is initialized to fix the problem.
/*This is a function only let datePicker show the dates in dateList*/
var available = function(date){
window.console.log("in");
var dmy = (date.getMonth() + 1) + "-" + date.getDate() + "-" + date.getFullYear();
if($.inArray( dmy, dateList ) !== -1 ) {
return [true, "", "Available"];
}
else {
return [false, "", "unAvailable"];
}
};
var datePickerOptions = {
minDate: 'today',
beforeShowDay: available
};
var init = function(availableDates) {
$('.datePicker').datepicker(datePickerOptions);
};

Categories

Resources