best way to set jquery datepicker dates when user paging through data - javascript

I have a report where I am using jquery ui's datepicker for the start and end dates for the report data.
When a user pages through the data, I want the maintain the date ranges on the picker.
How can I do this?
Say I modify the url's for the next/previous buttons based on the values of the datepicker, how would I reset the datepicker values?
I would have to do it programatically i.e. inject javascript code that set's the datepicker, is that the best way?
I am using asp.net mvc

The DatePicker control is bound to an input box, if you set the value of that input box to a date, the DatePicker will use that value when displaying it's UI.
So you could use the querystring to store the date range, and then when the page loads; parse the query string and set the values to the input box. Then initialise your DatePicker.

Related

How to make datetime-local input with disabled specified dates

I'm creating website with form that user can choose date for doctor's appointment and some of dates should be disabled (fo example doctor has another appoitment). Dates will be in database with datetime-local format and i want to select them and disable.
I found only min and max attribute but i can't multiple it, step attribute is not resolving my problem.
I can select these dates but i need to remove them from calendar or make them unchoosable.
Disabling specific dates while using the simple <input type='date' /> is not possible. You would either need to check the date against a list of dates after it is selected, or use a datepicker library.

Dynamic Year Calendar in JSP using JavaScript or jQuery

I need to implement a dynamic yearly calendar, there will be a drop-down box which has up to 10 years from now, if a year was selected and the 'Set' button was pressed. A calendar for a whole year will be displayed in the JSP. Like this one:
enter image description here
This calendar will also be construct with check boxes, since I will use the Struts's html:multibox tag. Can someone give me an idea on how to do this in JS or jQuery?
Note: I am only allowed to use JSP, JS and jQuery. No AJAX or other stuff.
If you want to handle everything in javascript (which I recommend), you can start by looking at these items:
Capturing the selected year using .change() https://api.jquery.com/change/
Get the list of days in each months Find all the days in a month with Date object?
Create a dynamic tables to represent each months which contain checkboxes How do I create HTML table using jQuery dynamically?
If you ever need to set the checkboxes' value from the server-side, just render them as hidden inputs or javascript variables values then use them to check/uncheck the checkboxes using jquery Setting "checked" for a checkbox with jQuery?
Since we are doing most of the things using javascript, avoid relying on struts taglibs (eg: html:multibox) because they are executed (rendered) before javascript.

How to create a datepicker inside the input field without the popup

How do i create datepicker which can be inside an input field & workable like changing the dates & year. I want to create something similar to below image, the link as been provided.
I do not want to create a popup or drodown datepicker like the jquery calender. And also how do i insert this into the minimal form from the codedrops. http://tympanus.net/Development/MinimalForm/
Check the image in the below link.
http://awesomescreenshot.com/00f4n5pud0

disable dates in datepicker with orchard

Using orchard 1.6. I've created a form which uses a content type which uses a field (date and time), which allows the user to use a date picker to select the day.
Trouble is the user can select any date. I would like the date to be set for today, and the other dates disabled. How is this possible? thank you for replies
If you wanna know the location of the DateTimeField then just go to following directory :
Orchard.Fields/Views/EditorTemplates/Fields/DateTime.Edit.cshtml
but making change to orchard fields is not a good practice , cause your case is very special.the recommended way to do this is to create your own EditorTemplate and integrate jquery-ui datepicker in your Template view.

option to change jquery ui datepicker to just a "yearpicker"

I'm checking datapicker documentation here trying to find a way to change it from a full display date picker to just something where I can pick a year only. But I can't find anything. I tried suggestions found here like this, but it still displays the full view.
.datepicker({changeDay:false, changeMonth:false, changeYear:true})
Can I somehow turn the datapicker to a year picker only?
For my company's website, we used jQuery UI slider instead since year is a single value. In our implementation, we also had to do a year range, a slider also accommodated for that.
http://jqueryui.com/demos/slider/#steps

Categories

Resources