Options for auto setting a date input field - javascript

When presenting a user with a date input form
<input type="date" class="form-control" name="date" value="{{ old('date') }}">
Most of the time although not always the user needs to enter todays date.
What are my options for setting the default value to todays date.
Im using Blade, PHP, Bootstrap, Laravel, CSS, HTML
If any of them resources have something to handle this.
Thanks in advance for any feedback it's appreciated.

You can use PHP to echo the date:
<?php $today = date("m/d/Y"); ?>
<input type="date" class="form-control" name="date" value="<?php echo $today; ?>">
This will echo a date in the format of Month/Date/Year, e.g. 12/31/2000
The documentation here explains in more detail on how to format the date

The function old() takes a second parameter, the default. Using the link provided by user Chris, it looks like you want the format d/m/Y. With that in mind, the following should do the trick.
{{ old('date', date('d/m/Y')) }}

Related

JavaScript use same function for different id's

I have a form with several date fields. These date fields are actual text fields as I want to control the date structure from the start.
<div class="form-group col-md-6 col-xs-13">
<?php echo form_error('eindDatum'); ?>
<label for="eindDatum"><?php echo $this->lang->line('eindDatum'); ?><small class="text-info"><?php echo ' ' . $this->lang->line('datumNotatie'); ?></small></label>
<input type="text" name="eindDatum" id="eindDatum" class="form-control date" placeholder="DD-MM-YYYY" required pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-[0-9]{4}">
</div>
<div class="form-group col-md-6 col-xs-13">
<?php echo form_error('aanvangDatum'); ?>
<label for="aanvangDatum"><?php echo $this->lang->line('aanvangDatum'); ?><small class="text-info"><?php echo ' ' . $this->lang->line('datumNotatie'); ?></small></label>
<input type="text" name="aanvangDatum" id="aanvangDatum" class="form-control date" placeholder="DD-MM-YYYY" required pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-[0-9]{4}">
</div>
I was looking for a formatter online to automatically insert the - (dash) between the structures. But my knowledge of JavaScript is really limited. I tried with using the class selector but that does not seem to work at all.
var date = document.getElementsByClassName('date');
And then I added a class of date to the input text fields
I (am trying to) work with this https://codepen.io/tutsplus/pen/KMWqRr
Any help would be greatly appreciated. If possible tell me why you are approaching it in a specific way so I can learn from your experience.
In the link you shared they are applying the function to a single element as they are getting it by id.
In your case you tried to get it by its class in that case it won't work because the date variable will contain a collection of elements, so you need to loop over this collection to add the event listener properly to each element.
Your code should look like this:
var dates = document.getElementsByClassName('date');
Array.from(dates).forEach(function(element) {
element.addEventListener('input', inputFunction);
element.addEventListener('blur', blurFunction);
});
Note:
I made two functions for both events, all you need to do is to put the code inside the eventlisteners in your link respectively inside these two functions:
function inputFunction(e) {
//The input event code will be here
...
}
function blurFunction(e) {
//The blur event code will be here
...
}

ng-model value is not coming in date filter using angular js

I am doing angular js search between from one date to another date using date picker .
I have made it ,every thing working fine .
But i am not getting the dynamic value of the date .which i have selected from the date picker .
I have passed two static date of given format its working fine.
I am not getting why it is not coming .
Below is the code.
<tr class="gradeU" ng-repeat="x in invoice| dateRange : from_date : to_date ">
This above one not working .
If i am using this one its working .
<tr class="gradeU" ng-repeat="x in invoice| dateRange : '2016-11-20' : '2016-11-25'">
Dont know why ,
i have passed it in ng-model also
<div class="col-sm-2 m-b-xs">
<input type="text" name="from_date" class="form-control" placeholder="From" date-time view="date" auto-close="true" min-view="date" ng-model="from_date" format="YYYY-MM-DD" />
</div>
<div class="col-sm-2 m-b-xs">
<input type="text" name="to_date" class="form-control" placeholder="From" date-time view="date" auto-close="true" min-view="date" ng-model="to_date" format="YYYY-MM-DD" />
</div>
Can anybody suggest me,what is the error?
Thank you in advance.
Try using new Date(from_date) to see if the variable contains a valid date
This will also convert the variable type into Date type if the variable contains a valid date as well

jQuery datepicker field value not showing

