how to avoid Bootstrap Datepicker default date choosen automatically? - javascript

I used Bootstrap DatePicker in a form, this is not a mandatory field. So whenever i submit a form without selecting the date on Datepicker. The default value like this 01-01-1970 only stored on datebase. I want to store like 0 instead of this value 01-01-1970.
I use Code like this
$('#dateRangePicker1').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
minDate: 0
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div class="col-xs-12">
<div class="form-group input-group input-append date" id='dateRangePicker4'>
<input type="text" id="cust_dob" class="form-control" name="date4" value="" placeholder="DOB" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>

I do believe that by default, the bootstrap datepicker doesn't set the default value. You can check it here: Sandbox. You can open developer console and try
$('#sandbox-container input').datepicker('getDate')
This will return null for you. If this is not set to be required, null will be sent through form.
My belief is what you have set in your database is the cause of this behaviour. I think you have set the type to the column to be DATETIME, (not null, too) which makes the database to set in the default date, which is 01-01-1970 (the start of Unix timestamp). If this is the case, you can set the column type to be varchar, set the value to be some common format (YYYY-mm-dd HH:mm:ss is one of them). On client side, you can use some popular datetime library like MomentJS to parse the time or generate dateTime string to save to database.

Related

Disable date selection by setting the current date - DatePicker

as written in the title I have implemented two DatePicker.
Via MDBootstrap: (https://mdbootstrap.com/docs/jquery/forms/date-picker/).
My intent was to not allow the user to select a date that is before the current date.
I have searched in their support, but no command corresponds to what interests me.
In addition, what I would like the second DatePicker, can not select a date that occurred before the date that is selected in the first DatePicker.
The code is here on JSFiddle.
The part of Javascript, you can call it how you want for the test.
Thank you all.
You can try with min and max property of MDBootstrap. here i am using min function to achieve your task.
<div class="md-form">
<input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
<input placeholder="Selected date" type="text" id="date-picker-example2" class="form-control">
<label for="date-picker-example">Try me...</label>
</div>
// Data Picker Initialization
$('.datepicker').pickadate({
min : new Date(),
onClose: function(){
$('#date-picker-example2').pickadate({
min : $('.datepicker').val()
})
}
});
you can see example here
for more options you can refer this document
Try adding
minDate: new Date()
into your DatePicker initialiser function
You can add something like this make your datepicker disable dates before current date
$('.datepicker').pickadate({
min: new Date(),
});
It seems like if your second date picker reacts with the changes of the first one then there might be the name conflict.

Set Focus for component in VueJS

This is my code.
import Datepicker from 'vuejs-datepicker'
if(this.DOB > this.dateOfJoin){
alert("DOB should not be greater than Date of Join.asd.!")
this.$refs.dob.focus();
}
<div class="form-group">
<label class="col-sm-3 control-label">Date of Birth</label>
<datepicker v-model="DOB" name="DOB" ref="dob" class="required"></datepicker>
</div>
I am using the vuejs-datepicker component, but I cannot set focus on the datepicker.
After reading through the docs, I recommend a different approach. The datepicker has a disabled property. This allows you to specify a from property that the date cannot be greater than and a to property that the date cannot be earlier than. So if you do not want users to select a date of birth greater than the date they joined, set the from property to the date joined.
In data properties
data:{
dobDisabled:{ from: <date joined> }
}
And on the datepicker,
<datepicker :disabled="dobDisabled"></datepicker>
That will prevent users from picking an invalid date.
Here is an example.
Original
It looks like the datepicker you are using renders a readonly input element, which I expect cannot get focus. In any case, the component which wraps the input does not support a focus method.
<input
:type="inline ? 'hidden' : 'text'"
:class="[ inputClass, { 'form-control' : bootstrapStyling } ]"
:name="name"
:id="id"
#click="showCalendar"
:value="formattedValue"
:placeholder="placeholder"
:clear-button="clearButton"
:disabled="disabledPicker"
:required="required"
readonly>
Instead you might try showing the calendar.
this.$refs.dob.showCalendar()

Bootstrap 3's DateTimePicker defaultDate from HTML markup

With Bootstrap 3 DateTimePicker, I understand that defaultDate can be configured via JS. Is it not possible to use the value of the input field as default?
Not working:
<input type="text" class="form-control" value="2016-01-15" data-date-format="L" />
Here's a JSFiddle attempt that is not working.
Thanks!
format: 'L' is the same as format: 'MM/DD/YYYY your textbox value does not match this format and thus is an "invalid date".
If you need other formats to be valid us extraFormats

How to get the value of current selected date from calendar eonasdan

I am using http://eonasdan.github.io/bootstrap-datetimepicker/ for calendar. Now I want to pick the selected date by the user. I am stuck with this calendar. Please help me to get the current selected date by the user I have used js to get the value.
On each date there is a class named "day". Now I wanted to get the value of the attribute "data-day" which have the value of the date as follows:
$(".day").click(function(){
var clicked = $(this).attr('id');
alert(clicked);
});
It returns the attribute's value only one time it's not recognizing the second click.
Please help me with js or this eonasdan plugin.
HTML
<br/>
<!-- padding for jsfiddle -->
<div class="row">
<div class="col-md-4 col-xs-6">
<input type="text" class="form-control" id="datetimepicker2" />
<br>
<input type="button" class="btn btn-success" id="getDate" value="Get Date" />
</div>
<span id="SelectedDate"></span>
</div>
JS
$('#datetimepicker2').datetimepicker();
$('#getDate').click(function () {
console.log($('#datetimepicker2').data('date'))
$('#SelectedDate').text($('#datetimepicker2').data('date'))
})
DEMO
Get Only Date Part
I have found methods for calendar described at linked page.
So for example to see what have user entered you have to:
$('#datetimepicker').data("DateTimePicker").date()
input here your id and as result receive object which has '_d' field with value.
data('DateTimePicker')
also has a lot of taste functions to configure plugin.
i think i might have the solution for you.
$('#datetimepicker1').data('date')
Please have a go.

Date value not showing value pulled from database

My setup is SailsJS + Mongo using EJS for inserting database values onto my page.
On my page I'm using a standard HTML form date picker and to set a date. Using this I can successfully submit the selected date to my database with no issues. The date format looks like this in my DB: 2015-06-09T00:00:00.000Z
I can call this value into a regular text field, but if I try to populate a date picker value, it just shows up like the value has not been populated.
Is there something I'm missing or some inbetween step which needs to be taken?
Here is what my form entry looks like for the date picker:
<div class="control-group">
<label class="control-label" for="resStart">When do you need the space?</label>
<div class="form-group">
<input type="date" class="form-control" value="<%= request.resStart %>" name="resStart">
</div>
</div>
<div class="control-group">
<label class="control-label" for="resEnd">When will you be done with the space?</label>
<div class="form-group">
<input type="date" class="form-control" value="<%= request.resEnd %>" name="resEnd">
</div>
</div>
your value in DB is actually a datetime value. i think just passing it to date picker will not be recognized. it needs to be changed to date format. the input tag in your html is date type. i think change this to text will get the value appear. but to make the date picker work you will need to do some data conversion between the datetime format 2015-06-09T00:00:00.000Z and 2015-06-09

Categories

Resources