I have two datepickers. one for 'fromDate' and another for 'ToDate'. Here i want to save candidates work Experiences.So i have to fields to add fromdate and todate.That i get more experience history of one candidate.If i choose a date from fromDate picker and ToDate picker it should restrict the selection of dates between the records of db date given in fromdate and todate.In my form i have a check box to check the present work.so i get fromdate of work and todate is set it as 0000-00-00 to know it is on going.
table structure:userid,title,fromdate,todate,company,description.
my code:
<form id="candiwork" action="{{url('Candidate/experience/details')}}" method="post">
{{ csrf_field() }}
<div class="row">
<div class="col-lg-12">
<span class="pf-title">Job Title</span>
<div class="pf-field">
<input placeholder="Job Title.." type="text" name="job" id="job">
</div>
</div>
<div class="col-lg-5">
<span class="pf-title">From Date</span>
<div class="pf-field">
<input placeholder="06.11.2007" type="text" class="form-control datepicker" name="fromDate" id="fromDate">
</div>
</div>
<div class="col-lg-5">
<span class="pf-title">To Date</span>
<div class="pf-field">
<input placeholder="06.11.2012" type="text" class="form-control datepicker" name="toDate" id="toDate">
</div>
</div>
<div class="col-lg-2">
<p class="remember-label">
<input type="checkbox" name="cb" id="fgfg"><label for="fgfg">Present</label>
</p>
</div>
<div class="col-lg-12">
<span class="pf-title">Company</span>
<div class="pf-field">
<input placeholder="Company" type="text" name="company" id="company">
</div>
</div>
<div class="col-lg-12">
<span class="pf-title">Description</span>
<div class="pf-field">
<textarea name="description" id="description"></textarea>
</div>
</div>
<div class="col-lg-12">
<button type="submit" id="btn">Save</button> <br><br><br><br><br><br>
</div>
</div>
</form>
<script>
$(document).ready(function(){
$("#fromDate").datepicker({
maxDate: '0',
format: 'yyyy-mm-dd',
todayBtn: 1,
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#toDate').datepicker('setStartDate', minDate);
$('#toDate').datepicker('setDate', minDate); // <--THIS IS THE LINE ADDED
});
$("#toDate").datepicker({
format: 'yyyy-mm-dd'
}).on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#fromDate').datepicker('setEndDate', maxDate);
});
});
$(function(){
$('.datepicker').datepicker({
format: 'yyyy-mm-dd'
});
});
$("#fgfg").change(function() {
if(this.checked) {
$("#toDate").prop("disabled",true);
}else{
$("#toDate").prop("disabled",false);
}
});
$("#candiwork").validate({
rules: {
job: {
required: true,
},
fromDate: {
required: true,
},
toDate:{
required:true,
},
company:{
required:true,
},
description:{
required:true,
}
},
messages: {
job :"Please enter job title",
fromDate:"Please enter from date",
toDate:"Please enter to date",
company:"Please enter company name",
description:"Please enter description"
},
});
</script>
Related
I have one form that includes jQuery moment.js date-time picker I need to make this field required and disable the submit button until date time is not been picked by the user.
However, the approach that I am following is not working.
Here is my code -
<form name="myForm">
<div ng-show="myData.type==='PHONE'" class="col-md-12">
<div ng-if="myData.condition1 ==='something'" class="position-relative form-group">
<label for="email" class="">First Value</label>
<select name="firstValue"
id="firstValue"
ng-model="Data.firstValue"
class="form-control" required>
<option value="none">None</option>
<option value="done">Done</option>
</select>
</div>
<div ng-if="myData.condition2==='somethingElse'" class="position-relative form-group"><label
for="email"
class="">Second Value</label>
<input name="secondValue"
id="secondValue"
ng-model="Data.secondValue"
class="form-control" required>
</div>
<div ng-show="myData.condition3==='importantCondition'" class="position-relative form-group">
<label class="w-100" for="email">Third Value i.e Date & Time </label>
<div class="input-group date" id="thirdValue">
<input type="text" class="form-control" required placeholder="MM/DD/YYYY HH:MM:SS A"/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
<div ng-if="myData.type==='EMAIL'" class="col-md-12">
//Other conditions
</div>
<div class="col-md-12">
<input id="btn" class="btn btn-success btn-block" type="submit" ng-disabled="myForm.$invalid" value="Submit" ng-click="submitData(Data)">
</div>
</form>
<script>
$(document).ready(function(){
$('#thirdValue').datetimepicker({
"keepOpen":false,
"format": 'MM/DD/YYYY HH:mm:ss A',
"useCurrent": false,
"sideBySide": false,
"widgetPositioning": {
horizontal: 'right',
vertical: 'bottom'
},
"icons": {
time: "fa fa-clock-o",
date: "fa fa-calendar",
}
}).on("dp.change", function (e) {
var scope = angular.element(document.getElementById("angularController")).scope();
if($('#thirdValue').datetimepicker('date')!==null) {
scope.Data.dateTime = $('#thirdValue').datetimepicker('date').utc()
var temp = $('#thirdValue').datetimepicker('date').utc()
scope.$apply();
}
});
})
</script>
I want submit button to remain disabled until I don't select values for all the required fields.
I have a datetimepicker that shows up when the field is clicked and hides if clicked again. However, if clicked for the third time, the calendar does not appear. If you unfocus the field and then click it again - it appears.
I'm clueless.
HTML :
<div class="input-group">
<input id="setdate-date" class="form-control" type="text" name="Date" value="#Model.Date.ToString("yyyy-MM-dd HH:mm")" style="cursor:pointer">
<span class="input-group-addon datepickerbutton start-date-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
JS:
<script>
$(function () {
var today = new Date();
var endDate = new Date(#Model.MaxDate.Year, #(Model.MaxDate.Month - 1), #Model.MaxDate.Day, #Model.MaxDate.Hour, #Model.MaxDate.Minute, 0, 0);
$('#setdate-date').datetimepicker({
format: 'yyyy-mm-dd hh:ii',
startDate: today,
endDate: endDate,
autoclose: true
});
$('#setdate-date').datetimepicker('setDate', new Date());
$('#form-setdate .datepickerbutton').click(function () {
$('#setdate-date').datetimepicker('show');
});
})
</script>
Any ideas ? The same occurs on all of my datetimepickers.
Regards
edit: I tried applying .blur() on $('#setdate-date') so it unfocuses after a click but to no avail :/
This is how you use datepicker:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
Here you have different scenarios: https://eonasdan.github.io/bootstrap-datetimepicker/
I'm using bootstrap datepicker with bootstrap-rtl
the issue I had 2 fields, one for date and one for name, the datepicker not shown until I click first in date input then in name input then when I click back in date input the datapicker shown, and this happened only in first load of page then its work fine until you reload the page again.
<div class="col-md-6">
<div class="form-group">
<label for="name" class="control-label">name</label>
<input type="text" maxlength="40" name="name" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<span class="text-danger Bold">*</span>
<label for="civilIDExpiredDate" class="control-label">ExpiredDate</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="ExpiredDate" class="form-control datepicker">
</div>
</div>
</div>
<script type="text/javascript">
//datepicker
$('.datepicker').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: "dateToday"
});
</script>
this will work for you
<script type="text/javascript">
$(document).ready({
//datepicker
$('.datepicker').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: "dateToday"
});
});
</script>
you need to initialize your datetimepicker after dom is ready not before that.
I have a page to show datepicker but instead of month name and date, it shows undefined.
CSHTML
<div class="row my-row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-5">Select incident date range From</label>
<div class="col-xs-12 col-sm-7">
<input id="fromDate" class="datepicker" />
<input name="button" type="image" src="~/Content/Images/icon_calendar.png" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-5">To</label>
<div class="col-xs-12 col-sm-7">
<input id="toDate" class="datepicker" />
<input name="button" type="image" src="~/Content/Images/icon_calendar.png" />
</div>
</div>
</div>
</div>
javascript
$('#datepicker')
.datepicker({
format: 'mm/dd/yyyy',
autoclose: true,
endDate: '+0d',
todayHighlight: true,
weekStart: 1
})
can any one please help on this..
I suppose you meant $('.datepicker') instead of $('#datepicker') ?
If you have correctly import the boostrap and jqueryui files, you shouln't have any error. Maybe you have conflicts with something else
I have multiple instances of boostrap datetime picker 3. I need to insert the linked field for each to input to a mysql database. I can only change one of the instances to be the correct format. Here is where I am at.
<div class="input-append date form_datetime" data-date="2012-12-21T15:25:00Z">
Date 1
<input size="16" type="text" value="" readonly>
<br>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
Link1
<input type="text" id="mirror_field1" value="" readonly />
<br>
Date 2
<div class="input-append date form_datetime" data-date="2012-12-21T15:25:00Z">
<input size="16" type="text" value="" readonly>
<br>
Link2
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="text" id="mirror_field2" value="" readonly />
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
linkField: "mirror_field1",
linkFormat: "yyyy-mm-dd hh:ii",
linkField: "mirror_field2",
linkFormat: "yyyy-mm-dd hh:ii"
});
</script>
I use to create multiple datepicker with different id
$( "#datepickerA" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
maxDate: "+0D"
});
$( "#datepickerB" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
maxDate: "+0D"
});
$( "#datepickerC" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
maxDate: "+0D"
});
Then add each of them to my input field
<input name="date1" type="text" id="datepickerA" placeholder="date1"/>
<input name="date2" type="text" id="datepickerB" placeholder="date2"/>
<input name="date3" type="text" id="datepickerC" placeholder="date3"/>
This worked. Not sure why before it did not format the output correctly, but no need to add the linked field. It does it as a default. Just make a separate form and input id.
<div class="container">
<form id="form1" action="" class="form-horizontal" role="form">
<fieldset>
<legend>Test</legend>
<div class="form-group">
<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group date form_datetime col-md-4" data-date="1979-09-16T05:25:07Z" data-date-format="DD - MM dd, yyyy - HH:ii p" data-link-field="dtp_input1">
<input class="form-control" size="16" 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-th"></span></span>
</div>
<input type="text" id="dtp_input1" value="" /><br/>
</div>
<div class="form-group"><br/>
</div>
</fieldset>
</form>
</div>
<div class="container">
<form id="form2" action="" class="form-horizontal" role="form">
<fieldset>
<legend>Test</legend>
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group date form_datetime col-md-4" data-date="1979-09-16T05:25:07Z" data-date-format="DD - MM dd, yyyy - HH:ii p" data-link-field="dtp_input2">
<input class="form-control" size="16" 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-th"></span></span>
</div>
<input type="text" id="dtp_input2" value="" /><br/>
</div>
<div class="form-group"><br/>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript">
$('.form_datetime').datetimepicker({
language: 'en',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
minuteStep: 1,
todayHighlight: true,
startDate: new Date()
});
</script>