Set max Date in datapicker field JSP - javascript

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.

Related

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 block selection of days, not disabling

Hi I have datepicker that i modify. I have a select range, days are available and not available, which the color changes depending the state. I use the functions beforeshowday and onSelect to do this and till here works excelent.
My problem comes that now I want to disable the selection of anyday, I mean I just want to show the user the days availables and not availables, the user can move trough the months and years, but he should not be able to click in a day.
I cant disable the day, I can't return false, this is not a solution, otherwise available days would look like not available.
This example is not mine but is similar, as you can see days not available have opacity, the days available are full color, so without lose this view, I want to not allow the user to click on any day available, but yes move between months and years clicking on the arrows.
http://jsfiddle.net/kVsbq/4/
$("#from").datepicker({
dateFormat: 'dd-mm-yy',
minDate: new Date(),
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
},
beforeShowDay: function (d) {
var dmy = (d.getMonth() + 1);
if (d.getMonth() < 9)
dmy = "0" + dmy;
dmy += "-";
if (d.getDate() < 10) dmy += "0";
dmy += d.getDate() + "-" + d.getFullYear();
console.log(dmy + ' : ' + ($.inArray(dmy, notAvailableDates)));
if ($.inArray(dmy, notAvailableDates) != -1) {
return [false, "", "Booked"];
} else {
return [true, "", "Book Now"];
}
}
});
$("#to").datepicker({
dateFormat: 'dd-mm-yy',
minDate: new Date(),
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
},
beforeShowDay: function (d) {
var dmy = (d.getMonth() + 1);
if (d.getMonth() < 9)
dmy = "0" + dmy;
dmy += "-";
if (d.getDate() < 10) dmy += "0";
dmy += d.getDate() + "-" + d.getFullYear();
console.log(dmy + ' : ' + ($.inArray(dmy, notAvailableDates)));
if ($.inArray(dmy, notAvailableDates) != -1) {
return [false, "", "Booked"];
} else {
return [true, "", "Book Now"];
}
}
});

Change given date format in js

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

Categories

Resources