datepicker input field required is not required - javascript

I have a datepicker input field in my form that should be required. I made the input field required like this:
<div class="col-md-8 animate-box">
<div class="bootstrap-iso">
<div class="form-group"> <!-- Date input -->
<input class="form-control" id="date" name="date"
placeholder="Afhalen. Donderdag 17-19u. Zaterdag 09-16u. Minstens 1 week op voorhand reserveren."
type="text" readonly='true' required data-readonly/>
</div>
</div>
</div>
unfortunately, it isn't required!?
This is the code where I build the datepicker, but I think that's not the problem:
<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";
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
autoclose: true,
startDate: '+1w',
daysOfWeekHighlighted: "4,6",
daysOfWeekDisabled: "0,1,2,3,5",
orientation: "auto",
})
})
</script>
I use:
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.easing.min.js"></script>

You can't make an input readonly AND required.
Make the datepicker popup when they click the field too and nobody will type in there.
If they do you can make a keyup function to erase the input.

$("#your element id").prop('required',true);
OR
$("#your element id").attr("required", true);

Related

How to disable dates in second datetimepicker based on next days in the first one

I use the bootstrap date picker and I use two textboxes to search by date from-to, want to the second textbox give me the days after the days in the first textbox,
any help, please.
HTML :
<form action="{{url('search/ticket')}}" method="get">
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerfrom form-control" name="remember" placeholder="Search From" id="txtStartDate" required>
</div>
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerto form-control" name="remember" placeholder="Search To" id="txtEndDate" required>
<button type="submit" class="basic-button">Submit</button>
</div>
</form>
javascript :
<script type="text/javascript">
$(document).ready(function () {
$('.timepickerfrom').datetimepicker({
format: 'YYYY-MM-DD',
});
$('.timepickerto').datetimepicker({
format: 'YYYY-MM-DD',
});
});
</script>
You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.
Try this code:
$(document).ready(function () {
$('.timepickerfrom').datepicker({
format: 'yyyy-mm-dd',
}).on('changeDate', function(selected){
var minDate = new Date(selected.date.valueOf());
$('.timepickerto').datepicker('setStartDate', minDate);
});
$('.timepickerto').datepicker({
format: 'yyyy-mm-dd',
});
});
I found the solution if anyone wants help.
It's called the linked datepicker
https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

How can I get value of Bootstrap Datepicker in JS function onchange event?

