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();
Related
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);
})
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);
});
It seems simple enough, but nothing I try is working. I have a jquery ui datepicker, I use val() to get the value of that input on button click(), then log it. The click event is working. I can log a string I write myself, but when I pass console.log() the variable that stores the datepicker value...nothing. I've tried using html() and text() instead of val(), still nothing
//JS
$(function(){
$("button").button();
$("#date").datepicker();
var date = $("#date").val();
$("button").click(function(){
// this logs
console.log("event working");
// but this logs nothing
console.log(date);
});//close click
});//closes function
//HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://www.parsecdn.com/js/parse-1.2.8.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://myDomain/bn/lbStyle.css"/>
<script src="http://myDomain/index.js"></script>
<title>
Welcome to The Bringer Network
</title>
</head>
<body>
<form id="dialog">
<p>Date <input type="text" id="date"/></p>
<button>Submit</button>
</form>
</body>
</html>
You should declare date variable within click if you want to assign the value of input field. Go through code below. You actually initialized soon after the page is loaded whixh is not the correct way in your case.
$(function(){
$("button").button();
$("#date").datepicker();
$("button").click(function(e){
e.preventDefault();
var date = $("#date").val();// look this line. It should be inside.
console.log("event working");
console.log(date);
});//close click
});
I'm not sure what are you trying to do. But I think you should place this: var date = $("#date").val(); in your click event. Because your code assigns the .val() of the field when it's empty. That's why your var date is empty.
http://jsfiddle.net/FnGmS/ - Here is a working demo of this code:
$(function () {
$("button").button();
$("#date").datepicker();
$("button").click(function () {
var date = $("#date").val();
console.log("event working");
console.log(date);
});
});
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
MAIN WINDOW
// some javascript
//some html
//here ajax-call to load all divs
//all divs hidden by default
//based on user choice(from select option), show selected group of divs
//click any shown div to call corresponding popup
POPUP WINDOW
//edit contents of that div.
//on close i need
1. refresh main window to load all divs
2. select the previously selected user option(from select option)
3. show corresponding divs only
4. most important is i have to give the user the main page,
where they clicked the div before(not the page starting always!)
I tried and i am left with " $ not found error ". any ideas..? suggestions?
this is the main window
<script type="text/javascript" src="jquerymin.js"></script>
<script type="text/javascript">
var visible_status=0;
function selectFn(sno){
if(sno==1){
$('#id2').hide();
$('#id1').show();
visible_status=1;
}else if(sno==2){
$('#id2').show();
$('#id1').show();
visible_status=2;
}
}
function popitup(url) {
newwindow=window.open(url+'?parent_status='+visible_status,'name');
if (window.focus) {newwindow.focus();}
return false;
}
</script>
<select name='optionw'
onchange="selectFn(this.options[this.selectedIndex].value);">
<option value="">Select</option>
<option value="1">Div1</option>
<option value="2">All</option>
</select>
<div id='id1' style="display:none;">DIV1</div><!--by ajax i am loading-->
<div id='id2' style="display:none;">DIV2</div><!--these divs-->
<button onclick="popitup('popup.php');">popUp</button><br><!--and these-->
popupwindow
<script type="text/javascript" src="jquerymin.js"></script>
<script type="text/javascript">
var parent_status='<? echo $_GET[parent_status];?>';
function closePopup() {
window.opener.history.go(0);
//alert('going to call parent selectFn('+parent_status+')');
window.opener.selectFn(parent_status);
self.close();
}
</script>
...Here editing a part of the main page content...
<input type=button value=close_popup onclick="closePopup();">
If i remove the comments in the closePopup function , it works as expected. Any help to make it work without commnted line.
I would suggest that perhaps you're not linking to the jQuery library properly or have it linked in the wrong order. Could you provide more details as to what you're asking? Do you want the code to do this, or are you just asking about the jQuery object not being found?
get firebug plugin for firefox. load your page .. go to firebug console .. type $ and if it doesnt say 'function()' you haven't included the jQuery library properly
I'm trying to understand your question; it's very unclear what you're describing. Is the code you're showing coming from your web browser once you've loaded it (by viewing the source) or is it prior to being evaluated on the server?
What happens if you change this line in the popup:
var parent_status='<? echo $_GET[parent_status];?>';
to this:
var parent_status=1;
According to what I have understood here is the code below and check it if this works for you:
Paste this code inside main window:
<?php if(isset($_GET['parent_status'])): ?>
$(document).ready(function(){
selectFn(<?php echo $_GET['parent_status'] ?>);
})
<?php endif ?>
Below this code:
function popitup(url) {
newwindow=window.open(url+'?parent_status='+visible_status,'name');
if (window.focus) {newwindow.focus();}
return false;
}
And, replace the closePopup function inside popup window with this code:
function closePopup() {
var href = window.opener.location.href;
if((pos = href.lastIndexOf('parent_status=')) >= 0)
{
var patt = new RegExp('parent_status=' + parent_status);
href = href.replace(patt, 'parent_status='+parent_status);
} else {
href = window.opener.location.href + '?parent_status=' + parent_status
}
window.opener.location.href = href;
self.close();
}
Hope this helps.