I'm new on PHP and everything in general, I'm building an application where a date picker is shown. I want to submit the date following a specific format (year : "y" and month : "m") to end up with a url like http://localhost/index.php?m=06&y=2019...
the datepicker i'm using is https://getdatepicker.com/5-4/
and the code:
HTML:
<div class="col-xl-4 col-md-6 col-12">
<div class="float-left">
<form action="">
<div class="input-group">
<input name="datepicker" id="datepicker" class="form-control py-2 border-right-0 borderdate-pickerwidth:auto" value="04/01/2021" />
<button class="input-group-append">
<i class="mdi mdi-calendar align-middle font-c-x-large border-left-0 border px-2"></i>
</button>
</div>
</form>
</div>
</div>
JS:
$(function () {
$('#datepicker').datetimepicker({
format: 'DD/MM/YYYY'
});
});
Actually if I submit a form the value is:
?datepicker=04%2F01%2F2021
but I want:
?m=01&y=2021
So my question is: How can I submit the information displayed on the datepicker and format it as commented above?
Thank you in advice.
Related
In my form I have below code to display the date picker. I am using bootstrap
<div class="form-group row">
<label for="Quantity" class="col-sm-3 col-form-label">Required Date</label>
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
<div class="input-group-addon">
<i class="fas fa-calendar-alt"></i>
</div>
</div>
</div>
</div>
The date format I get is MM/DD/YYYY. But the format I need is DD/MM/YYYY. How can I change this? If I can add attribute to the form field that is better instead of javascript of jquery.
You need to define the format once in jQuery.
// here assumed that `datepicker` is the class name for using date picker
$('.datepicker').datepicker({
format: 'DD/MM/YYYY'
});
// as per your code, you can update for specific id
$('#date').datepicker({
format: 'DD/MM/YYYY'
});
I'm quite new to all this and was wondering if you could help shed some light on this. I have a datepicker widget in a form in my html and a javascript code which responds to change in date picker. What I want is when the user changes the date in the date picker widget, to post the changes to my Django backend
The html snippet is
<form id="availability_form" method="POST" action="">
{% csrf_token %}
<div class="col-sx-12 col-sm-6 col-md-6 col-lg-6">
<div class="input-group date" data-provider="datepicker">
<input class="form-control" id="id_availableDate">
<div class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</form>
and the javascript snippet is:
...
...
$('#id_availableDate').change(
function () {
$("#availability_form").submit();
}
);
This tends to work, I see that the data is posted and my Django view receives a post, but when I examine the contents I don't see any data from the datepicker sent. What am I doing wrong?
Thanks in advance
Just add the name of the field:
<form id="availability_form" method="POST" action="">
{% csrf_token %}
<div class="col-sx-12 col-sm-6 col-md-6 col-lg-6">
<div class="input-group date" data-provider="datepicker">
<input class="form-control" id="id_availableDate" name="availableDate">
<div class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</form>
and you can get to the value as $_POST['availableDate'];
I have the below code, how can I hide the calendar when I pick the month?
<div class="col-lg-3 col-sm-3" id="div_monthly_cal" style="display:none;">
<div data-date-minviewmode="months" data-date-viewmode="months" data-date-format="mm-yyyy" data-date="" class="input-append date dpMonths" id="dtpk2">
<input name="month_pick" id="month_pick" type="text" value="<?php echo date('m-Y'); ?>" class="form-control" readonly="readonly" />
<span class="input-group-btn add-on">
<button class="btn btn-primary" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
If you are using jquery calendar, than you can use below code :-
$('#example1').datepicker().on('changeDate', function (ev) {
$('#example1').Close();
});
Update 1:
You can also use the autoclose option, shown below :-
$('#dp1').datepicker({
format: 'mm-dd-yyyy',
autoclose: true
});
Update 2: Another option
$('#dp1').datepicker()
.on('changeDate', function(ev){
$('#dp1').datepicker('hide');
});
I'm trying to get a couple of date time selector widgets working, but whenever I submit my form, the values returned are undefined. I'm still new to Javascript, and haven't worked with jQuery at all.
My code follows the basic example here: http://eonasdan.github.io/bootstrap-datetimepicker/#minimum-setup
<form method="post" action="/requser/direct-user">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="directTrainingDate">Training Date</label>
<div class='input-group date' name="directTrainingDate" id='directTrainingDate'>
<input type='text' class="form-control">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<script>
$('#directTrainingDate').datetimepicker({
format: 'YYYY-MM-DD'
});
</script>
</div>
</div>
<div class="row"> <!-- Submit button -->
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-custom">Submit</button>
</div>
</div>
</div> <!-- End Submit button -->
</form>
And then back in my Node/Express route, I'm just logging the value of req.body.directTrainingDate, and it's always undefined.
Just for documentation, from my comment above:
You put the name attribute directTrainingDate on the div instead of the input.
I have seen many examples about adding and removing normal text fields. BUt on date picker i got the problem.
I have these codes to choose the date.
I want to add more than one date so how i can new date fields dynamicly. And also remove. There are manye xamples only for adding.
<div class="form-group">
<label class="control-label col-md-3">Dates</label>
<div class="col-md-2">
<input class="form-control form-control-inline input-medium date-picker" size="16" type="text" value="" />
<span class="help-block">Choose a date </span>
</div>
<div class="col-md-1">
<div class="input-group">
<span class="input-group-btn">
<button id="plus" class="btn btn-success" type="button" name="add">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
</div>
</div>
</div>
I got these code which is working for normal text field dynamic adding.
var template = '<div class="input-group"><input type="text" class="form-control"/></div>',
minusButton = '<span class="btn input-group-addon delete-field">(-)</span>';
$('.add-field').click(function() {
var temp = $(template).insertBefore('.help-block');
temp.append(minusButton);
});
$('.fields').on('click', '.delete-field', function(){
$(this).parent().remove();
});
I am using bootstrap date picker and bootsrap version is 3.3.6.
Thanks in advance.
You can attach datepicker to the element after inserting it to the DOM.
$('.add-field').click(function() {
var temp = $(template).insertBefore('.help-block');
temp.find("input[type=text]").datetimepicker();
temp.append(minusButton);
});