I want to be able to set the initial date for the JavaScript date picker widget I'm using by taking the value from the input field.
The input field is accepting values of "YYYY-MM-DD", would like this value passed to the date picker I'm using and to pop up with the date.
<input id="date" type="text" name="date" placeholder="YYYY-MM-DD" />
...
$A.bind(window, 'load', function(){
// Syntax : setCalendar( ID , TriggeringElement , TargetEditField , EnableComments , clickHandler , config )
$A.setCalendar('UniqueCalendarId', $A.getEl('dateIcon'), $A.getEl('date'), false, undefined, {
// Allow a date that isn't today to be set as the initial date. If unset, this value is initialized to today's date
initialDate: new Date(),
});
If you want to grab the current date as part of a "date-picker" process, I would go with the HTML5:
<input id="date" type="date">
Which can be demonstrated here:
<form>
<input id="date" type="date">
</form>
Even though older browsers don't support this feature, I believe it's limited to IE only at this point. And it gracefully degrades to type="text" on non-supporting browsers, but then, the date will have to manually be entered.
Alternatively, MDN provides some great examples here of how to integrate with JS as a fallback for the HTML input type. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
If you absolutely want to stay "scripty", I recommend jQuery datepicker UI.
Where you could perform the same task as such:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<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>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Give it a shot.
Related
I am new to javascript and need a timepicker in 24 hr format.. while there are several timepickers available online but most are with 12 hr format with complex code and external files. there are many jquery and javascript code available for datepicker but none is available for timepicker.
i am using this timepicker but it's not working.. the datepicker works fine.. What changes can be made?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<script>
$( function() {
$( "#datepicker" ).datepicker({ minDate: 0, maxDate: "+1M +10D" });
} );
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(function(){
$("#timepicker1").timepicker();
});
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="inputvalidation.js"></script>
</head>
In HTML 5 the recommendation allows for a:
<Input type="time">
The 24 hour in this case depends on the client, but this solution is simple.
Alternatively and with better responsive properties a drop down list could represent 0-24 hours and another drop down could represent 0-60 minutes.
In HTML 5 the recommendation allows for a:
<input type="time">
The time input format depends on the client's browser.
An alternative could utilise the input type='number' input with a min 0 - 24 for hours and one with min 0 - 60 minutes.
An additional alternative could resolve with better responsive properties with a select drop down for hours and minutes.
Have you tried using bootstrap-datetimepicker?
Using bootstrap-datetimepicker, if you need 24 hour format I believe you must edit Moment.js like this:
moment().format("dddd, MMMM Do YYYY, HH:mm:ss");
Format also dictates what components are shown, e.g. MM/dd/YYYY will not display the time picker.
Here is full document of this tool format.
UPDATE
I understand that you are confused because of diverse libraries that used in this tools. This question already asked before in here. You are able to copy and paste the libraries from there to your page as they are all external links to existing servers.
I add this javascript code to select date and time.But it doesn't work. Can anybody help me?
<div class="input-append date form_datetime">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
autoclose: true,
todayBtn: true,
pickerPosition: "bottom-left"
});
</script>
Have you included the required js files?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Feeding an internet search engine with the the property names in your code suggests you are using Bootstrap Datepicker by Sebastien Malot. More specifically, it's a verbatim copy of the Positionning example in the plug-in site.
To figure out what's going wrong you first need to check the browser console (not sure what your browser is but you can try F12). Since it's an exact copy of the sample code you'll most likely didn't care downloading it.
Apparently, the plugin author forgot to document the installation process as well as the dependencies. It seems it requires jQuery and, having a Bootstrap on its name, it may also need Twitter Bootstrap.
How to send an HTML form containing an EasyUi DateBox?
The form cannot be submitted. Nothing happens when clicked on the Submit button. When I comment out the DateBox tag, the form is submitted OK.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DateBox example</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>DateBox example</h2>
<form action="showDate.jsp">
<div>
<label for="item">Item name:</label>
<input type="text" id="item" name="itemName" required="required">
</div>
<br>
<div>
<label for="sdate">Shipment date:</label>
<input type="text" class="easyui-datebox" id="sdate"
name="shipmentDate" required="required">
</div>
<input type="submit">
</form>
</body>
</html>
This is the HTML form.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>The date</title>
</head>
<body>
<p>Item name: <%= request.getParameter("itemName")%> </p>
<p>Shipment date: <%= request.getParameter("shipmentDate")%> </p>
</body>
</html>
This is the JSP page, which should receive the request parameters.
It looks like you're getting this issue because the EasyUI datebox control is hiding your textbox and inserting it's own textbox in the DOM. EasyUI isn't honoring the HTML5 required attribute on the newly added textbox. To add insult to injury, since your original textbox [now hidden] still has the required attribute, when Chrome attempts to validate it, validation fails and Chrome attempts to put focus back in your original textbox. Since your's is now hidden and can't receive focus, Chrome doesn't know what to do and stops the process at that point.
To get around this, my solution (if you want to continue to use HTML form validation) is to use EasyUI's api to initialize the EasyUI datebox control by making the markup as bare-bones as possible:
HTML:
<input type="text" id="sdate">
And initialize the EasyUI datebox and add the required attribute directly to the newly created EasyUI datebox (with a slightly reasonable date format pattern).
JavaScript:
$(document).ready(function () {
$('#sdate').datebox(); // Initialize the easyui datebox
// Make the easyui datebox honor HTML5 validation
$('#sdate').datebox('textbox').attr({
'required': 'true',
'pattern': '(?:(?:0[1-9]|1[0-2])[\/\\-. ]?(?:0[1-9]|[12][0-9])|(?:(?:0[13-9]|1[0-2])[\/\\-. ]?30)|(?:(?:0[13578]|1[02])[\/\\-. ]?31))[\/\\-. ]?(?:19|20)[0-9]{2}'
});
});
Working Codepen
Personally, I'm not a huge fan of this solution (or of EasyUI controls for that matter), because it is a work-around for what I perceive as deficiencies in the EasyUI controls, but this should work in a pinch for HTML5 validation.
Aside: The EasyUI datebox does have it's own required option that may be passed during initialization, but it's for working with EasyUI's custom validator and not HTML5 validation, as of the writing of this post.
Sources:
EasyUI Datebox Documentation
EasyUI Combo Documentation (Parent control of Datebox)
Stackoverflow: Various contributors (especially Ankit Sharma's answer)
I have date picker using angular-ui datepicker directive, however when I select a date it shows me the previous day. And tried it via console, the result remains.
I don't get the main reason behind this issue.
The Date constructor only recognises a few formats when a string is passed to it. You need to use Date.parse which recognises a lot more formats and produces the representation of the passed in date string as the number of milliseconds since the Epoch which, in turn, will be accepted by the constructor and produce the desired date object.
var date = new Date(Date.parse("2015-07-27T22:00:00.000Z"));
The documentation specifies that you need to pass the date as
new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);
So you should pass it as:
new Date(2015,07,27,22,00,00,0000000000);
or else you need to use the Date.parse to parse the date correctly.
On a side note: moment.js is good to handle all these issues.
May be it seems work for you
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display month & year menus</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({
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
i'm using sublime text 3 and i've tested other jQuery UI elements but decided to try using date picker today with a small project i'm putting together. I notice that when I wanted to try it out I first saved the default code from the example on jQuery's site locally in it's own .html file, then I tried to load it up.
default code from example:
<!doctype html>
<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>
unfortunately, this brings up an input field but, on clicking into the field, i get no ability to select a date. In fact the date selection dropdown doesn't show up at all but I can tell that the input field has been selected. I thought perhaps I had left something out when copying the code over to my test file so I loaded up JSBin and pasted the code there. Magically, it works. JSBin exampleI'm assuming i'm somehow not linking to the appropriate style sheet or the CDN for the jQuery UI. Is that assumption correct or why isn't this working locally?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
P.S- I have removed link to css file as it might have been your local css file. You can add that back.