Text box appear underneath a JQuery DatePicker - javascript

I have a datepicker on my website that converts the selected date to a special date and displays it in a read only text box underneath. The thing is, is I want to use the built in feature in the datepicker where I can have it open and close when clicking a link or button.
Just the link opening the datepicker:
<input id="hiddenDate" type="hidden" />
Select Date
$(function() {
$('#hiddenDate').datepicker({
changeYear: 'true',
changeMonth: 'true',
startDate: '07/16/1989',
firstDay: 1
});
$('#pickDate').click(function (e) {
$('#hiddenDate').datepicker("show");
e.preventDefault();
});
});
JFiddle of above
Here is my personal code that I have on an independent page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.25">
<meta name="description" content="">
<meta name="author" content="">
<title>Calendar Converter</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$( function(){
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div id="calendar"></div>
<p><font font face="Verdana">Output: </font> <input class="target" type="text" id="datepicker2" size="19" readonly></p>
</div>
<script>
$( document ).ready(function() {
$("#hidden_calendar").hide();
});
$( ".target" ).change(function() {
});
$('#calendar').datepicker({
minDate: '2017-02-26', //Base Date
dateFormat: 'yy-m-d',
inline: true,
onSelect: function(dateText, inst) {
var date2 = $(this).datepicker('getDate');
var date1 = new Date("November 10, 2010 00:00:00");
var oneDay = 24*60*60*1000;
var start = 100;
var diff = Math.floor(( date2 - date1 ) / 86400000);
var output = start + Math.floor(diff/7);
$('#datepicker2').val(output);
}
});
$("#hide_calendar").click(function(){
$("#hidden_calendar").toggle();
});
</script>
</body>
</html>
Here is a JFiddle for the above code
As you can see, I have all the components I want, but I just don't how make it so when I click the link the first JFiddle, the textbox in the second JFiddle appears under the datepicker. I hope I am being clear about what I am having trouble with, if need be I can provide an image of what I am trying to do.
Some things I have tried are:
Using a bootstrap modal or popover with both the datepicker and textbox in it, neither worked how I wanted it to.
I have also tried modifying the datepicker but I just messed it up and had to revert it.
Any suggestions? I feel like what I am trying to do is trivial and it is bugging me I can't figure it out.


Not a straight forward solution to your problem, but you could use jQuery ui dialog to open a modal with datepicker in it.
$(function(){
$("#dialog").dialog({
autoOpen: false,
minWidth: 350,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
}
});
$("#opener").on( "click", function(e) {
e.preventDefault();
$( "#dialog" ).dialog( "open" );
});
$('#calendar').datepicker({
minDate: '2017-02-26', //Base Date
dateFormat: 'yy-m-d',
inline: true,
onSelect: function(dateText, inst) {
var date2 = $(this).datepicker('getDate');
var date1 = new Date("November 10, 2010 00:00:00");
var oneDay = 24*60*60*1000;
var start = 100;
var diff = Math.floor(( date2 - date1 ) / 86400000);
var output = start + Math.floor(diff/7);
$('#datepicker2').val(output);
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JQuery Datepicker</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog">
<div id="calendar"></div>
<lable>Output:</lable>
<input class="target" type="text" id="datepicker2" size="19" readonly>
</div>
Select Date
</body>
</html>
As you already using jQuery ui, you could achieve this without using any additional library or plugins.

Related

how to disable all future dates in input type=DatePicker using scripting [duplicate]

This question already has answers here:
jQuery DatePicker with today as maxDate
(5 answers)
Closed 3 years ago.
I'm developing application in iWorkflow platform. It is an object oriented platform. I have DatePicker control for Field named Select Date :.
I want to disable the future dates using javascript for type=DatePicker. But my codes isn't working.
I tried this by adding maxDate:0. But I think $("#ctrl_DatePicker_e0leq").DatePicker works for Input type=Text not DatePicker.
$("#ctrl_DatePicker_e0leq").DatePicker({
maxDate: 0
});
I'm expecting correct script to disable dates greater than the current date.

You can use this approach:
$(document).ready(function () {
var today = new Date();
$('.datepicker').datepicker({
format: 'mm-dd-yyyy',
autoclose:true,
endDate: "today",
maxDate: today
}).on('changeDate', function (ev) {
$(this).datepicker('hide');
});
$('.datepicker').keyup(function () {
if (this.value.match(/[^0-9]/g)) {
this.value = this.value.replace(/[^0-9^-]/g, '');
}
});
});
And:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Select Date: <input type="text" class="datepicker"></p>
For more Details you can use this link:

$(document).ready(function() {
$("#datepicker").datepicker({
minDate: 0
});
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#datepicker").datepicker({
minDate: 0
});
});
</script>
</head>
<body>
Date :
<div id="datepicker"></div>
</body>
</html>

Incorrect time is selected when user clicks in the textfield

When an existing entry for a process phase has a time like 13:53, opening the datetimepicker sets the time automatically to 13:00, so I could by accident change the time without realizing, just by opening the datetimepicker
Without open datetimepicker
With open datetimepicker
problem with datetimepicker
function createDateTimePicker(id, timePicker, lang) {
var displayTimepicker = (timePicker == true ||timePicker == 'true') ;
var dateTimePicker = $(id).datetimepicker({
showTimepicker : displayTimepicker,
controlType: 'select',
oneLine: true,
dateFormat: 'dd.mm.yy',
timeFormat: 'HH:mm',
stepMinute: 5,
showOn: 'both',
buttonImage: '/assets/images/calendar.png',
buttonImageOnly: true
});
return dateTimePicker;
}
Is there a way or solution to have the same time as the textfield or the closest time within 5 minutes of the text field time in the datetimepicker?

$(function() {
$('#basic_example_1').datetimepicker();
});
var setDateTime = function() {
$('#basic_example_1').datetimepicker('setDate', (new Date()));
}
var clearDateTime = function() {
$('#basic_example_1').val('');
}
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css" />
</head>
<body>
<p>Add a simple datetimepicker to jQuery UI's datepicker</p>
<div style="display:inline">
<input type="text" name="basic_example_1" id="basic_example_1" value="" />
<button onclick="clearDateTime()">clear</button>
<button onclick="setDateTime()">now</button>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
</body>
</html>
I have used jQuery datetimepicker plugin, hope it helps you!!!

Date format for Input Field

I just created input date field and tried to change the format. but unable to achieve. is this possible to change the format?
Code Snippet:
<form>
<input value="i want to show 09/09/2015" /><br><br/><br/>
<input type="date" id="dt" value="2014-09-09"/>
</form>
http://jsfiddle.net/HudMe/626/
I wanna show dd/mm/yyyy format.

Use the below datepicker.
https://jqueryui.com/datepicker/
Add below line your script.
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy'
});

<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<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() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
You can change formate of dat by:
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", <SPECIFY Date Formate here>);
});
});

