I have a code of calender in java script. Its in working, want it to automaticaly select current date .its Possible.
Javascript code:
<script>
$(function() {
$( "#interview_on" ).datepicker();
});
</script>
Custom Form:
<form method="POST" action="/interviewvalue/" class="form-horizontal" id="userform" name="uform" enctype="multipart/form-data">{% csrf_token %}
<div class="control-group formSep">
<label for="u_fname" class="control-label">Interview On</label>
<div class="controls">
<input type="text" class="input-xlarge" name="interviewon" id="interview_on" readonly="true" />
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-gebo" type="submit" name="asubmit">Submit</button>
<input type="reset" name="reset" value="Cancel" class="btn btn-gebo" />
</div>
</div>
If you want the actual field to be filled with the current date just use the setDate after creating the datepicker. Like this
<script type="text/javascript">
$(function() {
$("#interview_on").datepicker();
$("#interview_on").datepicker('setDate', new Date());
});
</script>
In case you want to restrict the selectable dates to only today, Tobo's suggestion is correct, just do
<script type="text/javascript">
$(function() {
$("#interview_on").datepicker({minDate: 0, maxDate: 0});
$("#interview_on").datepicker('setDate', new Date());
});
</script>
You can restrict the selectable range of the Datepicker like this
$( "#datepicker" ).datepicker({
minDate: -10D, maxDate: "+10D"
});
which shows 10 days of the past and 10 days of the future.
You find a detailed description here http://jqueryui.com/datepicker/#min-max
Related
I use the bootstrap date picker and I use two textboxes to search by date from-to, want to the second textbox give me the days after the days in the first textbox,
any help, please.
HTML :
<form action="{{url('search/ticket')}}" method="get">
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerfrom form-control" name="remember" placeholder="Search From" id="txtStartDate" required>
</div>
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerto form-control" name="remember" placeholder="Search To" id="txtEndDate" required>
<button type="submit" class="basic-button">Submit</button>
</div>
</form>
javascript :
<script type="text/javascript">
$(document).ready(function () {
$('.timepickerfrom').datetimepicker({
format: 'YYYY-MM-DD',
});
$('.timepickerto').datetimepicker({
format: 'YYYY-MM-DD',
});
});
</script>
You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.
Try this code:
$(document).ready(function () {
$('.timepickerfrom').datepicker({
format: 'yyyy-mm-dd',
}).on('changeDate', function(selected){
var minDate = new Date(selected.date.valueOf());
$('.timepickerto').datepicker('setStartDate', minDate);
});
$('.timepickerto').datepicker({
format: 'yyyy-mm-dd',
});
});
I found the solution if anyone wants help.
It's called the linked datepicker
https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers
I'm completely new to js/jquery. For my django app i need to get selected date and then process it with ajax script.
I'm using bootstrap-datepicker from eternicode. Here is my html:
<form style="color: white;" class="form-date" role="form" action="" method="get">
<div class="form-group" id="datepicker">
<div></div>
<input type="hidden" name="dt_due" id="dt_due">
</div>
<button type="submit" class="btn btn-default btn-lg btn-home">Go to summary</button>
</form>
And here is my js for testing:
$('#datepicker div').datepicker({
language:"fr",
startDate: "+1d"
}).on('changeDate', function(event) {
var date = ?????;
alert("Chosen date is: " + date);
});
How do i assign selected value to var date? I've tried
var date = $('#dt_due').datepicker('getDate');
But date is null then.
I'm trying to capture the date selected on my bootstrap 3 datepicker, but I can't seem to understand the documentation, so I tried this:
<div id="datetimepicker">
<input type="hidden" class="form-control" id="datepicker-data"></div>
</div>
with my jquery being:
$('#datetimepicker').datetimepicker({
inline:true,
format: 'DD/MM/YYYY',
daysOfWeekDisabled: [0, 6]
});
$("#datetimepicker").click(function(){
var dateData = $('#datepicker-data').val();
alert(dateData);
});
How do I get the date I selected on the datepicker?
Your html was incorrect. Here is the corrected html. I believe your intention was to use inline datetimepicker such as in this example. If you see the example quoted in the page:
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<!-- Start of datetimepicker html-->
<div id="datetimepicker12"></div>
<!-- End of datetimepicker html-->
</div>
</div>
</div></code>
So your corrected HTML should be as belows:
<div id="datetimepicker">
<input type="hidden" class="form-control" id="datepicker-data">
</div>
javascript
$('#datetimepicker').datetimepicker({
inline:true,
format: 'DD/MM/YYYY',
daysOfWeekDisabled: [0, 6]
});
$("#datetimepicker").click(function(){
var dateData = $('#datepicker-data').val();
alert(dateData);
});
I'm sure this is simple and it's my understanding of jquery/javascript that is holding me back - but I can't get this to work.
All I need to do - is - When a button on the screen is clicked, clear some of the input field on the form back to their original values.
This is working fine, for all fields except a datetimepicker field.
Here is the relevant bits of code, that defines the input field :
<div class='form-group' id='START_DATEFormGroup'>
<label for='START_DATE' class='col-sm-2 control-label' data-toggle='tooltip' data-placement='top' title=''>Start Date</label>
<div class='col-sm-8'>
<div class='input-group date form_date col-sm-3' data-date-format='dd M yyyy' data-link-field='START_DATE' data-link-format='yyyy-mm-dd'>
<input class='form-control' size='16' type='text' />
<input type='hidden' id='START_DATE' name='START_DATE' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'>
</span> // group-addon
</span> // calendar
</div> // form_date
</div> // col-sm-8
</div> // form-group
I am initializing datetimepicker as follows :
function enableDatepicker(){
$( document ).ready(function() {
$('.form_date').datetimepicker({
format: 'dd M yyyy',
minView: 2,
autoclose: 1,
})
});
}
To clear the input fields down I have :
function clearActionForm(){
// code here to clear the various input fields to null or their initial values.
// Need statements to clear the datetimepicker field to null.
}
So, can someone give me the line(s) of code I need to insert into clearActionForm() in order to clear the START_DATE field to null.
Thanks.
If you are using the eonasdan datetimepicker use the following:
// clears
$("#form_date").data("DateTimePicker").date(null);
// updates with date
$("#form_date").data("DateTimePicker").date(new Date());
// or update with string
var myCoolDate = "27 05 1975";
$("#form_date").data("DateTimePicker").date(myCoolDate);
// or update with a moment
var moment = moment().add(2, 'd');
$("#form_date").data("DateTimePicker").date(moment);
Below is a demo of using different types of changes.
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'dd M YYYY',
});
});
$('#clear').click(function() {
$("#datetimepicker1").data("DateTimePicker").date(null);
})
$('#date').click(function() {
var sysdate = new Date();
$("#datetimepicker1").data("DateTimePicker").date(new Date());
})
$('#string').click(function() {
var myCoolDate = "27 05 1975";
$("#datetimepicker1").data("DateTimePicker").date(myCoolDate);
})
$('#moment').click(function() {
var now = moment().add(2, 'd');
$("#datetimepicker1").data("DateTimePicker").date(now);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<input type='button' id='clear' Value='Clear Date'>
<input type='button' id='date' Value='Set with date'>
<input type='button' id='string' Value='Set with string'>
<input type='button' id='moment' Value='Set with moment'>
use this line $('.form_date').data("DateTimePicker").clear()
Demo
Easy way to rest the selected date as well as highlighted date by below concept
$('#txtWQApprovalDate').datepicker('setDate', null).datepicker('fill');
Assuming that you are using the datetimepicker plugin from xdsoft.net/jqplugins/datetimepicker, one quick way to clear the datetimepicker's current value would be the following:
$('.form_date').val('');
As an alternative (this sets the value of the datetimepicker to the current time):
$('.form_date').datetimepicker({
value: (new Date()).toLocaleString()
});
This value does not not match the format of the datetimepicker, but will be converted to the correct format automatically when the datetimepicker is used.
If you are using the eonasdan datetimepicker use the following:
// clears
$j(".form_date").data("DateTimePicker").setDate(null);
// updates to now
$j(".form_date").data("DateTimePicker").setDate(new Date());
// or update to a given date
var myCoolDate = "05/27/1975";
$j(".form_date").data("DateTimePicker").setDate(myCoolDate);
I am trying to do some simple calculations, I need to take a date and add x-months to that date. After searching, I decided to use DateJS to account for edge dates.
I set up a form that allows the user to enter the date and amount of months. On a keyup function, it calculates the new date. The issue is it's not calculating correctly.
I can pass the date from the form to the JS and manually specify the months in JS and it calculates correctly. If I pass both the date and months from the form the calculation is off by a lot. Years in fact!
If I replace $("#monthincrease").val() with a hard coded number the calculation works fine. But not when using data from the form.
<div class="container">
<div class="jumbotron">
<h1>Future Date Calculator</h1>
<p>To calculate a future date, enter a start date and the amount of months to add.</p>
</div>
<div class="row">
<div class="col-lg-12">
<form class="form-inline" role="form">
<div class="form-group">
<label for="startdate">Start Date:</label>
<input type="date" class="form-control" id="startdate">
</div>
<div class="form-group">
<label for="monthincrease"> And Months To Add:</label>
<input type="number" class="form-control" id="monthincrease">
</div>
</form>
<p>Date: <span class="futuredate"></span></p>
<p>Month: <span class="month"></span></p>
</div>
</div>
<script type="text/javascript">
$("#monthincrease").on('keyup',function() {
var newDate = Date.parse( $("#startdate").val() ).addMonths( $("#monthincrease").val() );
$(".futuredate").html(newDate);
$(".month").html( $("#monthincrease").val() );
});
</script>
This is my updated code.
<div class="container">
<div class="jumbotron">
<h1>Future Date Calculator</h1>
<p>To calculate a future date, enter a start date and the amount of months to add.</p>
</div>
<div class="row">
<div class="col-lg-12">
<form class="form-inline" role="form">
<div class="form-group">
<label for="startdate">Start Date:</label>
<input type="date" class="form-control" id="startdate">
</div>
<div class="form-group">
<label for="monthincrease"> And Months To Add:</label>
<input type="number" class="form-control" id="monthincrease">
</div>
</form>
<p>Date: <span class="futuredate"></span></p>
</div>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$("#monthincrease").on('keyup',function() {
var incMonths = $("#monthincrease").val();
var startDate = $("#startdate").val();
var newDate = new Date.parseExact( startDate, "yyyy-MM-dd" ).addMonths( incMonths );
$(".futuredate").html(newDate);
console.log(incMonths);
console.log(startDate);
console.log(newDate);
});
});
</script>
</div>
I change the var to var incMonths = Number( $("#monthincrease").val() ); which converted the form input into a number. Works now.
Try putting in your event code in document.ready block. Also for correct calculation use parseExact method of DateJS library and specify the format in which date will be entered in textbox. https://code.google.com/p/datejs/wiki/APIDocumentation
Updated:
$( document ).ready(function() {
$("#monthincrease").on('keyup',function() {
var incMonths = $("#monthincrease").val();
var startDate = $("#startdate").val();
var newDate = new Date.parseExact( startDate, "M/d/yyyy" ).addMonths( parseInt(incMonths ));
$(".futuredate").html(newDate);
});
});
I corrected the date format and used parseInt for months field. Try it now.