Bootstrap Datepicker:Disable date range from database - javascript

Does exist any possibility to disable date ranges from database? For example, I have date range
from 15.01.2021 to 21.01.2021 and from 24.01.2021 to 03.02.2021 and I want to disable these dates in datepicker and you couldn't be able to select from let's say from 17.01.2021 to 25.01.2021 but you can select from 22.01.2021 to 23.01.2021.

Database
On your database you could create a table of the like of invalid_interval(id, from, to). Store the invalid intervals and load it at your server-side, so you can serve the client-side by sending out this information.
Client-side
When you initialize your date picker, you can set your disabled dates like this:
var disabledDate = ['2020-1-1', '2020-1-15','2020-1-3'];
$('#datetimepicker1').datetimepicker({
disabledDates: disabledDate
});
Read more here. So, the attribute you were looking for is disabledDates and you can pass an array to it.

Related

Way to make date field to show only past date(less than current date)

Could you please share a sample custom object code to restrict the user from selecting the future date and populate a warning message from the questionnaire?
Using version -6.9 SP2
I am not really sure what you really want but what I am guessing is that you want to ensure that user only pick dates earlier than the current date in date input element.
For this you can use the "min" value of the date input field and set it to current date.

Birthdate off by one date

I have a javascript app in which the user selects their birthdate using a 3rd party datepicker.
This date is then sent to the server, where it is stored in SqlServer as a Date (not a DateTime, nor a DateTimeOffset).
This typically works fine. However, if the user is in a timezone such as +2:00, and it's just after midnight, then the date which is sent to the server is now different.
For example, I select the date of Jan 1, 2000 in the DatePicker.
The value which is being sent to the server is: 1999-12-31T22:00:00.000Z
The server then strips the time off it to store it as a date, and then the date is now off by one.
How do I resolve this?
I believe that dateFormat: "d/MM/yyyy" option of datepicker is what you're looking for.
Otherwise you can use the following code to convert Date object into the required string.
date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear()
Both of the options will give you a string with the date, which you can then convert to date object in sql using str_to_date
See: https://stackoverflow.com/a/1861519/2652134

Decrease bootstrap datepicker end date

I am using bootstrap datepicker for one on my project and set endDate like this
$('#daterange').data('daterangepicker').setEndDate('2017/03/12');
EndDate is somthign that i get from database, only problem is that on datepicker i have to set endDate but decrease one date, it measn if i have something from server like this
2017/03/12
I need to bind datepicker like this
$('#daterange').data('daterangepicker').setEndDate('2017/03/11');
is it possible to do that in frontend or i must go to server to correct, any simple solution?
you can use momentjs
moment("your date", "YYYY/MM/DD").subtract(1, 'days').format('YYYY/MM/DD');
What i will do:
1. get date from database ( 2017/03712)
2. change it to datetime format
3. decrease one day
4. setEndDate with correct format

angular.ui DatePicker how to set the Date format?

I am using the angular.ui DatePicker
http://angular-ui.github.io/bootstrap/#/datepicker
In the doc it says:
"Everything is formatted using the date filter and thus is also localized."
I am having a hard time figuring out how to use the date filter to control the date format set in the model.
Using the DatePicker I am getting a date format set in the model like this:
"2013-09-07T03:18:43.000Z"
However, I am trying to serialize with Grails, and I want my date format to be like this:
"2013-09-07T03:18:43Z"
How do I configure the DatePicker to output this format of date? Or since it is a JavaScript date, do I have to do this at the server side? Ultimately, I would like to send:
"2013-09-07T03:18:43Z"
in a JSON put to the server.
TIA
You can follow this trademark way of parsing the default ISO date format to your own format stripping out the milliseconds, in client side.
Or, in the server side (Grails) you can parse the string to your own format as below:
Date.parse("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", "2013-09-07T03:18:43.000Z")
.format("yyyy-MM-dd'T'HH:mm:ss'Z'")
//prints "2013-09-07T03:18:43Z"
If you are persisting a Date instead of a String, just use Date.parse(..) (without .format).

Create an input type="date" in Ember

I'm trying to create an <input type="date"/> in Emberjs and I have two problems:
In my country the date is displayed as DD-MM-YYYY format while the date field requires a MM-DD-YYYY format (and then the browser displays it according to its locale). So the date should be formatted in one way if the browser supports the date input field and in the other way if not
The date is bound to a Date object
I'm using Momentjs for formatting and Ember Data.
I'm trying to extend Ember.TextField like this:
App.DateField = Ember.TextField.extend
value: ( (key, value) ->
if value?
if /Date/.test value.constructor #I assume that if the passed value is a Date object then it is arriving directly from the model
if Modernizr.inputtypes.date
moment(value).format('YYYY-MM-DD')
else
moment(value).format('DD-MM-YYYY')
else # if the passed value is not a Date object then the user is typing into the form
if Modernizr.inputtypes.date
value = new Date('value')
else
value
).property()
type: 'date'
For browsers with date input supports this works.
For the other browsers the date is correctly displayed, but it is saved as a (wrong formatted) string in the model.
How can I maintain the correct formatting while still using Date objects in the backend?
Demo
Update
Thanks to the blog post provided in the accepted answer I was able to update the demo to do what I want (with some weirdnesses, but not relevant at this time)
Demo2
Have look at these two blog posts:
This is a simple date picker:
http://hawkins.io/2013/06/datepicker-in-ember/
This one uses the bootstrap date picker
http://hawkins.io/2013/06/fancy-ember-datepicker-with-twitter-bootstrap/
Hopefully that will help
I don't see any parsing for the string use case. You will need to use something like Date.parse to convert the string entered by the user into a Date object.
if Modernizr.inputtypes.date
value = new Date(value)
else
value = Date.parse(value)

Categories