I am facing problem on this. The value on the textbox can't make an array. It read as string when i check in console. Im trying to check the length of it but it reads in string. It was a multiDatepicker. It seems not correct. Kindly see where did i missed?
$('#datetimepicker1').datepicker({
multidate: true
});
var arrDate = [];
arrDate.push(document.getElementById("txt_date").value);
console.log(arrDate.length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<font color="black">Dates: </font>
</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" name='txt_date' id='txt_date'/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
You can use their own API method getDates. See the documentation here
getDates
Arguments: None
Returns a list of localized date objects representing the internal
date objects of the first datepicker in the selection. For use with
multidate pickers.
Use it like this
console.log($('#datetimepicker1').datepicker('getDates'));
Here is a working example
Related
Currently, my issue is that the calendar isn't showing (tells me the datetimepicker function isn't properly initialized on the controls).
Note that the implementation shown here is based on a different implementation elsewhere on the site which does work.
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/Scripts/moment.min.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.min.js"></script>
I've stripped out all the scripts like datatables and knockout as I believe they're superfluous and the list of scripts used is quite extensive.
Full [redacted to remove client information] markup for the page can be found here.
The form is simple, just inputs with .datetimepicker class on them:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-5">Start Date</label>
<div class="col-sm-7 input-group">
<input type="text" class="form-control datetimepicker" id="StartDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar "></span>
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5">End Date</label>
<div class="col-sm-7 input-group">
<input type="text" class="form-control datetimepicker" id="EndDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar "></span>
</span>
</div>
</div>
</div>
</div>
Right now when I click on either of these inputs they just give me autocomplete options for values which I've entered in the past.
Used to be with things like this you'd initialize the javascript with something like this at the bottom of the page:
$(document).ready(function () {
$("#StartDate").datetimepicker();
$("#EndDate").datetimepicker();
});
This, however, doesn't appear to be necessary in this case as the page on which these datetimepickers work doesn't do it.
If I do initialize the controls this way, the calendar shows, but whether I use the locale option or the format option as indicated in this SO Answer, it never gives the dates the correct format that I need which is yyyy/mm/dd.
Ideally, I want to be able to see the calendar pop-out and have it display dates on the input with the correct format. If anyone can indicate possibly what I'm doing wrong I'd greatly appreciate it.
Here's a fiddle: https://jsfiddle.net/h3809a7r/
I just imported these libraries and its working now
Javascript:
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js
CSS
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css
JsFiddle Link with your code
Can you please try this
$("#StartDate").datetimepicker({
format: 'YYYY-MM-DD HH:mm',
showClose: true,
showClear: true
});
I am trying to get the date from the user using date picker in django. But I am just getting none despite user picking up a date . I followed this tutorial https://simpleisbetterthancomplex.com/tutorial/2019/01/03/how-to-use-date-picker-with-django.html
I am trying to get the date using the cleaned.data.
date = form.cleaned_data['date']
How do I get the date user selects. Also, I want the hour and minute field in date picker
This is my date field in the form (I am using forms.form)
class DateForm(forms.Form):
date = forms.DateTimeField(
input_formats=['%d/%m/%Y %H:%M'],
widget=forms.DateTimeInput(attrs={
'class': 'form-control datetimepicker-input',
'data-target': '#datetimepicker1'
})
)
Here is the code in my HTML file
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
<script>
$(function () {
$("#datetimepicker1").datetimepicker();
});
</script>
You have manually added the <input> to the HTML, but missed the important name parameter. Without this, the field value isn't included in the POST and the server never sees it.
Add name="date" and it should work ok.
The tutorial used {{ form.date }} for a reason - to make it harder to screw it up.
This is my code
<tr ng-show="option == 'Yearly' || option == 'Date'">
<td>
<label>From:</label>
</td>
<td>
<input type="date" ng-model="fromdate" id="fromdate" date-picker />
</td>
<td>
<label>To:</label>
</td>
<td>
<input type="date" ng-model="todate" date-picker />
</td>
</tr>
I have a jquery date picker for fromdate and todate, I need to disable all the dates in the end date which is lesser than the from date.....
I have used https://github.com/Eonasdan/bootstrap-datetimepicker
previously and minDate and maxDate options can probably be helpful for your use case, if you want to look at another plugin.
Sample usage to set maxDate, minDate:
html:
<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>
js:
$('#datetimepicker1').datetimepicker({
maxDate: new Date("6/8/2016"),
minDate: new Date("6/2/2016")
});
Working Plunker
Note: This plugin has dependency on bootstrap, jquery, and momentjs
Edit:
There is also a angular wrapper directive over this: https://github.com/diosney/angular-bootstrap-datetimepicker-directive
If you are just wanting to set a specific min date like todays date you can put that in as a setting.
https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
If you have an easy way of setting your min date to be todays day you can just use a variable as such min="{{minDate | date:'yyyy-MM-dd'}}"). Note that min will also add native HTML5 constraint validation.
In theory this doesn't require a controller but just a app setup config for $scope.minDate, all that is going to do is note that your date is not correct next to the field with whatever validation you have set, field and form validation is a whole different animal then what you are asking but I would read https://docs.angularjs.org/guide/forms on it.
In the long run I wouldn't use jquery date picker and use a native directive like https://angular-ui.github.io/bootstrap/ Date picker or Angular Material https://material.angularjs.org/latest/demo/datepicker
I have written a code stuff using bootstrap-datetimepicker which has two datetime picker start and end. Code is working fine but I don't know how to show validation to the date time textfield. say for example in the datetime picker textfield when I enter some invalid date, it should validate and show invalid date. How can we achieve that.
Can anyone please help me on this
My code is as given below
JSFiddle
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Check out the docs regarding options: http://eonasdan.github.io/bootstrap-datetimepicker/Options/
I've never used this plugin but it looks like passing some of these in would allow you to set validation parameters and not have to write too much more code.
Things like:
format (using moment.js notations)
minDate & maxDate
disabledDates
and looks like useStrict might also be helpful depending on what your requirements are.
Yo. validate.js is very easy to implement. It's also very easy to customize.
Simple demo here.
$(document).ready(function(){
$("#form").validate();
});
Read more about Validate.js
I'm working with angular material design. (https://material.angularjs.org/#/) I have the following piece of code:
<md-input-container padding>
<label>Some date</label>
<input ng-model="searchQuery.SomeDate" type="date" name="invoiceDate" />
</md-input-container>
This gives me a very nice text-box with a datepicker. The user is able to type the date manually or pick a date from the datepicker. Problem is that based on the ui culture the user must type in either dd-MM-yyyy format or MM-dd-yyyy format.
I do not want this. I want to force the dd-MM-yyyy format. But I don't know how to. Do you?
Thanks in advance!
If you include a script from i18n, you can directly set your date param to your country's convention.
This is the list of files : https://code.angularjs.org/1.0.8/i18n/
Then a simple include will work :
<script src="http://code.angularjs.org/1.0.8/i18n/angular-locale_XXXX.js"></script>
You want something like this:
User sees dd/MM/yyyy, but in program it is a date?
I use it like this:
<span class="input-group">
<input type="text" datepicker-popup="dd/MM/yyyy" is-open="opened" close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</span>
and data sent into model is formated after dd/MM/yyyy