I use the jQuery Datetimepicker plugin from XDSoft: http://xdsoft.net/jqplugins/datetimepicker/
I have the calender displayed inline. Here comes my code:
HTML:
<input type="text" id="start_date">
JS:
jQuery('#start_date').datetimepicker({
format:'d.m.Y H:i',
inline:true
});
My problem: When I pick a date in the frontend, the input field does not get the selected date as a value. What changes do I need to make or what do I need to add?
Get value from Onchange Event
Try this
onChangeDateTime:function(dp,$input){
$('#datePickValue').text($input.val());
}
Full Code look like this
jQuery('#start_date').datetimepicker({
format:'d.m.Y H:i',
inline:true,
onChangeDateTime:function(dp,$input){
$('#start_date').text($input.val()); // change the div as per your need - change the text as val ( it depends on the field)
});
Use the date time picker event.
HTML
<input type="hidden" id="start_date">
JS
var $startDate = $('#start_date');
$startDate.datetimepicker({
inline:true,
sideBySide: true
});
$startDate.on('dp.change', function() {
var selectedDate = $(this).val();
alert(selectedDate);
});
JS Fiddle Demo
$('#start_date').datetimepicker({
format:"d/m/Y H:i:s",
inline:true,
step:5,
onChangeDateTime: function (ct,$i) {
$('#start_date').val(ct.dateFormat('d/m/Y H:i'));
}
});
Try this..It works for me , so it should work for u too..Happy coding..
Related
EDIT
I got it working puting the date behind the url to the target site. On the other side I'm using $_GET['val'] to get the value. But this way too hacky and I'd love to see an more secure solution. But for now it works.
What I'm trying to achieve
Page 1:
Showing a datepicker. The user clicks on a date and gets directed to "Page 2".
Page 2:
Showing the previously selected date.
Whats the problem?
How do I send the selected date to a new page (so I can store the date in a php variable). Also I want to direct the user to the new page automatically after selecting a date.
This is what I got so far:
index.php (containing the datepicker)
$( function() {
$( "#datepicker" ).datepicker({
onSelect: function(dateText, inst) {
var date = $('#datepicker').val();
alert(date);
$.post('getdate.php', {'val': dateText});
}
});
});
getdate.php
<?php
$value = $_POST['val'];
echo "I got your value! $val";
?>
The alert shows the selected date, so the variable is containing the date. But I can't get it so send it to my next page.
Thanks for helping!
you are posting dateText...try posting date like:
$.post('getdate.php', {'val': date});
You have a lot of options to make it work. Here are three of them:
1) Send the selected date to page 2 as a query parameter:
$( function() {
$( "#datepicker" ).datepicker({
onSelect: function(dateText, inst) {
var date = $('#datepicker').val();
window.location.href = 'page2.php?date=' + date;
}
});
});
2) Put your datepicker insider a form and submit it after date selection.
3) Store the date in session inside your getdate.php file:
if (!empty($_POST['val'])) {
session_start();
$_SESSION['current_date'] = $_POST['val'];
}
... and check inside your second page:
//page2.php
session_start();
if (!isset($_SESSION['current_date'])) {
header('Location:index.php'); //redirect to first page if date not set
}
$selectedDate = $_SESSION['current_date'];
....
Choose the one that fits better your problem.
Your script is sending the date to the script getdate.php. But you do not see it i the browser because your ajax post does not send the user to the page. For this you would need to direct the script to that page, and one approach would be using a form:
index.php should also have a form:
<form id="hiddenfrm" action="getdate.php" method="post">
<input type="hidden" name="val" id="val" />
</forms>
<script>
$( function() {
$( "#datepicker" ).datepicker({
onSelect: function(dateText, inst) {
var date = $('#datepicker').val();
$('#val').val(date);
$('hiddenfrm').submit();
}
});
});
</script>
It may also be as simple as the val parameter is in quotes and I don't think it should be.
$.post('getdate.php', {val: date});
I create a datepicker and ask to launch an alert on change :
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
change: function() {
var value = this.value();
alert(value); //value is the selected date in the datepicker
}
});
</script>
No problem with this, it's working.
Now I try to make a function that take the value of the datepicker, and display it on an alert :
function Test(){
var toto = $("#datepicker").data("kendoDatePicker");
var value = toto.value();
alert(value);
}
And modify the the datepicker like this :
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
change: Test()
});
</script>
And it's not working anymore. The "Test" method is launched without changes on the datepicker, and the datepicker now look like this :
datepicker
Any ideas ?
Change the last part to this:
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
change: Test
});
</script>
You were setting the change event to return value of the Test() function
I want to create a field that displays the selected date on the jQueryUI datepicker. How do I do that?
Got the following code:
Javascript:
$(function () {
$("#datepicker").datepicker({
inline: true,
onSelect: function () {
$('#date').val(this.value)
}
});
});
And the Html:
<div id="datepicker"></div>
<br>
<p><input id = "date">
It's working now. Thanks for all the help!
var currentDate = $("#datepicker").datepicker( "getDate" );
Change this line in your code.
I don't know Javascript at all. I have a form where there can be any number of datepicker textboxes. When the user selects a date in the first datepicker textbox, then I want all the remaining datepicker textboxes to have that same date.
Does this require a function?
Edit: I tried to create a function, but I don't know javascript at all!
function UpdateValuationDates(event) {
$valuationDatePicker = $(event.target);
var valuationDate = $valuationDatePicker.datepicker("getDate");
if (valuationDate != null) {
//loop through all items
document.getElementById("dateValuationDate").Text
$valuationDatePicker.datepicker("setDate", valuationDate);
$valuationDatePicker.trigger('change');
}
}
So I think this can be ignored. I have also read that there is a datepicker on selected event:
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
}
});
So I guess I need to edit this code to populate the rest of the textboxes, but how to find out at runtime how many there are?
The HMTL has a repeater with the datepicker repeated x number of times:
<abc:DatePicker runat="server" ID="dateValuationDate"
With the help of html's input type=date and some basic classes' knowledge, you can do that.. Considering you have following Date pickers:
<input type="date" class="dateTime">
<input type="date" class="dateTime">
<input type="date" class="dateTime">
Now you simply need to listen to a change in any one of there values:
$(".dateTime").on("change", function(){
and when the change occurs, get the changed value and set all other date pickers to that new value:
$(".dateTime").val($(this).val());
So it'll be something like this:
$(document).ready(function(){
$(".dateTime").on("change", function(){
$(".dateTime").val($(this).val());
});
});
See the DEMO here
EDIT: Considering you're new to JavaScript, here's how i'm getting the reference to all those elements, through .className, as they all have same class name so for each event (change, update value) they all will be referenced.
How to get all options of jquery datepicker to instanciate new datepicker with same options?
I want clone a table which contains 2 datepickers with different options. You can see here an example : http://jsfiddle.net/qwZ5x/4/
<div class="clonable">
<table><tr><td>
<input type="text" id="datepicker" />
<script>
jQuery(document).ready(function() {
jQuery("#datepicker").datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
});
});
</script></td><td>
<input type="text" id="datepicker2" />
<script>
jQuery(document).ready(function() {
jQuery("#datepicker2").datepicker();
});
</script>
</td></tr></table>
</div>
Clone
var id = 0;
jQuery("#clone").on("click", function () {
var clonable = jQuery(".clonable:first").clone(true, true);
jQuery(clonable).find("input").each(function () {
jQuery(this).attr("id", jQuery(this).attr("id") + "_" + id);
jQuery(this).siblings('.ui-datepicker-trigger,.ui-datepicker-apply').remove();
jQuery(this).removeClass('hasDatepicker');
jQuery(this).datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
});
});
jQuery(clonable).insertBefore("#clone");
id = id + 1;
});
How can i set all options to cloned datepicker without set option one by one?
Thank you very much.
You can get the options of the existing datepicker using this:
var options = jquery('#datepicker').datepicker('option', 'all');
to get one specific option, for example the numberOfMonths:
var numberOfMonths = jquery('#datepicker').datepicker('option', 'numberOfMonths');
In your particular case, replace this:
jQuery(this).datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
});
...with this:
jQuery(this).datepicker(jQuery(this).datepicker('option', 'all'));
Here's a jsfiddle with the change: http://jsfiddle.net/puAde/
This works because you've cloned the input elements, which hold the options, but they need to be re-applied to the new instance.
Note that you need to pass 'all' to get the current options (the jQuery documentation is wrong).
Now you can get all the options like this:
$('#datepicker').data('datepicker');
$('#daterangepicker').data('daterangepicker');
Outputs a specific value:
$('#datepicker').data('datepicker').timePickerIncrement
$('#daterangepicker').data('daterangepicker').timePickerIncrement