Is it possible to do a Date & Time Calender using jquery-ui? - javascript

I have tried using format: to get the sequence of data in year
example
$(function() {
$( "#datetimePicker" ).datepicker(
{
format: 'YYYY-MM-DD hh:mm:ss'
});
});

You need to use jQuery dateTimePicker for pick date with time.
Datepicker can only pick date.
Download the plugin from here.
include js and css file in your page.
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.datetimepicker.js"></script>
And your markup like
<input id="datetimepicker" type="text" >
JS:
$('#datetimepicker').datetimepicker({datepicker:true,timepicker:true});
Don't forgot to include jquery.js first in your page.

$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", 'YYYY-MM-DD hh:mm:ss');
});
Visit https://jqueryui.com/datepicker/#date-formats

Try the following:
public String setPickedDate()
{
//if condition
if (day.equals(""))
return day;
java.text.SimpleDateFormat sdf = new java.text.SimpleDateFormat("dd-MM-yyyy");
java.util.Calendar cal = java.util.Calendar.getInstance();
cal.set(year, month, Integer.parseInt(day));
return sdf.format(cal.getTime());
}

Related

how to convert jquery datepicker format to timestamp format like dd-mm-yyyy (28/09/2019 3:40pm)

I dont wanna manual convertion, i have the jquery datepicker v.1.12.1
if i select the date from datepicker it will automatically convert timestamp format.
i want a date format in timestamp like 28/09/2019 3:40 GMT-0400 this format to 1569668513 this format.
Can you please help me?
var dateString = '#referdate',
dateTimeParts = dateString.split(' '),
timeParts = dateTimeParts[1].split(':'),
dateParts = dateTimeParts[0].split('/'),
date;
date = new Date(dateParts[2], parseInt(dateParts[1], 10) - 1, dateParts[0], timeParts[0], timeParts[1]);
console.log(date.getTime()); //1379426880000
console.log(date); //28-09-2019 3:40 GMT-0400
You can try this.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<script>
function getTimeAndDate(){
let today = new Date();
let date = today.getDate()+'/' + (today.getMonth()+1) + '/'+today.getFullYear();
let h = today.getHours();
let m =today.getMinutes();
console.log(h+':'+m);
console.log(date);
}
</script>
<body>
<input type="button" onclick="getTimeAndDate()" value="Button">
</body>
</html>
Are you looking for the dateFormat option?
From the docs:
$( ".selector" ).datepicker({
dateFormat: "yy-mm-dd"
});
$( "#datepicker" ).datepicker({
dateFormat: "#"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
crossorigin="anonymous"></script>
<input id="datepicker">
If you just want to log the timestamp of the chosen date, you can get the javascript date object directly from the picker on change.
// however you initialize the datepicker does not matter
$("#datepicker").datepicker();
// when a date is picked the change event is fired
$("#datepicker").change(function() {
// get the date object
let theDate = $("#datepicker").datepicker("getDate");
console.log(theDate.getTime())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<input id="datepicker">

jumping from one calender to another

i need to fetch the date i click on but by this code i am only getting what the current date is. how can i get the date which i click on. i need to get any date which date i click on but i am unable to do that . i dont need the current date i need to fetch the date i click on
dayClick: function() {
var date = $('#calendar').fullCalendar('getDate');
var dat = $.fullCalendar.formatDate( date,"YYYY-MM-DD" );
alert(" the date is "+dat);
$('#calendar1').fullCalendar('changeView', 'agendaDay', 'dat');
},
Use the first parameter of the dayClick event handler.
e.g.
$('#calendar1').fullCalendar();
$('#calendar').fullCalendar({
dayClick: function(date, jsEvent, view) {
var formattedDate = date.format("YYYY-MM-DD");
console.log("the date is " + formattedDate);
$('#calendar1').fullCalendar('changeView', 'agendaDay', formattedDate);
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<div id='calendar'></div>
<div id='calendar1'></div>

javascript moment.js format date

I am doing in accordance with this question and I need to format my resulting time string. I use bootstrap datetimepicker and moment.js and I have this code:
$("#datetimepicker2").on("dp.change", function (e) {
console.log('date2: ' + e.date.format('MM.DD.YYYY HH:mm:ss') );
end_date = e.date;
end_date.toJSON = function(){ return moment(this).format(); };
});
console.log(JSON.stringify(end_date));
My problem is that I receive
"2017-06-20T17:29:05+03:00"
while I need something like this:
"2017-06-20T17:29:05.013Z"
Any ideas how to get it would be welcome. Thank you.
You can convert the moment object to js date and use toISOString() on that.
moment().toDate().toISOString();
You can add .tz() before .format() and pass in the timezone inside .tz("America/New_York"), etc.
$(function() {
$("#datetimepicker2").datepicker();
$("#datetimepicker2").on("change", function(e) {
console.log(moment().utc($(this).val()).format());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data.js"></script>
Date: <input type="text" id="datetimepicker2" />

Birthday Date Auto generate year for 18 years old

My question is how to automatically set the date range for 18 years old, like for example today is 2015, so the date range must be 1935-1997, don't mind the 1935. Because the date range is for 18 years old and above, so when it come to 2016 the date range will automatically set to 1935-1998 then so on so forth as the year comes by.
Here's the current code with javascript on it
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#from2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:1997',
onClose: function( selectedDate ) {
$( "#to2" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:1997' ,
onClose: function( selectedDate ) {
$( "#from2" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<label for="birthday">Birthday</label>
<input type="text" id="from2" name="from">
</body>
</html>
Well as you can see you in my javascript function the range function is hardcoded. :(
Get the range:
var startDate = "1935";
var endDate = new Date().getFullYear() - 18;
var interval = startDate + ":" + endDate;
Set the range to the DatePicker:
yearRange: interval
Fiddle

Why NaN is displayed in IE8 when using datepicker and jquery?

I have a little issue with displaying a date received from C# code.
The part of code (on view side)
<div id="testdiv">
<% string myDate = obj.MyDate.ToString( "yyyy/MM/dd" ); %>
<script type="text/javascript">
$(function () {
var myJsDate= new Date("<%=myDate%>");
$("#datepicker").datepicker({ dateFormat: 'dd-mm-yy' });
$("#datepicker").datepicker('setDate', myJsDate);
});
</script>
<input type="text" id="datepicker" name="my-date" />
</div>
Of course, it works in IE9, Firefox and Chrome but on on IE8.
As example, I provided a link to test yourself on IE8: http://jsbin.com/OyOCEqI/1/edit?html,js,output
There I put a date which I received from server side.
How to fix this in IE8 ?
Instead of "2013.09.10" write "2013/09/10"
$(function(){
var dateTime = new Date("2013/09/10");
$("#tester").datepicker({ dateFormat: 'dd-mm-yy' });
$("#tester").datepicker('setDate', dateTime);
});

Categories