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" />
Related
I'm having 2 textbox for date. One is From Date & another is To Date.
Let us say.
From Date 1
To Date 1
&
From Date 2
To Date 2
I am using date picker for textboxes. If user select 24-01-2012 in 'From Date 1' & 24-01-2016 in 'To Date 1'. Then, I've to restrict user to select date in 'From Date 2' from 01-01-1935 -To- date selected in 'From Date 1'.
<?
$current_year = date("Y");
$past_year = $current_year - 80;
?>
I'm storing date as
var FromDate1= $("#FromDate1").val();
var ToDate1= $("#ToDate1").val();
var FromDate2= $("#FromDate2").val();
var ToDate2= $("#ToDate2").val();
Here, $past_year and $current_year is available. How can I restrict user to select date in 'From Date 2' from 01-01-1935 -To- 'FromDate1'.
$(".addmorefromP").datepicker({
changeYear: true,
maxDate: new Date(),
changeMonth: true,
yearRange: '<?php echo $past_year . ':' . $current_year; ?>',
dateFormat: 'mm-dd-yy',
onClose: function () {
$(this).valid();
}
});
Here, yearRange: '<?php echo $past_year . ':' . $current_year; ?>', is used. Is there any way to use FromDate1 in place of $current_year.
I have been trying since 2 hours. I am not good in jquery, so i was unable to do it. Any help/hint is appreciable. Please help.
Please have a look at below code. May be it will be helpful.
Fiddle Link: http://jsfiddle.net/pqhtt7gb/5/
HTML:
<div id="date1">
FromDate1: <input id="FromDate1" data-index="0" class="datepickerStart" type="text" />
ToDate1: <input id="ToDate1" data-index="0" class="datepickerEnd" type="text" />
</div>
<div id="date2">
FromDate2: <input id="FromDate2" data-index="1" class="datepickerStart" type="text" />
ToDate2: <input id="ToDate2" data-index="1" class="datepickerEnd" type="text" />
</div>
JQuery Code:
$(".datepickerStart").datepicker({
constrainInput: true,
changeMonth: true,
changeYear: true,
firstDay: 1,
numberOfMonths: 1,
onClose: function (selectedDate, obj) {
var index = obj.input.data("index");
$(".datepickerEnd[data-index="+index+"]").datepicker("option", "minDate", new Date(selectedDate));
if(index == 0){
$(".datepickerStart[data-index=1],.datepickerEnd[data-index=1]").datepicker("option", "maxDate", new Date(selectedDate));
}
}
});
var currentDate = new Date();
var currentYear = currentDate.getFullYear();
var pastYear = currentYear - 80;
var pastDate = new Date(pastYear+"/01/01");
$(".datepickerStart[data-index=1]").datepicker("option", "minDate", pastDate);
$(".datepickerStart[data-index=1]").datepicker( "setDate", pastDate);
$(".datepickerEnd").datepicker({
constrainInput: true,
changeMonth: true,
changeYear: true,
firstDay: 1,
numberOfMonths: 1
});
Try this
$(".addmorefromP").datepicker({
changeYear: true,
maxDate: new Date(),
changeMonth: true,
minDate:new Date(<?php echo $past_year;?>),
maxDate:new Date(<?php echo $current_year;?>),
//yearRange: '<?php echo $past_year . ':' . $current_year; ?>',
dateFormat: 'mm-dd-yy',
onClose: function () {
$(this).valid();
}
});
I am using jQueryUI datepicker and here is the code.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#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 );
}
});
});
</script>
<form action="{LINKTO_EXPORT}" method="post">
<h1>{EXPORT_CSV}</h1>
<label for="from">from</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<input type="submit" value="{EXPORT_TEXT}">
</form>
When I "post" the "from" and "to",
$fromstr = $_POST["from"];
$tostr = $_POST["to"];
$from = date('Y-m-d H:i:s',strtotime($fromstr." 02:00:00"));
$to = date('Y-m-d H:i:s',strtotime($tostr." 02:00:00"));
the to has been converted properly, i.e., 2015-06-13 02:00:00 but the from has not. It returned 6/1/2015 2:00 instead. To make sure I am fetching the correct values, I echoed the $fromstr and $tostr.
$fromstr returned 6/1/2015
$tostr returned 06/13/2015
Why was the from returned m/d/yyyy while to did mm/dd/yyyy? How do I convert a m/d/yyyy string to timestamp then? Please help, thank you!
Try this..
Download following js
<link rel="stylesheet" type="text/css" href="http://xdsoft.net/scripts/jquery.datetimepicker.css"/>
<script src="http://xdsoft.net/scripts/jquery.datetimepicker.js"></script>
You cant use directly ,so download js and css.
<script>
$(function() {
$('#datetimepicker8').datetimepicker({
onGenerate:function( ct ){
$(this).find('.xdsoft_date')
.toggleClass('xdsoft_disabled');
},
minDate:'-1970/01/2',
maxDate:'+1970/01/2',
timepicker:false
});
$('#datetimepicker9').datetimepicker({
onGenerate:function( ct ){
$(this).find('.xdsoft_date')
.toggleClass('xdsoft_disabled');
},
minDate:'-1970/01/2',
maxDate:'+1970/01/2',
timepicker:false
});
});
</script>
<input type="text" id="datetimepicker8"/>
<input type="text" id="datetimepicker9"/>
I've been trying for the last days to get this thing to work.
Have two datepickers much like start and end date demo but cannot have them to work. This code works on the body of a page, but not on the header where I would like to have a search bar.
<script type="text/javascript">
$(function() {
$( "#from" ).datepicker({
dateFormat: "dd-mm-yy",
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
dateFormat: "dd-mm-yy",
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<form method="post" name="top_search_form" action="<?php bloginfo('wpurl');?>/?page_id=13" style="z-index:inherit">
<input type="hidden" name="a" value="dosearch"/>
<input id="top_search_input" placeholder="Procurar..." style="z-index:inherit" type="text" name="keywordphrase" value=""/>
<input type="text" id="from" name="searchstartdate" placeholder="Partida" class="from" style="z-index:inherit"/>
<input type="text" id="to" name="searchenddate" placeholder="Chegada" class="to" style="z-index:inherit"/>
<input id="top_search_button" type="submit" value="Search" style="z-index:inherit">
</form>
Can anyone help me please?
Move the setup outside of the function() you're using for some reason the date picker doesn't like that/doesn't hook to the boxes correctly.
Here's how I do it and it works fine.
Start : <input type="text" name="startdate" id="startdate" value="<?php echo $startdate;?>" />
End : <input type="text" name="enddate" id="enddate" value="<?php echo $enddate;?>" />
<script>
//date popup instigation
$( "#startdate" ).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true });
$( "#startdate" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#startdate" ).datepicker( "option", "showAnim", "blind" );
$( "#enddate" ).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true });
$( "#enddate" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#enddate" ).datepicker( "option", "showAnim", "blind" );
</script>
may be your header has a different php page. So in your header page include .js files and the code for datepicker. Hope it will work for you.
I would use classes instead of id's, I would also place the Javascript and the end of the document, this should fix your issue.
<form method="post" name="top_search_form" action="<?php bloginfo('wpurl');?>/?page_id=13" style="z-index:inherit">
<input type="hidden" name="a" value="dosearch"/>
<input id="top_search_input" placeholder="Procurar..." style="z-index:inherit" type="text" name="keywordphrase" value=""/>
<input type="text" id="from" name="searchstartdate" placeholder="Partida" class="from" style="z-index:inherit"/>
<input type="text" id="to" name="searchenddate" placeholder="Chegada" class="to" style="z-index:inherit"/>
<input id="top_search_button" type="submit" value="Search" style="z-index:inherit">
</form>
<script type="text/javascript">
$(document).ready({
$( ".from" ).datepicker({
dateFormat: "dd-mm-yy",
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( ".to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( ".to" ).datepicker({
dateFormat: "dd-mm-yy",
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( ".from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
I have to input field "From" and "to
<input type="text" name="startDate" id="from" size="12"/>
<input type="text" name="endDate" id="to" size="12"/>
If would like to know how I could make in sort that datepicker block the calendar within the month where From is selected. So if I choose November 20th, then the id "to" could only be after the 20th to 31st of november. It can't go to the other month.
Here's what I have
var dates = $( "#from, #to" ).datepicker({
changeMonth: false,
numberOfMonths: 1,
maxDate: '+0D',
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 );
}
});
How could we block the user to not go pass the month selected?
You could use a date range picker like this one: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
When i set my input field without datepicker like that:
<input type="text" name="date" value="<?php echo $date; ?>" class="textbox" />
I can see my value which i get from database. The format is: 1965-02-05
When I set this code:
<script>
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
}
);
$( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#datepicker" ).datepicker( "option", "yearRange", '1900:2011' );
});
</script>
<input type="text" id="datepicker" name="date" value="<?php echo $date; ?>" class="textbox" />
nothing shown in text input area, but i can see datepicker without any problem when i click inside of the text input area.
What is the problem?
I'am formatting like that:
http://docs.jquery.com/UI/Datepicker/formatDate
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
yearRange: '1900:2011',
constrainInput: false
});
See working example: http://jsfiddle.net/eATRv/
Try this. Now you should also be able to see if it is the correct format :)