Develop Reference

restrict date range from datepicker by comparing db dates using laravel

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>

How to set default value of start date as yesterday and end date as today in jQuery

I want to display default value of start_date and end_date field as yesterday and today respectively.
Here is my code:
$(document).ready(function () {
$('#start_date .input-group.date').datepicker({
startView: 1,
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
autoclose: true,
format: 'yyyy-mm-dd'
default:today
});
$('#end_date .input-group.date').datepicker({
startView: 1,
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
autoclose: true,
format: 'yyyy-mm-dd'
});
$('#published_date .input-group.date').datepicker({
startView: 1,
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
autoclose: true,
format: 'yyyy-mm-dd'
});
});
My HTML:
<div class="col-md-2">
<div class="form-group" id="start_date">
<label for="">Start Date<span style="color: red;"> </span></label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" required name="start_date">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group" id="end_date">
<label for="">End Date<span style="color: red;"> </span></label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" required name="end_date">
</div>
</div>
</div>

The correct property for this is defaultDate. It accepts a Date object, a parsable date string, or an integer. I'd suggest using the latter. Use -1 for yesterday and 0 for today.
$(document).ready(function() {
$('#start_date .input-group.date').datepicker({
startView: 1,
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
autoclose: true,
format: 'yyyy-mm-dd',
defaultDate: -1
});
$('#end_date .input-group.date').datepicker({
startView: 1,
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
autoclose: true,
format: 'yyyy-mm-dd',
defaultDate: 0
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="col-md-2">
<div class="form-group" id="start_date">
<label for="">Start Date<span style="color: red;"> </span></label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" required name="start_date">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group" id="end_date">
<label for="">End Date<span style="color: red;"> </span></label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" required name="end_date">
</div>
</div>
</div>

You can use minDate
minDate: -1 for yesterday
minDate: 0 for today
$(document).ready(function() {
$('#start_date .input-group.date').datepicker({
startView: 1,
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
autoclose: true,
format: 'yyyy-mm-dd',
minDate: -1
});
$('#end_date .input-group.date').datepicker({
startView: 1,
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
autoclose: true,
format: 'yyyy-mm-dd',
minDate:0
});
$('#published_date .input-group.date').datepicker({
startView: 1,
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
autoclose: true,
format: 'yyyy-mm-dd'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-2">
<div class="form-group" id="start_date">
<label for="">Start Date<span style="color: red;"> </span></label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" required name="start_date">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group" id="end_date">
<label for="">End Date<span style="color: red;"> </span></label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" required name="end_date">
</div>
</div>
</div>

Here is the code example you can assign by deducting days and month or year as well. Please check.
var d = new Date();
var currMonth = d.getMonth();
var currYear = d.getFullYear();
var currDate = d.getDate();
var startDate = new Date(currYear, currMonth, d.getDate());
var endDate = new Date(currYear, currMonth, currDate - 1);
$('#start_date').datepicker('setDate', startDate);
$('#end_date').datepicker('setDate', endDate);

bootstrap datepicker click issue

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.

bootstrap-datetimepicker: display value of input

How can I persuade the datetimepicker to display its value in the input text field at initial pageload?
In this case the value attribute of the datepicker text-input is already set, but the field is displayed blank. Therefore I've tried to set the 'data-date-defaultdate' attribute but at the initial pageload the text field´s still blank. After a reload the value is displayed as expected.
The Form (excerpt):
<form name="news" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label required" for="news_validFrom">Start time</label>
<div class="col-sm-8 col-md-6">
<div class="input-group date datetime-picker" id="datetime1">
<input type="text" id="news_validFrom" name="news[validFrom]" required="required" class="form-control" value="2016-07-08T00:00:00+02:00" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label required" for="news_validTo">End date</label>
<div class="col-sm-8 col-md-6">
<div class="input-group date date-picker" id="datetime2">
<input type="text" id="news_validTo" name="news[validTo]" required="required" class="form-control" value="2016-06-22T00:00:00+02:00" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
// [...]
</form>
The Script:
$(function () {
$('#datetime1')
.attr('data-date-defaultdate', $('#datetime1 input').attr('value'))
.datetimepicker({
format: 'DD MMM YYYY HH:mm',
defaultDate: $('#datetime1 input').attr('value'),
viewDate: 'true'
});
$('#datetime2')
.attr('data-date-defaultdate', $('#datetime2 input').attr('value'))
.datetimepicker({
format: 'DD MMM YYYY HH:mm',
defaultDate: $('#datetime2 input').attr('value')
});
});
Any ideas how to make this work?

Chnage to:
$(function () {
$('#datetime1')
.attr('data-date-defaultdate', $('#datetime1 input').val())
.datetimepicker({
format: 'DD MMM YYYY HH:mm',
defaultDate: $('#datetime1 input').val(s),
viewDate: 'true'
});
$('#datetime2')
.attr('data-date-defaultdate', $('#datetime2 input').val())
.datetimepicker({
format: 'DD MMM YYYY HH:mm',
defaultDate: $('#datetime2 input').val()
});
});

Since I didn´t come to a solution for this problem I gave another fork of the bootstrap-datetimepicker a try: smalot/bootstrap-datetimepicker
This one works as expected and I don´t have the problem with the input value (the value is always displayed in the text field).
I suppose, the problem could issue from the given date format (value="2016-07-0 8T 00:00:00 +02:00"), but I haven´t figure it out exactly.

Jquery Datepicker not change month and years in popup

I have a problem in Jquery Datepicker can not change month & year in popup :(
please help me
Screenshot
http://prntscr.com/3vauj2
This CSS & JS Date Picker
<link rel="stylesheet" href="../stylesheets/ui-lightness/jquery.ui.all.css">
<script src="../javascripts/jquery-1.10.2.js"></script>
<script src="../javascripts/jquery.ui.core.js"></script>
<script src="../javascripts/jquery.ui.widget.js"></script>
<script src="../javascripts/jquery.ui.datepicker.js"></script>
<script>var date = jQuery.noConflict();
date(function() {
date("#asd").datepicker({
changeMonth: true,
changeYear: true,
dateFormat : "yy-mm-dd",
yearRange: "-0:+1",
});
});
</script>
HTML
<ul class="inline-popups">
<h3><i class="fa fa-plus">Add Gallery</i></h3>
</ul>
<!-- Form popup -->
<div id="text-popup-html" class="white-popup mfp-with-anim mfp-hide">
<CENTER>ADD GALLERY</CENTER><br/>
<form id="ff" action="ad_gallery.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputEmail1">Title Gallery</label>
<input type="text" maxlength="50" class="form-control" id="addgallery" name="ti" placeholder="Title Gallery">
</div>
<div class="form-group">
<label>Date</label>
<input type="text" class="form-control" id="asd" name="dt" >
</div>
<center>
<button type="submit" class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-danger">Reset</button>
</center>
</form>
</div><br/>
I Confused :(