Assuming you want to change <input type='date'> format so there is no way possible to change the format in <input type="date">.
But you can use https://jqueryui.com/datepicker/ instead of it. see also http://api.jqueryui.com/datepicker/.
After you can change you date format like below :
$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );

In Google Chrome it works fine !
For firefox
add small js
(function(){
var target = document.getElementById("dt");
var val = target.getAttribute ('value');
val = val.split("-").reverse().join('-');
target.setAttribute('value',val);
})();
to your fiddle

Custom Text in jQuery Datepicker

I have to display date in input box after picking from datepicker using jQuery.
I have used following code:
$(function () {
$("#datepicker").datepicker({
minDate: -0,
maxDate: "+1M +2D",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
dateFormat: 'D dd MM' });
$.datepicker.formatDate('yy-mm-dd');
});
And I am able to get date in this format: "Fri 09 August".
However my requirement is: Fri 09 August (Today)
Here's a JS Fiddle to work upon: http://jsfiddle.net/4cgPe/
Any idea how I could achieve this?

I couldn't find much about adding custom text to jQuery, so I came up with my own JavaScript.
I built upon your DatePicker code.
(What I understood was, if the selected date is of today, then add " (Today)", OR, add " (Tomorrow)" if selected date is of tomorrow OR, add nothing for other dates.
<html><head><link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({
minDate: -0,
maxDate: "+1M +2D",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
dateFormat: 'D dd MM yy' });
$.datepicker.formatDate('yy-mm-dd');
});
function updateDate(){
var inputDate=document.getElementById('datepicker').value;
var selectedDate=new Date(inputDate);
var today=new Date();
var tomorrow=new Date();
tomorrow.setDate(today.getDate()+1);
selectedDate.setHours(0,0,0,0);
today.setHours(0,0,0,0);
tomorrow.setHours(0,0,0,0);
var DaysFull=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var DaysShort=["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
var MonthsFull=["January","February","March","April","May","June","July","August","September","October","November","December","January"];
var MonthsShort=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan"];
var finalDate=DaysShort[selectedDate.getDay()]+" "+selectedDate.getDate()+" "+MonthsFull[selectedDate.getMonth()];
if(selectedDate.getTime() == today.getTime()){
document.getElementById('datepicker').value=finalDate+" (Today)";
}
else if(selectedDate.getTime() == tomorrow.getTime()){document.getElementById('datepicker').value=finalDate+" (Tomorrow)";}
else {document.getElementById('datepicker').value=finalDate;}
}
</script>
</head>
<body>
<form><input type="text" id="datepicker" onchange="javascript:updateDate()" /></form>
</body></html>
EDIT:
Additional Functionality: There may be a requirement to use Full Days/Months name or Short Days/Months, so you can use the array accordingly.
DaysFull: Sunday, Monday, etc.
DaysHalf: Sun, Mon, etc.
MonthsFull: January, February, etc.
MonthsHalf: Jan, Feb, etc.
Hope this helps. Let me know if this is not enough. :)

Full Source Code as below for different types of format :
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Format date</title>
<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>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30" /></p>
<p>Format options:<br />
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>
</body>
</html>
More about format refer This link

jQuery Datepicker resets date when using different date format

I have found a possible bug: datepicker resets initial date when using different date format like "mm yy" or "yy". So, if a select a date, the second time a do this the date is not saved and today's date is preselected.
Sample code:
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "mm yy" });
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>
See fiddle example.
It only happens if your format does not contain a "dd" or similar for day values.
Any idea of how to avoid it?

You should keep all the necessary element of date in your date picker's format.
format: 'dd-mm-yy',

I just got this from this answer to another question; it will solve your problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
Reference from:
http://jsfiddle.net/bopperben/DBpJe/

Categories

Resources