I use bootstrap datepicker object http://eonasdan.github.io/bootstrap-datetimepicker
HTML
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" value="" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
In JS file
$('#datetimepicker1').datetimepicker({
format: 'l',
locale:$.fn.getlocale(),
showTodayButton:true,
maxDate:moment().add(6, 'month')
});
On page loading, I want to set a date that is provided by mysql back end. I tried the following code and I don't see any date being shown in the UI.
var backend_date = dataset["APPLICATION_DEADLINE"];
var date = new Date(backend_date);
$('#datetimepicker1').data("DateTimePicker").date(moment(date));
Could you please help?
Try This:
var backend_date = dataset["APPLICATION_DEADLINE"];
var date = new Date(backend_date);
$('#datetimepicker1').datetimepicker({
defaultDate: date
});
I think I have found an easy way
var dateobj = $.fn.getDateObjectFromMYSQL(dataset["APPLICATION_DEADLINE"]);
$('#datetimepicker1').data("DateTimePicker").date(dateobj);
$.fn.getDateObjectFromMYSQL = function(mysqldate){
var t = mysqldate.split(/[- :]/);
var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
return d;
}
Related
I am developing a page that sum a summary of report. By default it only shows today. I am using this:
include $koneksi
$date ='current_date';
$query1 = mysqli_query($koneksi,"SELECT * from daftar where tanggal=subdate($date, 1)");
$result=mysqli_num_rows($query1);
And here is my HTML
<div class="count blue"><?php echo $result." people(s)"?></div>
And it works, the result of query is what I expected.
Now I need to change the value of $date variable with datepicker.
<div class='input-group date' id='myDatepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I want it so that every time I click on datepicker the variable $date will change and the page will reload (same page but different query result ) by itself.
If you want the data to displayed in the same page, better you can use Angular. Here, just to show the flow I have used angularJs but the support for angularJs has been stopped so use Angular or reactJs as per your need (search more about it)
Use html to construct a form and using angularJs http.post(), post your form data to php
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function(){
var date_input=$('input[name="inpDate"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'yyyy-mm-dd',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
});
</script>
<form ng-submit="submit()">
<label>Date</label>
<input class="form-control" ng-model="inpDate" id="date" name="inpDate" placeholder="YYYY-MM-DD" type="text" required="required"/>
</form>
And write a separate angularJs file as below. On submit this will send date to the php file and get the response.
$scope.submit = function(){
var date1=$scope.inpDate;
$http.get('http://localhost/report/urfile.php?inpdate='+date1).success(function(shiftdata) {
$scope.dbValue = shiftdata;
console.log(JSON.stringify(shiftdata) );
});
}
after this modify your php will to receive the data and send a response accordingly.
Now the data is URL you can get it in ph like below.
urfile.php
$date = $_GET['inpdate'];
I'm using a bootstrap date picker in my form to save date value in the controller
public function store(Request $request)
{
$task = new Task;
$task->task_name = $request->input('name');
$task->body = $request->input('body');
$task->assign = $request->input('status');
$task->priority = $request->input('status');
$task->duedate = $request->input('date');
$task->save();
}
This is form date picker
<div class="col-xs-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
</div>
</div>
This is jQuery function regarding with bootstrap date picker in app.blade.php
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
})
</script>
Save other form date without date value in my table duedate column save with 0000-00-00 values. How can I solve this?
This is not working because you have set date format format: 'mm/dd/yyyy', like this and mysql date datatype accepts only Y-m-d format so you can change the format of date in datetime picker or change using Carbon or date("Y-m-d", strtotime($request->input("date"))) function
Looks like you already got it sorted but since you are already using laravel just utilize the Carbon package and it will be super simple. plus the Carbon parser is pretty good and if you ever change the way you submit the data from the front end you don't have to worry about updating your code base
use Carbon\Carbon;
public function store(Request $request)
{
...
$task->duedate = (new Carbon($request->input('date')))->toDateString();
...
I have two fields where one field is used to give input of user age and another field to display the date of birth as per current date.
My html code is:-
<div class="col-xs-4 form-group">
<label><?php echo _('DOB'); ?> : </label>
<input value="" type="text" name="jbs_dob" id="jbs_dob" size="17" />
</div>
<div class="col-xs-4 form-group">
<label><?php echo _('Age'); ?> : </label>
<input value="" class="validate[required] form-control" type="text" name="jbs_age" id="jbs_fname" size="17" />
</div>
My js and jquery code is:
$(function () {
$("#jbs_age").click(function () {
var jbs_dob = new Date();
var jbs_age =$('jbs_age').val();
var diff= jbs_dob-jbs_age;
$( "#jbs_dob" ).html(diff);
});
});
Try below code. This will return you Year of the birth. If you provide age 25 then it will show 1991 in birth day field.
$(function () {
$("#jbs_age").click(function () {
var jbs_dob = new Date();
var jbs_age =$('#jbs_age').val();
var age = (jbs_dob.getFullYear() - jbs_age);
$( "#jbs_dob" ).val(age);
});
});
I want to check shift start time and shift time values overlapped or not. if user enter overlapped values it should prompt error. please advice
<div class="form-group">
<label for="">Shift Start:</label>
<div class='input-group date' id='datetimepicker3'>
<input type='text' name="shift_start" class="form-control"
id='datetimepicker3' value="{{old('shift_start')}}" /> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-time"></span>
</span>
</div>
<div class="form-group">
<label for="">Shift End:</label>
<div class='input-group date' id='datetimepicker5'>
<input type='text' name="shift_end" class="form-control"
value="{{old('shift_end')}}" /> <span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
this is my script
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
$('#datetimepicker5').datetimepicker({
format: 'HH:mm'
});
});
Create a javascript function :
function checkTime()
{
var start = $('#datetimepicker3').val();
var end = $('#datetimepicker5').val();
var tabStart = start.split(':');
var tabEnd = end.split(':');
var dateStart = new Date();
dateStart.setHours(parseInt(tabStart[0]));
dateStart.setMinutes(parseInt(tabStart[1]));
var dateEnd = new Date();
dateEnd.setHours(parseInt(tabEnd[0]));
dateEnd.setMinutes(parseInt(tabEnd[1]));
if(dateStart < dateEnd)
{
alert('ok');
}
else
{
alert('ko');
}
}
Then in you datetimepicker :
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm',
onSelect: function(){
checkTime();
}
});
$('#datetimepicker5').datetimepicker({
format: 'HH:mm',
onSelect: function(){
checkTime();
}
});
});
I am using bootstrap datepicker
here is my code
var available_Dates = ["2015-08-05","2015-08-16","2015-08-21"];
$('input.date-pick').datepicker({
language: 'en',
beforeShowDay: function(date){
var formattedDate = $.fn.datepicker.DPGlobal.formatDate(date, 'yyyy-mm-dd', 'en');
if ($.inArray(formattedDate.toString(), available_Dates) == -1){
return {
enabled : false
};
}
return;
}
});
Html i am using
<div class="form-group">
<label><i class="icon-calendar-7"></i> Select a date</label>
<input class="date-pick form-control" placeholder="Jul 18, Sat" data-date-format="M d, D" type="text">
</div>
Now the problem is, the result comes with an additional day.
2015-08-06
2015-08-17
2015-08-22
But i want selected date to be the result.
Please provide suggestion,
Thank you