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
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.
As you can see on the image I want to disable click on December 2017 (black box). How can I do this?
My javascript function for the calendar.
$('#datepicker').datepicker({
changeYear: true,
multidate: true,
maxViewMode: 0,
startDate: today,
})
Maybe you could use changeMonth option as following :
$('#datepicker').datepicker({
changeYear: true,
changeMonth: false,
multidate: true,
maxViewMode: 0,
startDate: new Date(),
});
$('#datepicker2').datepicker({
changeYear: true,
changeMonth: true,
multidate: true,
maxViewMode: 0,
startDate: new Date(),
});
input {
width: 25%;
margin: 1%;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="datepicker" placeholder="You can't change my month !" />
<input type="text" id="datepicker2" placeholder="You can change my month !" />
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
})
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');