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();
...
Related
this is the date range picker in html form
<div class="form-group " id="input-dates">
<input class="form-control date-range-picker" id="dateRange" type="text" name="dates" placeholder="<?php echo get_phrase('when'); ?>.." autocomplete="off" required>
<i class="icon_calendar"></i>
</div>
i have used the on click function for input type but i didn't get the dates in jquery
i have also use apply.daterangepicker method
function myCallback(start, end) {
$('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
alert('hello world'); //etc, your code here
}
// attach daterangepicker plugin
$('#dateRange').daterangepicker(options, myCallback);
i have also use the above functions but it's not working
I think the bit of code you're looking for is:
$('#dateRange').daterangepicker(options, myCallback)
.on("input change", function (e) {
console.log("Date changed: ", e.target.value);
});
e.target.value will be the date range, and the function will be triggered by clicking the apply button
My previous answer is below
To get the code you have working, just add this line let options = {} before you create your datepicker as you see below. Your question on how to get the changed dates: those are in a form field called dates - when you submit your form, the field with the changed dates is called dates because the element has name="dates". Because that same element has an ID of dateRange, the way you get the value of it before the form submits is $('#dateRange').val()`
function showValues() {
alert($('#dateRange').val());
return false;
}
function myCallback(start, end) {
$('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
// attach daterangepicker plugin
/* Make sure you have the options object at least instantiated */
let options = {} // you can add more options to this, but need at least this
$('#dateRange').daterangepicker(options, myCallback)
.on("input change", function(e) {
console.log("Date changed: ", e.target.value);
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<form onsubmit="return showValues()">
<div class="form-group " id="input-dates">
<input class="form-control date-range-picker" id="dateRange" type="text" name="dates" placeholder="<?php echo get_phrase('when'); ?>.." autocomplete="off" required>
<i class="icon_calendar"></i>
</div>
<button class='btn btn-primary' type='submit'>Submit</button>
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 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;
}
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
I'm working on a planner using bootstrap, php and jquery and i'd like to use a datetimepicker (http://www.eyecon.ro/bootstrap-datepicker/) to go to a different date on the planner and view the tasks of that day.
I want to use a normal button to trigger the datepicker. Then, whenever the user picked a date, use GET to create a link like index.php?page=planner&date=2013-08-03. I'm trying not to use an input field, but whenever a date is clicked to create a GET link immediately if possible..
Example image:
How to create a button working like this?
I'm using the following HTML:
<a id="diff-date" class="btn btn-large btn-primary" href="#">Date <i class="icon-calendar icon-white"></i></a>
An the following JQuery:
$(function() {
$('#diff-date').datetimepicker({
pickTime: false
});
});
Without succes so far.. I hope someone can help!
EDIT
Normally I use this HTML:
<label>Datum:</label>
<div id="datum" class="input-append">
<input data-format="dd-MM-yyyy" type="text" name="datum" placeholder="Kies een datum..." /><span class="add-on"><i data-date-icon="icon-calendar"></i></span>
</div>
And this JQuery:
$(function() {
$('#datum').datetimepicker({
pickTime: false
});
});
To achieve this:
You're confusing:
http://tarruda.github.io/bootstrap-datetimepicker/
With this:
http://www.eyecon.ro/bootstrap-datepicker/
They're not the same.
Try this :
$(document).ready(function() {
$('#diff_date').datepicker().on('changeDate', function(ev){
var choosenDate = ev.date;
//Add a specific treatment for the date here...
$('#diff-date').datepicker('hide');
});
$('#diff_date').click(function() {
$('#diff-date').datepicker('show');
});
}
And change the html of your link like :
<a id="diff-date" class="btn btn-large btn-primary" href="#" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Date <i class="icon-calendar icon-white"></i></a>
Just for information, this is the code used in the site to make a link with a calendar :
var startDate = new Date(2012,1,20);
var endDate = new Date(2012,1,25);
$('#dp4').datepicker()
.on('changeDate', function(ev){
if (ev.date.valueOf() > endDate.valueOf()){
$('#alert').show().find('strong').text('The start date can not be greater then the end date');
} else {
$('#alert').hide();
startDate = new Date(ev.date);
$('#startDate').text($('#dp4').data('date'));
}
$('#dp4').datepicker('hide');
});
And the Html for that
Start dateChange