I am using this date picker http://bootstrap-datepicker.readthedocs.io/en/latest/events.html#hide.
The code is written as,
<div class="form-group" id="purchasedatediv">
<label class="col-sm-3 control-label">Purchase Date *</label>
<div class="col-sm-9">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="text" value="<?php if($result != '') echo date('m/d/Y', $result->purchasedate->sec); ?>"
name="purchasedate" id="purchasedate" class="form-control required">
</div>
</div>
</div>
$('#purchasedatediv .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: formatToApply
});
I am trying to find the event when the date is selected and do something on that event but in this document, I am not able to find that. Please help!
Please Try
$('#datepicker').datepicker().on("change", function(e) {
console.log("Date changed: ", e.target.value);
});
Since you are using bootstrap plugin for datepicker, you can check reference manual for it.
Trigger to changeDate event event like
$('#purchasedatediv .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: formatToApply
}).on('changeDate', function(e) {
//Print e variable
console.log('date changed', e);
//Do your stuff here, read date, parse it, whatever.
});
Date is stored in callback parameter e.date.
$('#purchasedatediv .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: formatToApply
}). on(picker_event, function(e){
//do your stuf
}) ;
this code will hold everything you need
Try to below code
<input type="text" value=""
name="purchasedate" id="purchasedate" class="form-control required" onChange="functionname(this)">
JS Code
function functionname(e){
your logic
}
Click Here to show demo in jsFiddle
$('#purchasedate').off('change').on('change', function(){
// enter code here
})
Related
Hello Everyone I'm beginner in Jquery and javascript.In my project I have to use bootstrap.I have tried to execute datepicker to hide past datesDate picker is working even though past dates are not hiding..I have attached the below the code..
<!--html:-->
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="FromDate" class="control-label">FromDate:</label>
</div>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="fromDate" id="fromDate" class="form-control pull-right" data-validation-engine="validate[required]" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="ToDate">ToDate:</label>
</div>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon"> <i class="fa fa-calendar"></i>
</div>
<input type="text" name="toDate" id="toDate" class="form-control pull-right" data-validation-engine="validate[required]"
onchange="report();" />
</div>
</div>
</div>
<!--script:-->
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
// Date picker
$('#fromDate').datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd-M-yyyy'
});
$('#toDate').datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd-M-yyyy'
});
$('#fromDate').datepicker({ minDate: new Date() });
$('#toDate').datepicker({ minDate: new Date() });
/*]]>*/
</script>
Thanks!!
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
Try the above piece of code
I replicated your code and it is working fine.
Can be more clear on the versions and packages you use.
For Datepicker which package you use. I used jquery ui
For bootstrap you have used v3 (which is not a consideration here), but the latest version is 4
http://jsfiddle.net/0oL2yh6r/1/
jQuery(document).ready(function(){
$( "#fromDate" ).datepicker({
minDate: new Date(),
autoclose : true,
todayHighlight : true,
format : 'dd-M-yyyy'
});
});
The start date can not be later than the end date. This is working.
But, when the end date is first selected, the start date can be selected to a later date. I don't want this.
How can I control this?
We use asp.Net / Webform.
I could not paste the c # code here correctly. Snipped is not working properly because of this.
$('#<%=dtEduStart.ClientID%>').datetimepicker({
format: 'dd.M.yyyy',
weekStart: 1,
todayBtn: 0,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
todayBtn: 1,
endDate: '+0d',
}).on('changeDate', function(selected) {
var minDate = new Date(selected.date.valueOf());
$('#<%=dtEduFinish.ClientID%>').datetimepicker('setStartDate', minDate);
});
$('#<%=dtEduFinish.ClientID%>').datetimepicker({
format: 'dd.M.yyyy',
weekStart: 1,
todayBtn: 0,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
todayBtn: 1,
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<label>Starting Date<span class="red bolder">*</span></label>
<div id='divEduStart' runat="server">
<div class="input-group date form_date">
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
<input id="dtEduStart" runat="server" type="text" class="form-control dtpStart" data-placeholder="Starting Date" readonly /></div>
<span id="spnEduStart" runat="server"></span></div>
</div>
<div class="form-group col-md-6">
<label>Graduation Date<span class="red bolder">*</span></label>
<div id="divEduFinish" runat="server">
<div class="input-group date form_date">
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
<input id="dtEduFinish" runat="server" type="text" data-placeholder="Graduation Date" class="form-control dtpEnd" readonly /></div>
</div>
<span id="spnEduFinish" runat="server"></span>
</div>
From your code example I don't see any handling for the event change of the second datapicker, you need to handle that event too for your purpose.
I raccomand you to use the jQuery event "dp.change" for the datapicker, like this:
$('#dtEduStart').on('dp.change', function(e) {
$('#dtEduFinish').data("DateTimePicker").minDate(e.date);
});
$('#dtEduFinish').on('dp.change', function(ev) {
$('#dtEduStart').data("DateTimePicker").maxDate(ev.date);
});
I've made an example on jsFiddle to clarify.
In the code below, StartTime is 05/29/2017 1:00:00 PM.
But I want StartTime to be 1:00:00 PM.
HTML
<div class="form-group">
<label>From</label>
<input class="form-control " id="StartTime" type="text" name="StartTime"/>
</div>
JS
$('#StartTime').datetimepicker({
format: 'LT'
});
this is how you can disable date
$(function () {
$('#StartTime').datetimepicker({
format: 'LT',
});
});
try this:
$("#StartTime").datetimepicker({
format: 'hh:ii',
startView: 1,
pickDate: false,
autoclose: true
}).on("show", function(){
$(".table-condensed .prev").css('visibility', 'hidden');
$(".table-condensed .switch").text("Pick Time");
$(".table-condensed .next").css('visibility', 'hidden');
});
I want my datetimepicker to have a default value which is the current date. How can I achieve this? I already read the documentation but can't find anything to achieve that. Can someone help me? I want the format of the default value is MM dd, yyyy.
Here's my code.
<div class="form-group">
<label for="dtp_input2">Date</label>
<div class="input-group date form_date col-md-3" data-date="" data-date-format="MM dd, yyyy">
<input id="dtp_input2" name="date" class="form-control" size="10" type="text" value="" readonly>
<span class="input-group-addon">
<span class="glyphicon glyphicon-remove"></span>
</span>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
$('.form_date').datetimepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
});
In my case :
Insert this defaultDate: new Date() code into your javascript datetimepicker.
<script type="text/javascript">
$(function () {
$('#datetimepicker10').datetimepicker({
defaultDate: new Date(),
viewMode: 'years',
format: 'MM/DD/YYYY'
});
});
Just set the value after setting up the datetimepicker:
$('.form_date').datetimepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
});
$('#dtp_input2').val(Date());
Looks like from the documentation that you can set a defaultDate when instantiating the datetimepicker.
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
This solution only uses the methods provided by the bootstrap datetimepicker.
You can declare your datetimepicker as you did and then do this:
$('#datepicker input').datepicker('setDate', new Date());
$('#datepicker input').datepicker('update');
$('#datepicker input').val('');
This way the date you set in the setDate() will be selectionned and the input will remain empty.
If you don't want the input to be empty, just remove these lines:
$('#datepicker input').datepicker('update');
$('#datepicker input').val('');
And if you want to play with that solution: Here is a jsFiddle
$('#datepicker input').datepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
});
$('#datepicker input').datepicker('setDate', new Date());
$('#datepicker input').datepicker('update');
$('#datepicker input').val('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<div id="datepicker">
<input type="text" type="text" class="form-control" />
</div>
You can also set current Date to a text field with JS like :
var d = new Date();
document.getElementById("target").value = d.toDateString();
<input type="text" id="target">
Simply put the following one. It works fine for me.
$('.className').datepicker('setDate', 'now');
I'm trying to update the value of a datepicker for bootstrap when clicking a div, however it just does nothing (no errors). The datepicker itself works perfectly fine. Here's the javascript with the options:
$('#datepicker').datetimepicker({
format: 'DD-MM-YYYY',
pickTime: false,
defaultDate: moment(),
minDate: moment(),
maxDate: moment().add(10,'y'),
showClose: true,
autoclose: true,
keepOpen: false,
});
The javascript I am trying to change the date with:
$('.someDiv').click(function() {
$("#datepicker").datetimepicker('setDate', '2016-03-05');
});
And finally the HTML:
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" id="date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Docs can be found under following link, however the provided method doesn't work: https://bootstrap-datepicker.readthedocs.org/en/latest/
$(function () {
$('#datepicker').datetimepicker({
pickTime: false,
format: 'DD-MM-YYYY',
pickTime: false,
defaultDate: moment(),
minDate: moment(),
maxDate: moment().add(10,'y'),
showClose: true,
autoclose: true,
keepOpen: false
});
$('.date-setter').click(function() {
alert('jj');
$('#datepicker').data("DateTimePicker").setDate('03-05-2016');
});
});
Answer to the current version
$('#deadline_picker').data("DateTimePicker").date(deadline);