Use jquery timepicker and datepicker simultaneously - javascript

I need to use both timepicker and datepicker. But only one of them works. My code is mentioned below. I am using multiple jquery files.
<script type="text/javascript">
$(document).ready(function() {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.timepicker').timepicker({
showPeriod: true,
showLeadingZero: true
});
});
</script>
Date : <input type="text" class="datepicker"/>
Time : <input type="text" class="timepicker"/>

Check Timepicker with Datepicker This one plugin has both pickers as a single component.

I used https://github.com/trentrichardson/jQuery-Timepicker-Addon
<link href="yourpath/jquery-ui-timepicker-addon.css'?>" rel="stylesheet" media="all">
<script src="yourpath/jquery-ui-timepicker-addon.js'?>"></script>
$(function() {
$( ".datepicker" ).datepicker();
});
$(function() {
$(".timepicker").timepicker();
});
and html
input type="text" name="date" value="" placeholder="Conference Name" id="datepicker"
input type="text" name="start_time" value="" placeholder="Starting Time" class="timepicker"
input type="text" name="end_time" value="" placeholder="Ending Time" class="timepicker"
it works for me.I think its jquery version problem

Make sure the library is loaded from CDN http://cdnjs.com/libraries/jquery-ui-timepicker-addon
Once the js and CSS are loaded successfully, you can use the plugin as per examples given in httpp://jonthornton.github.io/jquery-timepicker/. I used the following options to get AM/PM selector;
$('input.timepicker').timepicker({controlType: 'select',
timeFormat: 'hh:mm TT',
dropdown: true,
scrollbar: false,
ampm: true});
For detailed options list refer to httpp://timepicker.co/options/
2 links have httpp instead of http cz SO wouldn't allow me to post many links in one answer.

Related

Bootstrap Datetimepicker Display twice

I am getting the problem to display datetimepicker. i got the datetimepicker twice when i click id of shankar. I mentioned the screenshot below
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
$('#shankar').datetimepicker();
This code will help you:
<body>
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
</body>
</html>
<script>
$("#shankar").click(function () {
$("#shankar").datepicker('show').on('changeDate',function(ev){
$('.datetimepicker').hide();
});
});
</script>
Please check , if you have defined a custom editor Templates for DateTime, and setting the class .datepicker there. its possible you are doing explicit duplicate initialization of calender control.
As you are using bootstrap ,bootstrap-datepicker.js initializes the all nodes which has .datepicker class without explicit instruction.
Remove the explicit initialization in your function.
source
You can try:
setTimeout(function(){
$('.dpdatetimepicker').datetimepicker({
startDate: new Date(start_date),
todayBtn: "linked",
orientation: "bottom auto",
daysOfWeekHighlighted: "5",
todayHighlight: true,
autoclose: true
});
},1000);

Add Today Button in datetimepicker with the below code

I would like to add Today button in datetimepicker calender. I have an idea to add with the syntax "todayBtn:true". But i dont know how to implement it while showing with the below code
<html>
<body>
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
</body>
</html>
<script>
$("#shankar").click(function () {
$("#shankar").datetimepicker('show').on('changeDate',function(ev) {
$('.datetimepicker').hide();
});
});
</script>
Set following properties for your datepicker (todayBtn:"linked").
$('#dateFieldId').datepicker({
todayBtn: "linked",
todayHighlight : true,
orientation: "left",
autoclose: true
});
Include jquery-ui javascript and css and add the code
refer : http://jqueryui.com/datepicker/#buttonbar
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
And to put Todays date in the panel:
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide');
});
Refer here: https://forum.jquery.com/topic/jquery-ui-datepicker-today-button
Try showButtonPanel: true
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
JSfiddle
If you mean this datetimepicker it would be as simple as that:
<html>
<body>
<input type="text" id="shankar" class="form-control" name="from_validity" placeholder="select to validity">
</body>
</html>
<script>
$(function() {
$("#shankar").datetimepicker({
showTodayButton: true,
format: 'YYYY-MM-DD hh:mm'
});
});
</script>

Open two jquery datepickers simultaneously

