My datepicker works, at first! But if i'm checking the value of the input (with the datepicker) the value always is Null. The right value is displaying and an alert shows the right date. But in my php file i just retrieve null
<form action="" method="post">
<div class="flex-grid fg-step-1">
<div class="col col-medium-6 col-small-12 ">
<p style="margin-bottom: 20px;">Date Start</p>
<input type="text" id="dateStart" name="dateStart" class="datepicker">
</div>
<div class="col col-medium-6 col-small-12 ">
<p style="margin-bottom: 20px;">Date End</p>
<input type="text" id="dateEnd" name="dateEnd" class="datepicker">
</div>
</div>
<input type="submit" class="main_btn"">
</form>
jQuery(document).ready(function(){
jQuery('#dateEnd').prop('disabled', true);
jQuery( '#dateStart' ).datepicker({
changeMonth: true,
changeYear: true,
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
minDate: 0,
onSelect: function(selectedDate){
jQuery('#dateEnd').datepicker('option', 'minDate', selectedDate);
jQuery('#dateEnd').prop('disabled', false);
alert(selectedDate);
}
});
jQuery( '#dateEnd' ).datepicker({
changeMonth: true,
changeYear: true,
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
onSelect: function(selectedDate){
alert(selectedDate);
}
});
})
<?php
if ( $_POST['dateStart'] == Null ) {
$dateStart = false;
$in_date_start = "";
} else {
$in_date_start = $_POST['dateStart'];
}
if ( $_POST['dateEnd'] == Null) {
$dateEnd = false;
$in_date_end = "";
} else {
$in_date_end = $_POST['dateEnd'];
}
?>
The Problem is, that we are using WordPress and using our own Theme. I need a solution for retrieving the selectedDate in my php-code
You can use hidden field :
1) get date and set in hidden field {with JS} and retrieve date from hidden field in php { at form submission }
Related
below is the code for selectbox validation but it is not working..can anybody help please..
<?php include('../config.php'); ?>
<style>
#errorMessage {
color:red;
font-size:12px;
margin-left:10px;
}
</style>
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"> </script>
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#agentlist" ).validate({
rules: {
field: {
required: true
}
}
});
</script>
<div id="distanceform" style="width:100%; height:auto;border:0.1em solid #CCC;float:left;">
<div id="distanceformtitle" style="border-bottom:0.1em solid #CCC;width:98%;height:25px;text-align:left;font-size:13px;padding-left:2%;padding-top:11px;background-color:#FAFAFA;color:#1D89CE;">Distance Report</div>
<div id="errorMessage"></div>
<span>
<select name="agentlist" id="agentlist" class="selectclass">
<option value="">--Select Agent--</option>
<?php
$x=mysqli_query($con,"select * from accounts where gid='0' and companyid='".$_SESSION['newforcecid']."' and publishstatus='1'");
while($data=mysqli_fetch_assoc($x)){
?>
<option value="<?php echo($data['imeino']); ?>">
<?php echo($data['firstname']); ?></option><?php
}
?>
</select>
</span>
<span><input type="text" class="textclass" name="fromdate" id="fromdate" placeholder="From Date" value="<?php echo(date('d-m-Y')); ?>"></span>
<span><input type="text" class="textclass" name="todate" id="todate" placeholder="To Date" value="<?php echo(date('d-m-Y')); ?>"></span>
<input type="button" id="search" name="search" value="Search" class="btnclass">
</div>
<br>
<div id="distanceresult" >
</div>
validation is not working..when i click on submit data is not gettng displayed and at same time error msg is also not gettng displayed
Just you need to add the dateFormat: 'dd-mm-yy', after number of months
Check Demo here
<script>
$(function () {
$("#txtFrom").datepicker({
numberOfMonths: 1,
dateFormat: 'dd-mm-yy',
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#txtTo").datepicker("option", "minDate", dt);
}
});
$("#txtTo").datepicker({
numberOfMonths: 1,
dateFormat: 'dd-mm-yy',
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#txtFrom").datepicker("option", "maxDate", dt);
}
});
});
</script>
You can use dateFormat:"dd-mm-yy" in the options. Please do check out all the possible dateFormats Here
Assuming that you are using jQuery-ui:
var date=$.datepicker.formatDate( "dd-mm-yy", new Date( 2015, 2 - 1, 25 ) );
Value of date will be: 2015-02-25
When i submitted form than if error occurred than value is not set in datepicker which is selected before. Datepicker field empty . how this possible ??
<html>
<head>
<script type="text/javascript" >.
$(function() {
$( "#dob" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1900:'
});
$( "#dob" ).datepicker( "option", "dateFormat", "dd-mm-yy" );
});
</script>
</head>
<body>
<form>
<input type="text" name="dob" id="dob" value="<?php if(isset($_SESSION['dob'])) echo $_SESSION['dob']; ?>" placeholder="Please enter date of birth" required/>
</form>
<body>
</html>
There can be many reasons for this issue.
Either the dob variable is null/empty/undefined.
The dob value is not in the correct format.
You have not used defaultDate in the datepicker.
For 1st part, you can only log and debug what is wrong.
For 2nd part, you can format the value in correct format. Search on SO for formatting a string to Date.
For the 3rd part:
$(function () {
$("#dob").datepicker({
defaultDate: $(this).val(), //Add this
dateFormat: 'dd-mm-yy', // And this too
changeMonth: true,
changeYear: true,
yearRange: '1900:'
});
});
I am trying to develop a calendar input variable which also allows for a datepicker for the input boxes.
HTML
<select id="select">
<option value="Type">Type</option>
<option value="Range">Range</option>
<option value="Individual">Individual</option>
</select>
<div id="range" style="display:none;">
<input type="text" name="job_from" id="job_from" placeholder="From" class="datepicker" />
<input type="text" name="job_to" id="job_to" placeholder="To" class="datepicker" />
</div>
<div id="ind" style="display:none;">
<button type="button" id="add2" class="submit">Add Another Date</button>
<div id="item2">
<div><input type="text" class="datepicker" name="jobdates[]" /></div>
</div>
</div>
SCRIPT
$(document).ready(function(){
$("#add2").click(function (e) {
//Append a new row of code to the "#items" div
$("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]" /><button class="delete submit" type="button">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
$('#select').change(function(){
if($('#select option:selected').text() == "Range"){
$('#range').show();
}
else{
$('#range').hide();
}
if($('#select option:selected').text() == "Individual"){
$('#ind').show();
}
else{
$('#ind').hide();
}
})
});
Here is the jsfiddle
when I take away the datepicker jquery function the hide/show functionality works, when i put the datepicker script in nothing works. Can someone explain why I cannot get both to work
Your code is fine, I believe you just weren't including the core jQueryUI files that the DatePicker needs in order to run.
Add this to the head of your page:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
EXAMPLE 1
To address the issue where datepicker is not being initialized due to the new elements being written to the DOM after the jQuery has initialized the datepicker, you simply must call the datepicker when the user creates a new DOM element.
$("#add2").click(function (e) {
//Append a new row of code to the "#items" div
$("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]" /><button class="delete submit" type="button">Delete</button></div>');
// This is where you need to add the datepicker jQuery again <<<<<<<<<
$(".datepicker").datepicker({ changeMonth: true, changeYear: true, numberOfMonths: 2, showWeek: true, dateFormat: 'dd-mm-yy'});
});
EXAMPLE 2
I think its not possible.
Make a second input (for datepicker) and show hide it if checked box...
The rest is js and css
EDIT:
$(document).ready(function(){
$("#add2").click(function (e) {
//Append a new row of code to the "#items" div
$("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]"/><button class="delete submit" type="button">Delete</button></div>');
$(".datepicker").datepicker({ changeMonth: true, changeYear: true, numberOfMonths: 2, showWeek: true, dateFormat: 'dd-mm-yy'});
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
$('#select').change(function(){
if($('#select option:selected').text() == "Range"){
$('#range').show();
}
else{
$('#range').hide();
}
if($('#select option:selected').text() == "Individual"){
$('#ind').show();
}
else{
$('#ind').hide();
}
})
});
I have a jqGrid and some filter fields, 2 comboboxes and 2 jQuery-ui datepickers. When I try to post the values from the fields I only get the original value. For example, my combobox starts with an "all" option, which value is -1, no matter which option I select -1 will be posted. The same goes for the 2 datepickers, I only get "";
This is my code:
<?php
require_once 'DAO/programaDAO.php';
?>
<script>
$(document).ready(function(){
$( "#buscarBtn" ).button().click(function(){
$("#gdCiclos").trigger('reloadGrid');
});
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
$(function () {
$("#gdCiclos").jqGrid({
url:'sampleData.php',
postData: {fechafin:document.getElementById('to').value, fhechainicial:document.getElementById('from').value, programaSelect:document.getElementById('selectPrograma').value, estadoSelect:document.getElementById('selectEstado').value},
datatype: 'json',
mtype: 'POST',
colNames:['Ciclo Nº','Fecha Inicio', 'Fecha Fin', 'Programa', 'Estado'],
colModel:[
{name:'Ciclo Nº', index:'id', width:80, resizable:false, align:"center"},
{name:'Fecha Inicio', index:'FechaInicio', width:200,resizable:false, sortable:true},
{name:'Fecha Fin', index:'FechaFin', width:200,resizable:false, sortable:true},
{name:'Programa', index:'Programa', width:165,resizable:false, sortable:true},
{name:'Estado', index:'Estado', width:165, sortable:true}
],
pager: "#pagerGdCiclos",
rowNum: 30,
rowList: [10, 30, 100],
sortname: "FechaInicio",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Ciclos",
height:'auto'
});
});
});
</script>
<div id="filtrosBusqueda">
<div id="divBusProg">
<label id="labelPrograma" class="labelBusquedaItem">Programa: </label>
<?php
$eqId = $_GET['eqId'];
$listaProgramas = getTiposProgramasByEquipo($eqId);
echo("<select id=\"selectPrograma\" class=\"selectBox\">");
echo '<option value="-1">Todos</option>';
foreach ($listaProgramas as $value) {
echo '<option value="'.$value['programa_id'].'">'.$value['descripcion'].'</option>';
}
echo("<select id=\"selectPrograma\">");
?>
</div>
<div id="divBusEst">
<label id="labelPrograma" class="labelBusquedaItem">Estado: </label>
<?php
$listaEstados = getEstados();
echo("<select id=\"selectEstado\" class=\"selectBox\">");
echo '<option value="-1">Todos</option>';
foreach ($listaEstados as $value) {
echo '<option value="'.$value['ciclo_estado_id'].'">'.$value['descripcion'].'</option>';
}
echo("</select>");
?>
</div>
<div id="divBusRangoFecha">
<label for="from" class="labelBusquedaItem">Desde: </label>
<input type="text" id="from" name="from" class="selectBox" />
<label for="to" class="labelBusquedaItem">Hasta: </label>
<input type="text" id="to" name="to" class="selectBox" />
</div>
Buscar
</div>
<div id="gridBusqueda">
<table id="gdCiclos"></table>
<div id="pagerGdCiclos"> </div>
</div>
The problem with your programaSelect:document.getElementById('selectPrograma').value is that when you create the select, you are not closing it </select>, you are re-creating it <select id=\"selectPrograma\">, so it is getting the value of the second #selectPrograma not the first -
echo("<select id=\"selectPrograma\" class=\"selectBox\">");
echo '<option value="-1">Todos</option>';
foreach ($listaProgramas as $value) {
echo '<option value="'.$value['programa_id'].'">'.$value['descripcion'].'</option>';
}
echo("<select id=\"selectPrograma\">"); <------- This line
Change the last line to -
echo("</select>");
done, the proble was this line
postData: {fechafin:document.getElementById('to').value, fhechainicial:document.getElementById('from').value, programaSelect:document.getElementById('selectPrograma').value, estadoSelect:document.getElementById('selectEstado').value},
shuld be:
postData: {fechainicial :function() { return document.getElementById('from').value;}, fechafin:function() { return document.getElementById('to').value;}, programaSelect:function() { return document.getElementById('selectPrograma').value;}, estadoSelect:function() { return document.getElementById('selectEstado').value;}},
How do I change defaultDate: "+1w" to this format: yyyy-mm-dd? It must display like that in the input field.
JavaScript here:
<script>
$(function() {
var dates = $( "#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
</script>
php code here:
<?php
$IMG_DIR_URL = "./digits/";
$date = date("d F Y");
?>
Displaying contents here:
<div class="field">
<label>Date</label>
<input type="text" name="date" value="<?php value('date'); ?>" id="from" />
<?php if(isset($errors['date'])) { ?>
<div class="error"><?php echo $errors['date']; ?></div>
<?php } ?>
</div>
use date('Y-m-d') for yyyy-mm-dd with the PHP date function.
you can format it in the datepicker options by adding dateformat: 'yy-mm-dd', like so:
$(function() {
var dates = $( "#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateformat: 'yy-mm-dd',
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
I don't know what your value function does, but if it doesn't show the date
your PHP for displaying it should be:
<input type="text" name="date" value="<?php echo $date; ?>" id="from" />