I am using this repo by smalot and I want to select and show date only (for some other places I am showing data and time, therefore selecting this repo). I can manage to use it for selecting date only but the generated date string is always yyyy-mm-dd hh:ii. And if I did not understand wrongly the format option is for parsing the initial date only but not setting dates.
<div class="input-group date datetime dateonly" data-start-view="2" data-min-view="2" style="margin-bottom: 0;">
<input class="form-control" size="16" type="text" placeholder="Release Date" id="release-date" name="release_date" value="{{ unit.release_dt|date:'Y-m-d' }}" style="cursor: default; background-color: #ffffff;">
<span class="input-group-addon btn btn-primary"><span class="glyphicon glyphicon-th"></span></span>
</div>
I am setting startView and minView to be both 2 so that the user will need to select date only but I still got 2015-09-22 00:00 as the output-- I just want it to show 2015-09-22.
In fact, by listening to changeDate and hide events, I can just set the value of date inputs. I am wondering if there is a less hacky and dirty way of doing it
$('.datetimepicker').on('changeDate', function(e) {//get substring and set date input
}).on('hide'....//same thing
);
Use date picker
$("#calender").datepicker({
format: "mm/dd/yyyy"
});
To show date only use
format: 'L'
To show Time only use
format: 'LT'
Reference
https://github.com/Eonasdan/bootstrap-datetimepicker/issues/832
you will edit datetaimepicker.js
var defaults = $.fn.datepicker.defaults = {
autoclose: false,
beforeShowDay: $.noop,
calendarWeeks: false,
clearBtn: false,
daysOfWeekDisabled: [],
endDate: Infinity,
forceParse: true,
//format: 'mm/dd/yyyy', 时间输出格式
format: 'yyyy-mm-dd',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0
};
like this
//format: 'mm/dd/yyyy', 时间输出格式
format: 'yyyy-mm-dd'
wish can help you!
Try this -
HTML:
<div class="controls input-append date m" data-date="" data-date-format="yyyy-mm-dd" data-link-field="m1" data-link-format="yyyy-mm-dd" data-start-view="2" data-min-view="2">
<input size="16" id="m" type="text" value="" readonly>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="hidden" id="m1" value="" />
JS:
$('.m').on('changeDate', function(e) {
console.log($("#m").val());
});
Console:
2015-12-08
Hope it will help.
Related
I am using bootstrap datepicker to change start/end date in google web app
my current working datepiker
Here's my working code
<div class="form-group col-sm-2">
<label for="WO_ID" >WO ID</label>
<select type="number" class="form-control select2" id="WO_ID" name="WO_ID" required>
<option>1</option>
<option>2</option>
<option>OH</option>
</select>
</div>
<div class="form-group col-sm-5">
<label for="Progress_Date">Progress Date</label>
<input type="text" class="form-control datepicker" id="Progress_Date" name="Progress_Date" placeholder="yyyy-mm-dd" required>
</div>
<script type="text/javascript">
$('.datepicker').datepicker({
format: 'yyyy-mm-dd',
todayHighlight: true,
autoclose: true,
startDate: '-5d',
endDate: '0d'
});
</script>
I need to change date picker start/end date according to a dropdown("WO_ID") in my web app,
as an example - when dropdown select "OH" i want date range according to following script
<script type="text/javascript">
$('.datepicker').datepicker({
format: 'yyyy-mm-dd',
todayHighlight: true,
autoclose: true,
startDate: '-1m',
endDate: '0d'
});
</script>
when dropdown select any other instead "OH" i want date range according to following script
<script type="text/javascript">
$('.datepicker').datepicker({
format: 'yyyy-mm-dd',
todayHighlight: true,
autoclose: true,
startDate: '-5d',
endDate: '0d'
});
</script>
I hope youll understand my requirement..
here is link to my google app script (Refer "Form.html")
My View:
<input type="text" class="datepicker" placeholder="DD/MM/YYYY" id="datepicker" ng-model="datepicker" name="datepicker" style="width:100%" tabindex="4" required/>`
Controller:
`$('#datepicker').datepicker({
format: 'mm-dd-yyyy',
endDate: '+0d',
autoclose: true
});
it's showing TypeError: $(...).datepicker is not a function
I want to disable all the future dates after today
Trying to implement.
as others have mentioned you might have not included it in your page...and as far as logic concerned for disabling dates after today:
You can assign today to maxDate option of datepicker,
this is what jquery datepicker api docs have about maxDate option
The maximum selectable date. When set to null, there is no maximum.
$(function(){
$('#thedate').datepicker({
dateFormat: 'dd-mm-yy',
maxDate: new Date()
});
});
Here is the fiddle hope your issue is resolved now
Use maxDate instead of endDate
<input type="text" class="datepicker" placeholder="DD/MM/YYYY" id="datepicker" ng-model="datepicker" name="datepicker" style="width:100%" tabindex="4" required/>`
$('#datepicker').datepicker({
format: 'mm-dd-yyyy',
maxDate: new Date(),
autoclose: true
});
Fiddle
data-plugin-datepicker data-plugin-options='{"autoclose": true, , "endDate": "0d", "format": "dd-mm-yyyy"}'
try this in html
I have two basic bootstrap datepicker calendars on my page. I am trying to understand how I can use changeDate event to set the date of calendar no.2 according to the date I select on calendar no.1. I'd like to set a date three months ahead of the first calendar's month.
Here is the HTML of the calendar:
<div class="profile-info-row">
<div class="profile-info-name"> Date of Birth *</div>
<div class="profile-info-value">
<div id="sandbox-container">
<span class="input-icon input-icon-right">
<input type="text" type="text" name="dob" id="dob" class="form-control">
<i class="ace-icon fa fa-calendar blue"></i>
</span>
</div>
</div>
</div>
Here is the script of calendar:
<script type="text/javascript">
//datepicker plugin
$('#sandbox-container input').datepicker({
format: "dd-mm-yyyy",
todayBtn: "linked",
todayHighlight: true,
weekStart: 1,
autoclose: true
});
EDIT: This question is about the BOOTSTRAP datepicker, not the JQUERY one. I think it's a common misconception in most questions
//datepicker plugin
$('#sandbox-container input').datepicker({
format: "dd-mm-yyyy",
todayBtn: "linked",
todayHighlight: true,
weekStart: 1,
autoclose: true
}).on('changeDate', function(e) {
// `e` here contains the extra attributes
var newDate = new Date(e.date.setMonth(e.date.getMonth()+3));
$('#second-sandbox-container input').datepicker('setDate', newDate);
});
http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate
http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#setdate
I'm new to the scripting languages, I need help to resolve this issue. The bootstrap date picker resets the field when I choose the same date by using the date picker icon.
$('#from_date .input-daterange').datepicker({
keyboardNavigation: false,
format: "dd-M-yyyy",
endDate: '+0d',
clearBtn: true,
forceParse: false,
autoclose: true,
});
My HTML line of code is as follows:
<input type="text" style="margin-left: -5px; width: 99px;" class="form-control" id="fromdate"
name="quote-issue-date-start" placeholder="From date" data-bind="value:fromDate" />
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
The textbox gets cleared when I again choose the date from the datepicker.
Many things look wrong:
You try to select an element which does not exist: $('#from_date - the id in your markup is fromdate (withouth the underscore)
In your selector $('#from_date .input-daterange') you try to select .input-daterange inside #from_date - if #from_date is an <input> element it cant have children, so the selector should be $('#from_date.input-daterange') (if the input would actually have that class)
You have a syntax error:
autoclose: true, });
The , is false here.
I'm having a slight issue with Bootstrap's DateTimePicker. The issue I'm having is when the picker is first loaded it appears to be getting the value from a hidden input element instead of the value from the input box that it is attached to.
Here is the code I currently have:
$('.the_date').datetimepicker({
format: 'd MM yyyy',
linkFormat: 'yyyy-mm-ddThh:ii:ssZ',
weekStart: 1,
language: 'en',
todayBtn: 0,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
pickerPosition: "bottom-left"
});
<div class="item-date the_date date" data-date-startdate="22/08/14" data-link-field="OrderItem_0_preferredDate">
<input type="text" class="datepicker form-control" placeholder="Date" data-link-field="OrderItem_0_preferredDate" value="22/08/14">
<input name="OrderItem[0][preferredDate]" id="OrderItem_0_preferredDate" type="hidden" value="2014-08-21T22:00:00Z">
</div>
The value that is being shown by default in the picker is 21 August 2014 (21/08/14) which is incorrect.
I want the startdate to be the value from the "data-date-startdate" attribute.
Any ideas?
Thanks
You can try :
<div id="start-date" class="item-date the_date date" data-date-startdate="22/08/14" data-link-field="OrderItem_0_preferredDate">
<input type="text" class="datepicker form-control" placeholder="Date" data-link-field="OrderItem_0_preferredDate" value="22/08/14">
<input name="OrderItem[0][preferredDate]" id="OrderItem_0_preferredDate" type="hidden" value="2014-08-21T22:00:00Z">
</div>
$('.the_date').datetimepicker({
...
defaultDate:$('#start-date').attr('data-date-startdate')
});
Jsut try this:
$(.the_date').datetimepicker({
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0,
showMeridian: 1,
startDate: '2018-9-7 '12:00:00',
});