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.
Related
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.
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.
I am building Reacts based application, I have a few jquery elements on the page such a the JqueryUI date picker and bootstraps tooltip.
The problem is these elects do not work until i reload the page.
So its like the jQuery scripts are not be loaded the first time around.
I have looked through the console and cannot see any errors related to jQuery/javascript.
Any help would be much appreciated. here is my index.html page
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<title>ICETEA</title>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- JQuery UI JS - Used for the datepicker -->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Bootstrap theme -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<!-- JQuery UI CSS - Theme: Blitzer, used for the datepicker -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/blitzer/jquery-ui.css">
</head>
<body>
<div id="app"></div>
<script src="/js/main.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", "DD d MM" );
});
});
</script>
</body>
</html>
What's probably happening is that your initial page load attempts to load everything from the network, while the second load retrieves assets from browser cache. You could verify this by using your developer tools to always load without cache; if my hypothesis is correct, then you would see a higher prevalence of your errors, even when you reload the page.
As #vanburen pointed out in their comment, the likely explanation is that you're not ordering your scripts correctly. jQuery should always be loaded first, but right now you've got it after Bootstrap. This is supported by the console error you'll see when you attempt to load the page as-is with your developer tools open:
Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) # bootstrap.min.js:6
As an additional optimization, you can consider putting your CSS before your synchronous scripts, so the browser can be loading and parsing them while it's simultaneously loading your JavaScript.
Bottom line: Be sure to get familiar with your developer tools. They should always be your first resource when you face an unexpected behavior.
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.