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
Related
I am using Flatpickr for my date picker. however, when i select today's date, i want the result to be displayed as "Today".
jQuery(".datepicker").flatpickr({
wrap: true,
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
defaultDate: "today",
instance.set('defaultDate', 'today');
});
this is what i have tried so far. the part instance.set isn't working for me. maybe i did something wrong.
Below is the snippet of the current working code. all i need is the current displayed date to be "Today" not the date itself.
jQuery(function() {
initDatePicker();
});
function initDatePicker() {
jQuery(".datepicker").flatpickr({
wrap: true,
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
defaultDate: "today"
});
}
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
</script>
<div class="input-group datepicker">
<input type="text" class="form-control" data-input aria-describedby="date1">
<div class="input-group-append">
<button class="btn btn-secondary" type="button" id="date1" title="toggle" data-toggle><i class="icon-angle-down-4 mr-0"></i></button>
</div>
</div>
#Lucian, i've found solution in handling onValueUpdate and onReady (for initial check, because defaultDate can be today, as in your case) events and updating value of private field _input.value.
Although, i didn't find any way to set "Today" word in the field without breaking incapsulation - because this word cannot be parsed to Date object and throws error.
My code for you is here. Hope this helps!
I have a scenario where I use Bootstrap Datetimepicker to select time, but when I manually type the time, even in correct format, it changes to 12:00 AM on date picker close
Here is my datetimepicker:
$('#ShiftStart').datetimepicker({
minDate: actualDate,
maxDate: maxDate,
useCurrent: false,
format: 'hh:mm A',
defaultDate:moment(startTime),
stepping: 15
});
$('#ShiftEnd').datetimepicker({
minDate: actualDate,
maxDate: maxDate,
format: 'hh:mm A',
defaultDate:moment(startTime),
stepping: 15
});
Even if I bind an onfocusout event to set the value of the datetimepicker it doesn't change when the picker closed.
$("#ShiftStart").focusout(function (e) {
//here it is defaulted again to 12:00 AM
var time = $('#' + e.target.id).val();
$('#' + e.target.id).attr('data-time', actualDate + ' ' + time);
$('#' + e.target.id).attr('value', actualDate + ' ' + time);
$('#' + e.target.id).val(time)
});
Any work around on this.
var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
var startTime = $('#StartTime').val();
$('#ShiftStart')
.datetimepicker({
minDate: actualDate,
maxDate: maxDate,
useCurrent: false,
format: 'hh:mm A',
defaultDate: moment("12/27/2017"),
stepping: 15
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment#2.19.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input id="StartTime" type="hidden" value="12/27/2017 8:00:00 AM">
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
id="ShiftStart" name="ShiftStart" style="max-width : none; border : 1px solid #cccccc;" type="text" value="12/27/2017 12:00 AM" data-time="12/27/2017 12:00 AM" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">
The datetimepicker defaults back to 12:00 AM even if you select the value from the picker (not only manually type), I think this is a bug of the the lastest versions of the component.
Anyway, there are a couple of things to fix in your code. As the date([newDate]) states :
Takes string, Date, moment, null parameter and sets the components model current moment to it. [...]
Parsing of the newDate parameter is made using moment library with the options.format and options.useStrict components configuration.
So minDate, maxDate and defaultDate are strings parsed using format option (hh:mm A in your case) and this will produce wrong values, use moment(String, String) instead (e.g. defaultDate: moment("12/27/2017", 'MM/DD/YYYY')).
Even the value property in the HTML is parsed using format, 12/27/2017 12:00 AM does not match hh:mm A so I've removed it in my snippet.
Here a working example using version 4.17.37 of the datetimepicker:
var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
var startTime = $('#StartTime').val();
$('#ShiftStart')
.datetimepicker({
minDate: moment(actualDate, 'MM/DD/YYYY'),
maxDate: moment(maxDate, 'MM/DD/YYYY'),
useCurrent: false,
format: 'hh:mm A',
defaultDate: moment("12/27/2017", 'MM/DD/YYYY'),
stepping: 15
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input id="StartTime" type="hidden" value="12/27/2017 8:00:00 AM">
<div class="row">
<div class='col-sm-6'>
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
id="ShiftStart" name="ShiftStart" style="max-width : none; border : 1px solid #cccccc;" type="text" data-time="12/27/2017 12:00 AM" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">
</div>
</div>
Side thoughts:
Since you are using hh:mm A format, you can probably just manage time and get rid of minDate and maxDate (in your example you are limiting to a single given day)
If you want to do something when the components hides use dp.hide event.
I think this is happening because minDate is reseting the field value to the current date at midnight (probably the default time), and similarly maxdate probably also sets it to midnight by default.
Remove minDate: actualDate and maxDate: maxDate from the initialisation:
<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
id="ShiftStart" name="ShiftStart" style="max-width : none; border : 1px solid #cccccc;" type="text" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">
<script>
var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
$('#ShiftStart').datetimepicker({
useCurrent: false,
format: 'hh:mm A',
});
</script>
In reply to your comment, you can pass in the maxDate parameter like this:
maxDate: new Date('2017', '12', '27', '03', '30', '00', '00')
Which i guess you will need to build from the maxDate string. Note that to get this working I had to remove the defaultDate parameter from the snippet in your question.
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 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.
I have a datepicker from the internet on my system and I want to restrict a user choice so they are only allowed to pick from today on wards. Below shows my javascript and the HTML form the datepicker is held in is held in.
I tried using minDate : '0' as well as the one that is in the function now.
Any help appreciated.
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy', minDate: +0 });
});
</script>
<div class="form-group">
<label class="col-sm-2 control-label">Start Date:</label>
<div class="col-sm-10">
<input class="form-control" type="date" id="datepicker" name="start_date" required="required">
</div>
</div>
<input type="date" min="2000-01-02">
date input type has an min and max attribute to restrict the date selection.
Here you can get today's date in JavaScript and set that value to your date input type. I just gave an example in above code snippet.
Try this:
var datePicker = $('#datepicker').datepicker({
beforeShowDay: function (date) {
return date.valueOf() >= now.valueOf();
}
});
Please try something like this,
$('#datepicker').datepicker({
dateFormat: 'dd/mm/yy',
minDate: 0
});
demo in jsfiddle