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.
Related
I am trying to define a date input field with two alt date display fields where they all have distinct date formats. In the example below, if my date input is 013017 then I want my alt date display fields to show
Display 1: 2017-01-30
Display 2: 01-30-17
But instead I'm getting
Display 1: 2017-01-30, 01-30-17
Display 2: 2017-01-30, 01-30-17
Here is my markup:
<p>Date Input: <input type="text" id="datepicker1"> </p>
<p>Display 1: <input type="text" id="alternate1" size="30"> </p>
<p>Display 2: <input type="text" id="alternate2" size="30"> </p>
Here is my js:
$( function() {
$( "#datepicker1" ).datepicker({
dateFormat: "mmddy",
altField: "#alternate1, #alternate2",
altFormat: "yy-mm-dd, mm-dd-y"
});
});
here is a jsfiddle: https://jsfiddle.net/5rqtj056/
The altFormat property accepts one format date, to be used for representing elements retrieved by the altField selector.
This a snippet from jQuery UI official documentation
altFormat
Type: String
Default: ""
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
In order to do that, you need to bind an event on the #alternate1 for example and filling that one, you will convert the date and then fill the #alternate2
Here your new JS code:
$( function() {
$( "#datepicker1" ).datepicker({
dateFormat: "mmddy",
altField: "#alternate1",
altFormat: "yy-mm-dd",
onSelect: function(dateText) {
$('#alternate1').trigger("change");
}
});
$("#alternate1").change(elaborateDate);
$("#datepicker1").keyup(elaborateDate);
function elaborateDate() {
var alt1Date = $('#alternate1').val();
var newDate = $.datepicker.formatDate( "mm-dd-y", new Date(alt1Date) );
$('#alternate2').val(alt1Date);
}
});
https://jsfiddle.net/5rqtj056/8/
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 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..
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