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');
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.
I have a 2 fields, symbol and date, if symbol is select after datepicker is enable, without select symbol datepicker is disable.
<script src="{{asset('js/libs/jquery.js')}}" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link href="{{asset('css/bootstrap-datetimepicker.min.css')}}" rel="stylesheet" media="screen">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div class="form-group col-sm-10">
{!! Form::label('symbol', 'Symbals:') !!}
{!! Form::select('symbol_id', [''=>'Choose market'] , null, ['class'=>'form-control', 'id'=>'symbol'])!!}
</div>
<div class="form-group col-lg-5">
{!! Form::label('tradedate', 'Traded date:') !!}
<div class=" input-append date form_datetime" data-date="{{date('Y-m-d H:i:s')}}" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<input size="16" type="text" value="" readonly class="form-control">
<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="dtp_input1" value="" name="tradedate" />
</div>
This script is use datepicker, i use in form of date, time and select month, datepicker javascript available below:
This javascript use timepicker,
<script type="text/javascript">
$('.form_datetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
$('.form_date').datetimepicker({
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
$('.form_time').datetimepicker({
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
</script>
// use jquery
// event is fired when select change
$('#symbol').on('change', function() {
// this.value - to retrieve the value of selected option
// do whatever you want. Give 'id' to your datepicker and you can use 'addClass' to disable datepicker depends on plugin you use
// for example
if (this.value == 0) {
$('#datepicker').attr('disabled',true);
} else {
$('#datepicker').attr('disabled',false);
}
});
UPDATE
Here I created jsfiddle for you. Look at it. I think you want something like that. jsfiddle
I am trying to set start date to 14 days from today. Below 14 days date will not be selectable. I also need to lock the next 13 days as not selectable.
$('#sandbox-container input').datepicker({
format: 'mm/dd/yyyy',
keyboardNavigation: false,
forceParse: false,
startDate: new Date(),
autoclose: true
})
<input type="text" name="productDate" id="productDate" class="form-control" maxlength="20" placeholder="Date" value="{{ date('m/d/Y',strtotime($productDate))}}">
var newdate = new Date();
newdate.setDate(newdate.getDate() - 14);
$('input').datepicker({
format: 'mm/dd/yyyy',
keyboardNavigation: false,
forceParse: false,
minDate: newdate,
startDate: newdate,
autoclose: true
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.5.4/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.5.4/datepicker.min.css" rel="stylesheet"/>
<input type="text" name="productDate" id="productDate" class="form-control" maxlength="20" placeholder="Date" value="">
In am using a calendar in bootsrtap datepicker, in that I have displaying only month and year (mm-yyy). I want to disable future months from current month. I have searched a lot but I didn't find an answer. Please help me, I have attached my code below
JS :
$(document).ready(function () {
var cou = $('#rolecount').val();
var c;
for (c = 0; c <=cou; c++){
$('#datepicker'+c).datepicker({
format: 'mm-yyyy',
endDate: '+0d',
viewMode: "months",
minViewMode: "months",
});
$('#datepicker'+c).datepicker().on('monthSelected', function(ev){
$(this).datepicker('hide');
});
}
});
HTML:
<div class="input-group date">
<input type="text" id="datepicker<?=$j?>" required name="joindate<?=$j?>" class="date_picker form-control" placeholder="show datepicker" maxlength="100" autocomplete="off"><span class="input-group-addon" id="basic-addon2"><i class="fa fa-calendar"></i></span>
<input type="hidden" name="roleid<?=$j?>" value="<?=$str[$j]?>" />
</div>
You need to redefine your endDate option value:
$('.input-daterange').datepicker({
format: 'mm-yyyy',
// You used '+0d' that is for days instead of '+0m' that is for months.
endDate: '+0m',
viewMode: "months",
minViewMode: "months"
})