I tried to get the Date value in javascript function after I select date in bootstrap datepicker, but I can't do this.
The date picker work and show the date in input field, but I can't use this value.
(for example I want when I choose a date I get popup alert with the selected date)
This is datepicker:
<div class="form-group">
<label class="control-label" for="date">THE Date</label>
<div class="form-group">
<div class='input-group date' >
<input class="form-control " id="date_id" name="date" placeholder="DD/MM/YYYY" type="text" onchange="DateFunction()" />
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
JavaScript:
$(document).ready(function () {
var date_input = $('input[name="date"]');
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var options = {
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
})
function DateFunction() {
var x = document.getElementById("date_id");
alert(x.Value);
}
-------------edit:--------------------
i change to this function. how and where i need to add line to get my date value? the date is work and show in input
html:
<div class="container">
<div class="col-xs-12">
<input name="datetimepicker" id="Date_id" />
</div>
</div>
js:
$(function () {
$('input[name="datetimepicker"]').datetimepicker({
format: 'DD/MM/YYYY',
});
});
See https://bootstrap-datepicker.readthedocs.io/en/latest/events.html for the documentation of the datepicker events.
in short
date_input.datepicker(options);
date_input.on('changeDate', function(e){
// e.date holds the new date (e.dates if it is multidate picker)
console.log(e.date); // log actual Date object to handle as you want
console.log(this.value); // log the formatted value of the input
});
Example at https://codepen.io/anon/pen/KoZzpw

using from <Form> tage for enter two date with same format

I want to get two date from user with same format(Date format is JALAL) by this code:((main part is bold))
<head>[enter image description here][1]
<link rel="stylesheet" type="text/css" media="all" href="http://www.edak.cf/select_date_ir/datepicker.css" >
</head>
<body>
****<form action="" method="post">
<div class="input-dte">
From : <input id="inputpickerr" class="input" name="From" type="text" placeholder="JALALI DATE" />
To: <input id="inputpicker" class="input" name="To" type="text" placeholder="JALALI DATE" />
<input name="submit" type="submit" />
</div>
</form>****
<script type="text/javascript" src="http://www.edak.cf/select_date_ir/jalali.js"></script>
<script type="text/javascript" src="http://www.edak.cf/select_date_ir/calendar.js"></script>
<script type="text/javascript" src="http://www.edak.cf/select_date_ir/calendar-setup.js"></script>
<script type="text/javascript" src="http://www.edak.cf/select_date_ir/calendar-fa.js"></script>
<script type="text/javascript">
Calendar.setup({
inputField: "inputpicker", // id of the input field
inputField: "inputpickerr", // id of the input field
button : "inputpicker", // trigger for the calendar (button ID)
button : "inputpickerr", // trigger for the calendar (button ID)
ifFormat : "%Y-%m-%d", // format of the input field
dateType : 'jalali',
weekNumbers : false
});
</script>
</body>
but JALALI format is working only for first input, and second input change to Gregorian date.Whereas both "input" is identical!!!!!
You can't call the .setup method like that, Javascript objects can't have duplicate keys. You have to call it for each of the inputs separately:
Calendar.setup({
inputField: 'inputpicker',
button: 'inputpicker',
ifFormat: '%Y-%m-%d',
dateType: 'jalali',
weekNumbers: false
});
Calendar.setup({
inputField: 'inputpickerr',
button: 'inputpickerr',
ifFormat: '%Y-%m-%d',
dateType: 'jalali',
weekNumbers: false
});
Also if the inputField and button keys really contain IDs then you have another problem - IDs in HTML have to be unique.
thanks for your answer
your are right, I forgot to tell that subject : I add "inputField: 'inputpickerr',
button: 'inputpickerr'," intractable . The original of that part is :
<script type="text/javascript">
Calendar.setup({
inputField: "inputpicker", // id of the input field
button : "inputpicker", // trigger for the calendar (button ID)ID)
ifFormat : "%Y-%m-%d", // format of the input field
dateType : 'jalali',
weekNumbers : false
});
</script>
Do you have any solution for my problem?

Bootstrap 3 Datepicker capture date using inline calendar

I'm trying to capture the date selected on my bootstrap 3 datepicker, but I can't seem to understand the documentation, so I tried this:
<div id="datetimepicker">
<input type="hidden" class="form-control" id="datepicker-data"></div>
</div>
with my jquery being:
$('#datetimepicker').datetimepicker({
inline:true,
format: 'DD/MM/YYYY',
daysOfWeekDisabled: [0, 6]
});
$("#datetimepicker").click(function(){
var dateData = $('#datepicker-data').val();
alert(dateData);
});
How do I get the date I selected on the datepicker?
Your html was incorrect. Here is the corrected html. I believe your intention was to use inline datetimepicker such as in this example. If you see the example quoted in the page:
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<!-- Start of datetimepicker html-->
<div id="datetimepicker12"></div>
<!-- End of datetimepicker html-->
</div>
</div>
</div></code>
So your corrected HTML should be as belows:
<div id="datetimepicker">
<input type="hidden" class="form-control" id="datepicker-data">
</div>
javascript
$('#datetimepicker').datetimepicker({
inline:true,
format: 'DD/MM/YYYY',
daysOfWeekDisabled: [0, 6]
});
$("#datetimepicker").click(function(){
var dateData = $('#datepicker-data').val();
alert(dateData);
});

Clear the value in a datetimepicker field

I'm sure this is simple and it's my understanding of jquery/javascript that is holding me back - but I can't get this to work.
All I need to do - is - When a button on the screen is clicked, clear some of the input field on the form back to their original values.
This is working fine, for all fields except a datetimepicker field.
Here is the relevant bits of code, that defines the input field :
<div class='form-group' id='START_DATEFormGroup'>
<label for='START_DATE' class='col-sm-2 control-label' data-toggle='tooltip' data-placement='top' title=''>Start Date</label>
<div class='col-sm-8'>
<div class='input-group date form_date col-sm-3' data-date-format='dd M yyyy' data-link-field='START_DATE' data-link-format='yyyy-mm-dd'>
<input class='form-control' size='16' type='text' />
<input type='hidden' id='START_DATE' name='START_DATE' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'>
</span> // group-addon
</span> // calendar
</div> // form_date
</div> // col-sm-8
</div> // form-group
I am initializing datetimepicker as follows :
function enableDatepicker(){
$( document ).ready(function() {
$('.form_date').datetimepicker({
format: 'dd M yyyy',
minView: 2,
autoclose: 1,
})
});
}
To clear the input fields down I have :
function clearActionForm(){
// code here to clear the various input fields to null or their initial values.
// Need statements to clear the datetimepicker field to null.
}
So, can someone give me the line(s) of code I need to insert into clearActionForm() in order to clear the START_DATE field to null.
Thanks.
If you are using the eonasdan datetimepicker use the following:
// clears
$("#form_date").data("DateTimePicker").date(null);
// updates with date
$("#form_date").data("DateTimePicker").date(new Date());
// or update with string
var myCoolDate = "27 05 1975";
$("#form_date").data("DateTimePicker").date(myCoolDate);
// or update with a moment
var moment = moment().add(2, 'd');
$("#form_date").data("DateTimePicker").date(moment);
Below is a demo of using different types of changes.
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'dd M YYYY',
});
});
$('#clear').click(function() {
$("#datetimepicker1").data("DateTimePicker").date(null);
})
$('#date').click(function() {
var sysdate = new Date();
$("#datetimepicker1").data("DateTimePicker").date(new Date());
})
$('#string').click(function() {
var myCoolDate = "27 05 1975";
$("#datetimepicker1").data("DateTimePicker").date(myCoolDate);
})
$('#moment').click(function() {
var now = moment().add(2, 'd');
$("#datetimepicker1").data("DateTimePicker").date(now);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<input type='button' id='clear' Value='Clear Date'>
<input type='button' id='date' Value='Set with date'>
<input type='button' id='string' Value='Set with string'>
<input type='button' id='moment' Value='Set with moment'>
use this line $('.form_date').data("DateTimePicker").clear()
Demo
Easy way to rest the selected date as well as highlighted date by below concept
$('#txtWQApprovalDate').datepicker('setDate', null).datepicker('fill');
Assuming that you are using the datetimepicker plugin from xdsoft.net/jqplugins/datetimepicker, one quick way to clear the datetimepicker's current value would be the following:
$('.form_date').val('');
As an alternative (this sets the value of the datetimepicker to the current time):
$('.form_date').datetimepicker({
value: (new Date()).toLocaleString()
});
This value does not not match the format of the datetimepicker, but will be converted to the correct format automatically when the datetimepicker is used.
If you are using the eonasdan datetimepicker use the following:
// clears
$j(".form_date").data("DateTimePicker").setDate(null);
// updates to now
$j(".form_date").data("DateTimePicker").setDate(new Date());
// or update to a given date
var myCoolDate = "05/27/1975";
$j(".form_date").data("DateTimePicker").setDate(myCoolDate);

Categories

Resources