I have a field on which I have implemented jQuery Datepicker but if I assign a value on that field its shows in the chrome's developer tool...
But its not showing on the front end.
I know we can set a default date like this with the datepicker option setDate:
$( ".datepicker" ).datepicker("setDate", '29-10-2016');
But the date is coming from database and I cannot hard code it... So is there any way I can add a value and it will show up on front end unless user changes and set another date?
<input type="text" name="date" id="date" class="datepicker" value="25-10-2016">
This problem happen because javascript require date input in format "yyyy-MM-dd", regardless format you use to display the value.
So your code should be like this :
<input type="text" name="date" id="date" class="datepicker" value="2016-10-25">
or
<input type="text" name="date" id="date" class="datepicker" value="<?php echo date_format($date,"Y-m-d"); ?>">
I found a way but still doesn't feel its the correct way, but for now this will do the trick for me.
I'm posting this answer to help other and will wait and see anyone else come up with the best and efficient solution for this question.
Since I'm using PHP so I just put this on my page to set the date for that field. I can add more lines if I have more date fields in my page...
<script>
$(function(){
$('#date').datepicker('setDate', '<?php echo $date; ?>');
});
</script>
If you are not getting value from $('#date').val() then there is problem in back end , date is not coming from back-end. If there is value in input field like
<input type="text" name="date" id="date" class="datepicker" value="25-10-2016">
Then you can use below code .
$(function(){
$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"} );
$( ".datepicker" ).datepicker("setDate",$('#date').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" name="date" id="date" class="datepicker" value="25-10-2016">
Mine situation was my date input didn't show the date value I picked after submit, but the date value can be seen in Chrome Developer tool, so I solved this problem by getting the input value before setting datepicker, then adding the value after.
$( function() {
var ddate = document.getElementById("date").value?document.getElementById("date").value:'';
$("#date").datepicker();
$("#date").datepicker("option", "dateFormat", "yy/mm/dd");
$("#date").val(ddate);
} );

Indirect Population of Textarea in HTML Form Using PHP

I am working on an "Update User Data" form, which should reflect the initially entered information stored in the database into the textarea, and can be changed if the user wishes to. While I'm doing so, I have a concern - is directly writing value = <?php //some code ?> the safest bet?
I was trying to invoke a function to place my PHP code in that instead, but apparently it's just displaying the function's name.
Here's my code snippet:
<div>Date of Birth: </div>
<input id="dob" type="date" onFocus="emptyElement('status')" value="reflect_data('dob');">
where the function reflect_data is defined as -
function reflect_data(elem) {
//query and some code to access the data and store into $member
if (elem == "dob") {
echo $member['DOB'];
exit();
}
NOTE : A newbie to PHP, any advice would be welcome. Thanks. :)
You use php code in a JS function. That won't work that way and is impractical. Simple:
<input id="dob" type="date" onFocus="emptyElement('status')" value="<?php echo htmlspecialchars($member['DOB']); ?>">
is the best solution.

How to remember selected date in jquery Datepicker if validation is not passed?

I am using codeigniter for form validation, in all my inputs I have something like this:
<input type="text" id="someId" name="someId" value="<?php echo set_value('someId'); ?> />
And works perfectly. However when using input type 'date' or jquery Datepicker in case browser doesn't recognize date tag, the date field just resets. Here is my exact code for that field:
<input type="date" id="fecnac" name="fecnac"
value ="<?= isset($_SESSION['fech_nacimiento']) ? $_SESSION['fech_nacimiento'] :
set_value('fecnac'); ?>" />
I have a session tag because once succesfully submitted value is stored on a session variable. But if it doesn't pass validation I use the 'set_value()' from codeigniter. Problem is it isn't working.
Is there another way to remember the selected date from user if form doesn't pass validation? With or without codeigniter.
I have found a solution for this, here it is in case anybody else has the same issue:
Like Jay Bhatt pointed on a comment, date needs to be on right format. For Jquery Datepicker it should be something like this:
$( "#datepicker").datepicker({
dateFormat: 'yy-mm-dd'
});
In my case, since I'm using Codeigniter, for the field to remember value should be:
value="<?php set_value('datepicker'); ?>
It wasn't working because I forgot to add $this->form_validation->set_rule() to that field in my Controller. Turns out that if you want CI's set_value() function to work, you need to set_rule() first. This was new for me.

Categories