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

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

Related

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" />

How to pass a variable from Javascript to PHP?

I've checked dozens of similar topics already answered and I simply can't get around the issue I have.
I am using a bootstrap date time picker (https://eonasdan.github.io/bootstrap-datetimepicker) and my goal is to pass the displayed value from a page that holds the calendar (calendar.php) to a PHP file (data.php) whenever the date is changed.
Below I added the code. Since I have some files locally stored, I added some info from Chrome's dev tools.
The date picker is working fine and I can get the value with Javascript.
The issue is that nothing is passed to PHP.
Checked the syntax..everything seems fine for me at this point.
I don't know what I'm doing wrong. Any advice would be more than welcomed !
calendar.php :
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="moment.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1' >
<input type='text' id='date' name='date' class="form-control" >
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(function () {
// Formatting how date is displayed
$('#datetimepicker1').datetimepicker({
calendarWeeks: true,
format: "YYYY MM DD"
});
//Displaying the current date in the text box when the page is accessed
$('#datetimepicker1').data("DateTimePicker").date(new Date());
// Sending the date to PHP when the user is changing it
//dp.change is an event fired when date is changed
$('#datetimepicker1').on("dp.change",function(){
var day = $('#date').val();
$.ajax({
type: "POST",
url: "data.php",
data: { day : day } })
.done(function() { alert(day); })
.fail(function() { alert("error"); })
});
})
})
</script>
</div>
</div>
</body>
</html>
When I execute the code, it alerts me with the day ( it goes to .done(function() { alert(day); }) ) and in my current understanding, the post was a success or at least that's how I interpret it.
This is from Chrome's dev tool.
I am trying to show that the value is retrieved. No other errors appear.
// Sending the date to PHP when the user is changing it
$('#datetimepicker1').on("dp.change",function(){
var day = $('#date').val(); // Date gets retrieved : day = "2016 08 03"
$.ajax({
type: "POST",
url: "data.php",
data: { day : day } }) // Date gets retrived: day = "2016 08 03"
.done(function() { alert(day); }) // I get a pop-up with the date
.fail(function() { alert("error"); })
});
})
})
The file with Javascript code and the file with PHP code are in the same folder.
PHP (data.php) code is below :
<?php
if(isset($_POST['day']))
{
$day = $_POST['day'];
echo $day;
}
?>
I simply can't figure what am I doing wrong or missing in the code above.
Edit :
I think I didn't focused well on the issue I am having and I am sorry for that. All your suggestions ( thanks a lot for them) are about the .done(function).
My issue is that my php file (data.php) is empty. The date isn't passed by the Ajax and I don't know why. The post doesn't happen.
I tried all the suggestions u guys mentioned, thinking that they may be the answer but no luck.
The PHP is outputting the value. The web server is sending the value to the browser. The browser is giving that value to JavaScript. jQuery is processes that value. Then you ignore it.
It is passed as the first argument to the function you pass to done, use it.
.done(function(data_in_response) { alert(data_in_response); })
You should put the same variable inside the ajax response function to print on response, i.e.,
.done(function(data){
alert(data);
})

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

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

How to implement the DATE PICKER in PhoneGap/Android?

