I am trying to format a jquery datepicker to display as Saturday, 18 May, 2013 but also have a second hidden field that would submit 2013-05-18 so I can use it in a MySQL query. I cannot seem to get it to work right. It keeps displaying as 05/18/2013. Here is my code.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
altField: "#alt-datepicker",
altFormat: "yy-mm-dd",
format: "DD, MM d, yy"
});
});
</script>
Date: <input type='text' id='datepicker' placeholder='Date'/><br />
<input type='hidden' id='alt-datepicker' name='AddHomeworkDate' />
Try like this
$('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
READ MORE DATEPICKER
var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();
Assume that you already got date value - like - 6/09/07
var cur_date = '6/09/07';
dateFormat(cur_date, "dddd, mmmm dS, yyyy, h:MM:ss TT");
It will give you output - Sat Jun 09 2007 17:46:22
see this http://blog.stevenlevithan.com/archives/date-time-format for more explanation.
You did small mistake in dateFormat insted simply format
Here is the solution check this fiddel jsfiddle.net/2e8qE/
This works just fine;
$(function() {
$( "#datepicker" ).datepicker({
altField: "#alt-datepicker",
altFormat: "yy-mm-dd",
dateFormat: "DD, MM d, yy"
});
});
jsFiddle
Related
Am using Jquery Datepicker for my project . If i want to change date format my code will be
$( "#datepicker1" ).datepicker({
dateFormat: "dd-mm-yy"
});
Its not working . But if am using this format its working
$("#datepicker1").datepicker("setDate", '+1d');
Please provide me a solution . Thanks in Advance
To disable all previous dates, give start date as today date
startDate: new Date()
$(function() {
$( "#datepicker" ).datepicker({
format: 'dd/mm/yyyy',
startDate: new Date(),
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" rel="stylesheet"/>
<div> Select Date <input type="text" id="datepicker" /></div>
I'm working with php and datepicker for an application that requires the week number from a date. I just noticed that datepicker is one week behind php date("W"). I have a Fiddle showing the issue. Is there a way to correct this? Thanks for any insight.
JS:
<script>
$(document).ready(function () {
$( ".datepicker" ).datepicker({
showWeek: true,
dateFormat: 'yy-mm-dd'
});
});
</script>
PHP:
<?php echo 'Current week ' .date("W");?>
HTML:
<input name="date_task[]" class="datepicker" type="text" />
I was able to fix it by changing the first day of the week to monday.
<script>
$(document).ready(function () {
$( ".datepicker" ).datepicker({
showWeek: true,
dateFormat: 'yy-mm-dd',
firstDay: 1
});
});
</script>
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"/>
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:'
});
});
At the moment, I am using the datepicker jquery ui widget to allow users to pick a date off the calendar.
I want to change what I have so I can have the calendar appear on hover/ click of text saying 'choose your day' and then when the calendar option is clicked, it will redirect to a page.
Is this possible?
Jquery at the moment -
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
$('#datepicker').datepicker('setDate', 'today');
});
</script>
Html
<input type="text" id="datepicker" size="30" name="date"/>
Cheers
1.
and then when the calendar option is clicked, it will redirect to a
page.
http://api.jqueryui.com/datepicker/#option-onSelect
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(){
document.location.href = '/';
}
});
2.
I can have the calendar appear on hover/ click of text saying 'choose
your day'
$('#datepicker').on('focus', function(){
alert('Choose your date');
});