I have two input fields containing a class that triggers a datepicker to open. Both work fine independently, i.e when I click on one or the other but I want for both datepickers to open when either input field is clicked.
Here is the script part of the code
$(document).ready(function() {
$( ".datefields" ).datepicker({ dateFormat: 'dd/mm/yy',numberOfMonths: 1, yearRange: "2012:2014", changeYear: true, changeMonth: true});
and this is the html
<div id="quoteformcollection">
<h1>Collection</h1>
<input type"text" class="startTbl locationfields" id="AutoLocStart" value="Please Type a Collection Location"onclick="clearVal(this);"/>
<input type="hidden" id="DepotStart" value=""/></td>
<input type="text" class="datefields" id="collectiondate" value="21/05/2012"/>
<input type"text" class="timefields" value="12:00" />
</div>
<div id="quoteformreturn">
<h1>Return</h1>
<input type"text" class="locationfields" value="Enter the city or location for return" />
<input type"text" id="returndate" class="datefields" value="21/05/2012" />
<input type"text" class="timefields" value="12:00" />
</div>
I have tried looking for an answer myself but am quite new to jquery and struggling a bit so any help would be much appreciated.
I would also like for whatever value is selected in the first datepicker, for the default date in the second to be incremented by x number of days, which again I am not sure of the best way to go about it.
Any advice would be hugely appreciated!
Try this code for instance to link the two datapickers:
$('#collectiondate').datepicker({
dateFormat: "#",
onSelect: function(dateText, inst) {
var dateText = eval(dateText);
var min = new Date();
min.setTime(dateText);
$('#end').datepicker('option', 'minDate', min);
}
});
$('#returndate').datepicker({
dateFormat: "#",
});
I think you'd have to use the calendar 'inline' and manage how it's popped up yourself through jQuery / Javascript. You need to point the cal to a div tag to use it inline.
http://jqueryui.com/demos/datepicker/#inline

Jquery date picker - want display date in an input field

Hava an jquery calendar:
$(function() {
$("#datepicker").datepicker({
minDate: 'today',
maxDate: "+90D",
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "D, dd MM, yy"
});
});
and
<form method="post">
<div id="datepicker">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
I want to display the date inside the input field...Please help me
The problem is that you have duplicated your id value datepicker. It's there twice.
IDs are supposed to be unique (one per page). Even if you were using classes, you'd be calling datepicker() on both the <div> and the <input>, which is surely not what you want.
Just remove the id from the div.
Working demo: http://jsfiddle.net/wesley_murch/PMFwg/
you cannot have two same id in a single page , use class for the same instead of ids
<form method="post">
<div id="datepicker1">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
above will work fine as div id you can change to datepicker1 or custom it

Jquery UI Datepicker on an image

Greetings,
I want to pop up the Jquery Datepick as the image is clicked and displaying next to it. Once a date is clicked, I want to post my form.
Here how I try this:
The HTML:
<form id="myform">
<span class="quickgo">
Quick Go:
<select>
<option value="1">Discovery Channel</option>
<option value="2">History Channel</option>
</select>
<img class="calenderpick" src="/img/calender.png" />
</form>
And the javascript part:
<script type="text/javascript">
$(function() {
$(".calenderpick").click(function() {
$(this).datepicker();
alert("it is clicked!");
});
});
</script>
Once this image is clicked, I can get the "it is clicked warning" however not the date picker. I also have no clue about how to trigger the form posting event once a date is picked. In the end I want to post the selected channel and the picked date so that I can switch the page.
Thanks
Hellnar,
here's what i use regularly in my mvc apps:
<input class="date" id="StartDate" name="StartDate" value="" type="hidden" />
<script type="text/javascript">
$(document).ready(function() {
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/img/calender.png'
});
});
</script>
hope this helps (notice i use an id and not a class selector). also, check the spelling on calender - should be calendar :)
edit - if you wanted to submit the form on selecting the date, change the javascript code to:
<script type="text/javascript">
$(document).ready(function() {
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/img/calender.png',
onSelect: function(dateText, inst) { $("#myform").submit(); }
});
});
</script>
Why its not opening on clicking the image
Look into the source over here JQuery Datepicker Icon Trigger
How to post the form on selecting a date
Look into the source over here JQuery Datepicker Events - onSelect
in the onSelect event you can do something like $("#form").submit()
Hope this helps

Categories