I have tried to implement the date picker in android. I want it to get the data and show it in the text format
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="datePickerPlugin.js"></script>
<script type="text/javascript" charset="utf-8">
function dateTest() {
var myNewDate = new Date();
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date', // date or time or blank for both
allowOldDates : true
}, function(returnDate) {
var newDate = new Date(returnDate);
currentField.val(newDate.toString("dd/MMM/yyyy"));
// This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
currentField.blur();
});
}
</script>
</head>
<body bgcolor="#ffffff">
<hr>DatePicker Test<hr><br>
<input type="button" onClick ="dateTest()" value ="Today's Date!!" />
<div id="view"></div>
</body>
</html>
I am getting it as an alert...but unable to store it as a string on the same page
Why loose ur head?
A <input type="date"> will allways deppend on device's interpretation of it, in some android devices it doesn't even work,
There is plenty of plugins, addons, whatever, for it,
I personally like, and use mobiscroll: Link
Edit: Mobiscroll is now paid but there are loads of free frontend mobile frameworks and probably all of them have a datepicker, such as jQuery Mobile-datepicker.
It seems that your currentField is undefined. Did you check the chrome console before running it on AVD ? Pls try to post the element in which you are trying to display the date as well.
For now, I am assuming that you are trying to do what the following code does
$('.nativedatepicker').focus(function(event) {
var currentField = $(this);
var myNewDate = new Date(Date.parse(currentField.val())) || new Date();
// Same handling for iPhone and Android
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date', // date or time or blank for both
allowOldDates : true
}, function(returnDate) {
var newDate = new Date(returnDate);
var newString = newDate.toString();
newString = newString.substring(0,15);
currentField.val(newString);
// This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
currentField.blur();
});
});
The element is as follows
<input type="text" class="nativedatepicker" readonly value = "Fri Jun 21 2013"/>
Works like a charm !! Hope it helps !!
What I want to happen is simple - I just want a datepicker to display when I click a certain field.
However, the same as Aleks, I don't know what to put in my html, how to use it in html, and what should I put in the html to invoke the datepicker on some input.
The documentation from the plugin is incomplete.
I found a solution from this test project.
Steps are as follows:
Pre-requisite: phonegap/cordova-cli installed
Install Cordova's device plugin: $ cordova plugin add org.apache.cordova.device
Install Dirk's datepicker plugin: $ cordova plugin add https://github.com/DURK/cordova-datepicker-plugin
Copy the nativedatepicker.js from the test project and place it on your project's js folder. This file has showDatePicker(), showDateTimePicker() convenience functions.
Add the ff. to index.html code:
Note: The datepicker won't show when you test it in your browser
....
<div class="form-group">
<label>Appointment</label>
<input type="text" class="form-control datepicker" id="appointment">
</div>
....
<script src="js/nativedatepicker.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function () {
$(document).on('click', '.datepicker', function () {
showDatePicker($(this), 'date');
});
$(document).on('click', '.timepicker', function () {
showDatePicker($(this), 'time');
});
$(document).on('click', '.datetimepicker', function () {
if (device.platform === "Android")
showDateTimePicker($(this));
else
showDatePicker($(this), 'datetime');
});
});
})(jQuery);
</script>
This is my working implementation. Input type is text, readonly.
$('.nativedatepicker').focus(function(event) {
var currentField = $(this);
var myNewDate = new Date();
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date',
allowOldDates : true
}, function(returnDate) {
var array = returnDate.split("/");
var day = array[2], month = array[1];
if (day <= 9)
day = "0" + day;
if (month <= 9)
month = "0" + month;
currentField.val(array[0] + "/" + month + "/" + day);
currentField.blur();
});
});
Why would you want to implement a custom date picker if there is an ative one available ?
You can simply use <input type="date"> to create the commonly known iOS date picker.
For more infos on input fields on mobile devices I suggest: http://blog.teamtreehouse.com/using-html5-input-types-to-enhance-the-mobile-browsing-experience

Javascript datepicker pop up window not appearing

My java script date picker popup window is not appearing when clicked on the text box. I tried almost 8 different date picker's none of them are working.
<tr>
<td >Date Of Birth</td>
<td ><input name="bdate" type="text" id="datepick2" disabled="disabled"/>
<script type="text/javascript" src="datepickr.js"></script>
<script type="text/javascript">
new datepickr('datepick');
new datepickr('datepick2', {
'dateFormat': 'm/d/y'
});
new datepickr('datepick3', {
'fullCurrentMonth': false,
'dateFormat': 'l, F j'
});
</script>
</td>
</tr>
This is how my code looks. I tried opening in firefox and IE but not working. no errors nothing just doesn't appear when clicked on the textbox.
I'm guessing it's trying it to soon, but without seeing the rest of the code or knowing what plugin you are using, its hard to say for sure. Try this though:
$(function() {
new datepickr('datepick');
new datepickr('datepick2', {
'dateFormat': 'm/d/y'
});
new datepickr('datepick3', {
'fullCurrentMonth': false,
'dateFormat': 'l, F j'
});
});
That waits for the document.ready event, and then calls the functions. Or you may need to do
$('#id-of-input-you-want').datepickr();

Categories