I've tried to subtract between two dates. Date "a" and Date "b" using this code that I've found here. It works with jsfiddle.net but not with my project.
This is my code :
HTML and JS
$(document).ready(function() {
$("#startdate,#enddate").datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
})
$("#startdate").datepicker({
dateFormat: 'dd-mm-yy'
});
$("#enddate").datepicker({
dateFormat: 'dd-mm-yy'
});
$('#enddate').change(function() {
var start = $('#startdate').datepicker('getDate');
var end = $('#enddate').datepicker('getDate');
if (start < end) {
var days = (end - start) / 1000 / 60 / 60 / 24;
$('#days').val(days);
} else {
alert("You cant come back before you have been!");
$('#startdate').val("");
$('#enddate').val("");
$('#days').val("");
}
}); //end change function
}); //end ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css">
<div class="form-group">
<label class="control-label col-md-3">date 1</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="startdate">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">date 2</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="enddate">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">result</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="days">
</div>
</div>
But when I import into the project, it does not work. Like JS file not found the HTML's "id" or else. Can anyone help me ?
This is The JSFIDDLE link to this query.
it's working fine with me did you check in incognito mode? ctrl+shift+N and check in incognito
Related
There is an input which is Date Picker.
It is impossible to type in the input, everybody can only pick a date by mouse.
enter image description here
How can I call an event when the user changes Date ?
Here is HTML Code:
<div class="col-lg-3 col-md-3 col-xs-12">
<label for="homeWorkStartDate">From: </label>
<input type="text" id="homeWorkStartDate" class="pdate form-control" />
<input type="hidden" id="txtHomeWorkStartDate" />
<script>
var objCal1 = new AMIB.persianCalendar('homeWorkStartDate', {
extraInputID: 'txtHomeWorkStartDate',
extraInputFormat: 'YYYY-MM-DD'
});
</script>
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<label for="homeWorkEndDate">To: </label>
<input type="text" id="homeWorkEndDate" class="pdate form-control" />
<input type="hidden" id="txtHomeWorkEndDate" />
<script>
var objCal1 = new AMIB.persianCalendar('homeWorkEndDate', {
extraInputID: 'txtHomeWorkEndDate',
extraInputFormat: 'YYYY-MM-DD'
});
</script>
</div>
Here is what I tried but doesn't work:
$("#homeWorkStartDate,#homeWorkEndDate").on('input propertychange',function(){
alert("hi");
});
Did you try something like this ?
$( "#datepicker" ).datepicker({
onSelect: function () {
alert('hello');
}
})
I have two sets of field for adding time for the users. I have static field for selecting type and I can see the dropdown was working fine. I have another set of field that will be created dynamically based on the user input.Here the drop down is not working fine .I can feed the input data ,but the drop down is not working fine.
What I have tried is
<form class="form-inline">
<div class="form-group bfh-timepicker" data-mode="12h">
<label class="col-md-4 control-label" for="starttime">Starttime</label>
<div class="col-md-4">
<input type="time" class="form-control input-md" id="starttime0" placeholder="starttime"
required="">
</div>
</div>
<div class="form-group bfh-timepicker">
<label class="col-md-4 control-label" for="endtime">Endtime</label>
<div class="col-md-4">
<input type="time" class="form-control input-md" id="endtime0" placeholder="endtime" id="time"
required="">
</div>
</div>
</form>
The script code is
<script>
$(document).ready(function () {
$('#starttime0').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
});
</script>
<script>
$(document).ready(function () {
$('#endtime0').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
});
</script>
The above code is for selecting the time filed and which is static one.
The below code what I am creating is the dynamic filed for both start time and endtime
But the drop down is not working fine
Here my code is
<script>
var count = 0;
function addtextbox() {
count++;
var newTextBoxDiv = document.createElement('div');
newTextBoxDiv.id = 'Tools';
document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);
newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="starttime">Starttime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="starttime' + count + '" placeholder="starttime" required=""> </div></div>' +
'<div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="endtime">Endtime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="endtime' + count + '" placeholder="endtime" required=""></div></div></form>' +
' <input type="button" value="Remove" class="removeTools" onclick="removeTextArea(this);">'
console.log("Iam count", count);
};
function removeTextArea(inputElement) {
var el = inputElement;
while (el.tagName != 'DIV') el = el.parentElement;
el.parentElement.removeChild(el);
count--;
}
</script>
The script code is
<script>
function timePicker()
{
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
}
</script>
What I am getting is ,the dynamic time picker function is not showing the drop down
What I need is when I add the dynamic field,the drop down should be shown for that also.
#Guru Krishna
Please try this code it works properly :
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script>
<title>TimePicker</title>
</head>
<body>
<div class="container">
<h2>Time Picker</h2>
<p>This example of time picker using bootstrap and jquery.</p>
<form>
<div class="form-group">
<label for="starttime">Start Time:</label>
<input type="text" class="form-control" id="starttime" readonly>
</div>
<div class="form-group">
<label for="endtime">End Time:</label>
<input type="text" class="form-control" id="endtitme" readonly>
</div>
</form>
</div>
<script>
$("#starttime").clockpicker({
autoclose: true,
});
$("#endtitme").clockpicker({
autoclose: true,
});
</script>
</body>
</html>
I hope above code will be useful for you.
Thank you.
The element doesn't exist when you're initializing the time picker on endtime
in your function where you create the fields add
$('#endtime0').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
after you've created the element.
EDIT:
function addtextbox() {
count++;
var newTextBoxDiv = document.createElement('div');
newTextBoxDiv.id = 'Tools';
document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);
newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="starttime">Starttime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="starttime' + count + '" placeholder="starttime" required=""> </div></div>' +
'<div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="endtime">Endtime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="endtime' + count + '" placeholder="endtime" required=""></div></div></form>' +
' <input type="button" value="Remove" class="removeTools" onclick="removeTextArea(this);">'
console.log("Iam count", count);
$('#Tools input').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
};
This is initializing the timepicker on any input inside your newly created #Tools div. It's called after the creation so that the element exists when you go to initialize it.
My 2 Date Pickers bind with Angularjs directive. But i validate with java script.
after selecting date it return default date.
Script
<script>
if (datefield.type != "date") { //if browser doesn't support input type="date", initialize date picker widget:
jQuery(function ($) { //on document.ready
$('#start_date').datepicker({
dateFormat: 'yy-mm-dd',
minDate: 0,
onSelect: function (date) {
var date2 = $('#start_date').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#end_date').datepicker('setDate', date2);
//sets minDate to start_date date + 1
$('#end_date').datepicker('option', 'minDate', date2);
}
});
$('#end_date').datepicker({
dateFormat: 'yy-mm-dd',
onClose: function () {
var start_date = $('#start_date').datepicker('getDate');
console.log(start_date);
var end_date = $('#end_date').datepicker('getDate');
if (end_date <= start_date) {
var minDate = $('#end_date').datepicker('option', 'minDate');
$('#end_date').datepicker('setDate', minDate);
}
}
});
});
}
</script>
Html Code
<div class="col-md-5">
<div class="form-group">
<label name="lblOccup1"> Check in</label>
<input type="date" id="start_date" class="form-control" placeholder="Check in" data-ng-model="departuredate"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label name="lblOccup1"> Check out</label>
<input type="date" id="end_date" class="form-control" placeholder="Check Out" data-ng-model="returndate"/>
</div>
</div>
<div class="col-md-2">
<a class="link_button2" ng-href="#Url.Action("Booking", "home")?Rooms={{rooms}}&Destination={{des}}&DepartureDate={{departuredate}}&ReturnDate={{returndate}}"> Search </a>
</div>
After press search button i get null value to mvc controller.
Search Form
Controller
What is wrong with this code?
How to get Start Date and End Date using jquery.
For an example:
I need to get output:
Start date - 22/08/2016(should not be greater than today date and should not be auto-selected)
If a person select start date like today date ,end date should be filled automatically after one year date.
End date: 22/08/2017(by default in non-editable text box)
This my HTML code
<div class="form-group">
<label class="control-label">Start Date</label>
<div id="fromdatetimepicker" class="input-group">
<input type="text" class="form-control col-sm-5" placeholder="Select a Start Date" />
<a id="calIcon" class="input-group-addon btn btn-danger">
<span class="glyphicon glyphicon-calendar"></span>
</a>
</div>
</div>
<div class="form-group">
<label for="travelInputName">End Date</label>
<input readonly type="text" class="form-control" id="todatetimepicker">
</div>
This my js code
jQuery("#fromdatetimepicker").datetimepicker({
widgetPositioning: {
horizontal: 'left',
vertical: 'bottom'
},
allowInputToggle : true,
format: 'DD/MM/YYYY',
"minDate": moment()
});
jQuery("#todatetimepicker").datetimepicker({
widgetPositioning: {
horizontal: 'left',
vertical: 'bottom'
},
allowInputToggle : true,
format: 'DD/MM/YYYY',
});
Please, help me! How to do this and thanks in advance.
Try this
jQuery("#fromdatetimepicker").on("dp.change", function (e) {
var start_date = e.date
var end_date = start_date.setFullYear(date.getFullYear() + 1);
var todatetimepicker = jQuery('#todatetimepicker').data("DateTimePicker");
todatetimepicker.date(end_date)
});
Please modify "jQuery("#fromdatetimepicker").datetimepicker" event listener with below code and remove "jQuery("#todatetimepicker").datetimepicker" event listener as such it is redundant.
Please check below snppet.
$( function() {
$( "#fromdatetimepicker" ).datepicker({
dateFormat : 'dd/mm/yy',
onSelect: function(dateText) {
var dateText = dateText.split('/');
var to_date = dateText[0]+'/'+dateText[1]+'/'+(parseInt(dateText[2])+1);
jQuery("#todatetimepicker").val(to_date);
}
});
} );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/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.0/jquery-ui.js"></script>
<div class="form-group">
<label class="control-label">Start Date</label>
<div class="input-group">
<input id="fromdatetimepicker" type="text" class="form-control col-sm-5" placeholder="Select a Start Date" />
<a id="calIcon" class="input-group-addon btn btn-danger">
<span class="glyphicon glyphicon-calendar"></span>
</a>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="travelInputName">End Date</label>
<input readonly type="text" class="form-control" id="todatetimepicker">
</div>
can u try this
$('#dob').datepicker({
onSelect: function(value, ui) {
console.log(ui.selectedYear)
// var op = New date calculation Here
$('#datehidden').val(op);
},
maxDate: '+0d',
yearRange: '1920:2010',
changeMonth: true,
changeYear: true,
});
I have a problem by getting the selected value from the embedded/inline bootstrap datetimepicker.
Here's my code:
<div class="col-lg-8 datepicker_area" style="background: red;">
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker" data-date="12/03/2012 12:00 PM"></div>
<input type="hidden" name="date" id="my_hidden_input" value="">
</div>
</div>
</div>
<script type="text/javascript">
$("#datetimepicker").on("changeDate", function(event) {
$("input[type='hidden'][name='date']").val(
$('#datetimepicker').datepicker('getFormattedDate')
)
});
$(function () {
$('#datetimepicker').datetimepicker({
inline: true,
sideBySide: true
});
$('#datetimepicker').datetimepicker();
$('#datetimepicker').on("changeDate", function() {
$('#my_hidden_input').val(
$('#datetimepicker').datetimepicker('getFormattedDate')
);
});
});
</script>
</div>
</div>
There is nothing happening with my hidden input.
He's not saving the value in it.
I've got the code from the bootstrap docu.
Somebody knows how it works?
Thanks.
According to Bootstrap 3 Datepicker, you need dp.change event.
Reference: http://eonasdan.github.io/bootstrap-datetimepicker/Events/
Replace your changeDate event $('#datetimepicker').on("changeDate", function() {});
to
$('#datetimepicker').on('dp.change', function(event) {});
You can than get the date using event.date or even better, format the date event.date.format('MM/DD/YYYY h:mm a')
Example:
$('#datetimepicker').on('dp.change', function(event) { alert(event.date); });
Please refer below solution:
$(function() {
$('#datetimepicker').datetimepicker({
inline: true,
sideBySide: true
});
$('#datetimepicker').on('dp.change', function(event) {
//console.log(moment(event.date).format('MM/DD/YYYY h:mm a'));
//console.log(event.date.format('MM/DD/YYYY h:mm a'));
$('#selected-date').text(event.date);
var formatted_date = event.date.format('MM/DD/YYYY h:mm a');
$('#my_hidden_input').val(formatted_date);
$('#hidden-val').text($('#my_hidden_input').val());
});
});
#selected-date,
#hidden-val {
font-weight: bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div>
Selected Date: <span id="selected-date"></span>
<br/>
<br/>Value of hidden field: <span id="hidden-val"></span>
<br/>
</div>
<div class="col-lg-8 datepicker_area" style="background: red;">
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker" data-date="12/03/2012 12:00 PM"></div>
<input type="hidden" name="date" id="my_hidden_input" value="">
</div>
</div>
</div>
</div>
</div>
Move your hidden input inside the div (container of the inline datetimepicker). And, datetimepicker will automatically use it. Tested on version 4.17.47.
<div class="col-md-8">
<div id="datetimepicker" data-date="12/03/2012 12:00 PM">
<input type="hidden" name="date" id="my_hidden_input" value="">
</div>
</div>
Beloow hidden input worked for me
<input type="hidden" name="date" id="my_hidden_input" value="">
Assigned the datetimepicker directly to hidden element via id
<script>
$(function(){
$('#my_hidden_input').datetimepicker({
inline: true,
sideBySide: true
});
});
</script>